ユーザーにちょっとした通知を送ってみよう!ToastとSnackBarの使い方

投稿日:2017年11月4日 更新日:

Androidアプリ開発をしていて、ユーザーにちょっとしたメッセージを通知したい時はありませんか?私はあります。そんな時に便利なのが、「Toast(トースト)」と「SnackBar(スナックバー)」による通知です。

今日は、ToastとSnackBarを使ってユーザーに通知を送る方法について解説していきます。ToastとSnackBarを使いこなすことで、よりインタラクティブなAndroidアプリを開発することができるようになります。

Toast(トースト)の使い方

Toastによる通知はこんな感じです。とてもシンプルな通知ですね。まずはこのToastを表示してみましょう。実装もとても簡単です。

toast

まずはレイアウトファイルを作成して、Toastを表示するためのButtonを作ります。ついでにSnackBarを表示するためのButtonも作っておきます。Toast表示の実装自体とは関係ないですが、Androidアプリ開発に入門したばかりの方のことも考えて、一応、詳しく書いておきます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linear_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="jp.rocketapps.notification.MainActivity">

    <Button
        android:id="@+id/toast_short"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toast Short" />

    <Button
        android:id="@+id/toast_long"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toast Long" />

    <Button
        android:id="@+id/snack_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SnackBar" />

</LinearLayout>

レイアウトや各Buttonにはidを割り振っておきましょう。後で使います。

次に、各Buttonのクリックイベントを取得して、ButtonクリックでToastを表示してみましょう。'findViewById'でButtonを取得した後、OnClickListenerをセットします。そして、onClickでToastを表示します。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    findViewById(R.id.toast_short).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Toast.makeText(getApplicationContext(), "Toast Short!", Toast.LENGTH_SHORT).show();
        }
    });

    findViewById(R.id.toast_long).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Toast.makeText(getApplicationContext(), "Toast Long!", Toast.LENGTH_LONG).show();
        }
    });
}

コードは長いですが、Toastを表示しているのは以下の箇所です。たったこれだけでToastを表示することができます!

Toast.makeText(getApplicationContext(), "Toast Short!", Toast.LENGTH_SHORT).show();

makeTextの1個目の引数はContext、2個目の引数はToastに表示する文字列を渡します。

makeTextの3個目の引数として、Toast.LENGTH_SHORTまたはToast.LENGTH_LONGを渡しています。この引数では、Toastを表示する長さを指定することができます。Toast.LENGTH_SHORTでは2秒程度、Toast.LENGTH_LONGでは4秒程度、Toastを表示します。

Toastの基本的な使い方は、以上です!とても簡単に通知を送ることができましたね。

SnackBar(スナックバー)の使い方

次に、SnackBarの使い方を見ていきましょう。SnackBarはToastよりも新しいコンポーネントで、ユーザーのアクションを定義できるところがToastよりも優れています。

SnackBarによる通知はこんな感じです。通知用テキストに加え、アクションを定義することができます。

snackbar

SnackBarは、Toastと異なり標準ではプロジェクトに含まれていません。まずはプロジェクトに「デザインサポートライブラリ」と呼ばれるGoogleが公式に提供しているライブラリを導入します。アプリのbuild.gradleファイルのdependenciesにcom.android.support:designを追加します。

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0' //追加
}

ポイントは、サポートライブラリのバージョンとデザインサポートライブラリのバージョンを合わせること、プロジェクト単位のbuild.gradleではなくアプリ単位のbuild.gradleに記載すること、記載を追加したらプロジェクトをSyncすることです。

実際にSnackBarを表示させてみましょう。ButtonをクリックしたらSnackBarを表示させるようにしてみます。以下は、一番簡単なSnackBarの使い方です。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //中略

    findViewById(R.id.snack_bar).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            LinearLayout layout = findViewById(R.id.linear_layout);
            Snackbar.make(layout, "Snackbar!", Snackbar.LENGTH_INDEFINITE).show();
        }
    });
}

SnackBarを表示させている箇所のみ抜き出すと、こんな感じです。Toastと同じような感じで使えます。

Snackbar.make(layout, "Snackbar!", Snackbar.LENGTH_INDEFINITE).show();

SnackBarでは、表示時間に関してSnackbar.LENGTH_SHORTSnackbar.LENGTH_LONGに加えてSnackbar.LENGTH_INDEFINITEが使えます。Snackbar.LENGTH_INDEFINITEは、非表示にされるまでSnackBarが表示され続けます。

SnackBarのもう少し詳しい使い方についてまとめてみます。

  • 背景色を変更したい時はgetViewでビューを取得して、setBackgroundColorで色を指定します。
  • テキストカラーの変更は、SnackbarのビューからTextViewを取得して、TextViewのテキストカラーを変更します。
  • アクション部分のテキストカラーは、setActionTextColorを使えば変更できます。
  • setActionでクリックリスナーを登録することができます。

これらを全部まとめて使ってみると、こんな感じで実装できます。

LinearLayout layout = findViewById(R.id.linear_layout);

Snackbar snackbar = Snackbar.make(layout, "Snackbar!", Snackbar.LENGTH_INDEFINITE);
snackbar.getView().setBackgroundColor(Color.BLUE);
snackbar.setActionTextColor(Color.BLACK);
snackbar.setAction("Action", new View.OnClickListener() {
    @Override
    public void onClick(View view){
        //do something here
    }
});

TextView textView = snackbar.getView().findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.WHITE);

snackbar.show();

少し長いコードになりましたが、ユーザーのアクションや色などを自由に変更することができます。

まとめ

本記事では、ユーザーにちょっとした通知を送るためにToastSnackBarを使ってみました。どちらもお手軽に使える割に、効果の高いコンポーネントです。ToastとSnackBarを使いこなして、より便利で楽しいアプリを作ってみてください!

茨城県つくば市在住のAndroidアプリエンジニアです。

-Android

Copyright© Androidアプリ開発@つくば , 2017 AllRights Reserved Powered by AFFINGER4.