【Android】Snackbar（スナックバー）の実装方法を徹底解説！基本からカスタマイズまで

Snackbarとは？

Snackbar（スナックバー）は、AndroidにおけるToastに似たUIコンポーネントですが、最大の違いはアクションボタンとの連携が可能という点です。画面の下部に他のビューと干渉することなくメッセージを表示し、一定時間が経過すると自動的に閉じられます。

この記事では、AndroidアプリにSnackbarを統合する具体的な手順を、サンプルコード付きで段階的に解説します。

実装手順

ステップ1：新規プロジェクトを作成する

Android Studioを開き、「File」→「New Project」を選択して、必要な項目をすべて入力し、新しいプロジェクトを作成します。

ステップ2：Design Support Libraryの依存関係を追加する

build.gradleファイルを開き、Design Support Libraryの依存関係を追加します。

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

ステップ3：レイアウトファイルを編集する

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Click here" />
</android.support.design.widget.CoordinatorLayout>

上記のコードでは、Snackbarが親ビューを必要とするため、CoordinatorLayoutにID（layout）を設定しています。ユーザーがボタンをタップすると、画面下部にSnackbarが表示されます。

ステップ4：MainActivity.javaを実装する

src/MainActivity.java に以下のコードを追加します。

import android.annotation.TargetApi;
import android.content.Intent;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    CoordinatorLayout coordinatorLayout;
    @TargetApi(Build.VERSION_CODES.O)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        coordinatorLayout=findViewById(R.id.layout);
        Button button=findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar
                .make(coordinatorLayout, "Welcome to tutorialspoint.com", Snackbar.LENGTH_LONG)
                .setAction("Click", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        String url = "https://www.tutorialspoint.com";
                        Intent i = new Intent(Intent.ACTION_VIEW);
                        i.setData(Uri.parse(url));
                        startActivity(i);
                    }
                });
                // メッセージのテキストカラーを変更
                snackbar.setActionTextColor(Color.RED);
                // アクションボタンのテキストカラーを変更
                View sbView = snackbar.getView();
                TextView textView = (TextView) sbView.findViewById(
                android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);
                snackbar.show();
            }
        });
    }
}

ボタンがクリックされると、以下のような処理でSnackbarが表示されます。

Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Welcome to tutorialspoint.com", Snackbar.LENGTH_LONG)
.setAction("Click", new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        String url = "https://www.tutorialspoint.com";
        Intent i = new Intent(Intent.ACTION_VIEW);
        i.setData(Uri.parse(url));
        startActivity(i);
    }
});
// メッセージのテキストカラーを変更
snackbar.setActionTextColor(Color.RED);
// アクションボタンのテキストカラーを変更
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();

このコードでは、「tutorialspoint.comへようこそ」というメッセージと「Click」というアクションボタンを持つSnackbarを定義しています。ユーザーが「Click」ボタンをタップすると、デフォルトブラウザでtutorialspointのサイトが開かれます。

ステップ5：Manifest.xmlに権限を追加する

manifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.andy.myapplication">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
      </activity>
    </application>
</manifest>

ここでは、Webサイトを表示するためにインターネット権限（INTERNET permission）を宣言しています。

アプリを実行して確認する

それでは、アプリケーションを実行してみましょう。実際のAndroid端末をパソコンに接続していることを前提としています。Android Studioでプロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。接続済みのモバイルデバイスを選択すると、端末に以下のような初期画面が表示されます。

ボタンをタップすると、上図のように「Click」ボタン付きのSnackbarメッセージが画面下部に表示されます。

さらに「Click」ボタンをタップすると、デフォルトブラウザが起動し、tutorialspoint.comのWebサイトが開きます。

まとめ

Snackbarを使えば、Toastでは実現できない「ユーザーにアクションを促す通知」を簡単に実装できます。Design Support Libraryの依存関係を追加し、CoordinatorLayoutを親ビューとして指定するだけで、直感的な操作性を持つ通知UIを構築できます。色のカスタマイズなども自由に行えるので、ぜひ自分のアプリに取り入れてみてください。