【Android開発】カスタムトースト（Toast）メッセージの作り方とデザイン方法を解説

トースト（Toast）とは？

カスタムトーストの解説に入る前に、まず「トースト」について簡単におさらいしておきましょう。トーストとは、現在表示中の画面上に短時間だけメッセージを表示するためのUIコンポーネントです。一定時間が経過すると自動的に消えるという特徴があります。ユーザーへの軽い通知やフィードバックに最適な仕組みです。

本記事では、このトーストメッセージを自分好みにデザインする「カスタムトースト」の作成方法を、サンプルコードとともにわかりやすく解説していきます。

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

まずはAndroid Studioで新しいプロジェクトを作成します。「File」→「New Project」を選択し、必要な情報をすべて入力して新規プロジェクトを作成してください。

ステップ2：activity_main.xmlにコードを追加する

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

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
   xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools =    "https://schemas.android.com/tools" android:layout_width = "match_parent"
   android:layout_height = "match_parent">
   <LinearLayout
      android:layout_width = "match_parent"
      android:layout_height = "match_parent"
      android:background = "#797979"
      android:gravity = "center"
      android:orientation = "vertical">
      <Button
         android:id = "@+id/showToast"
         android:text = "Show Toast"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content" />
   </LinearLayout>
</android.support.constraint.ConstraintLayout>

このレイアウトには、後ほど使用する「Show Toast」ボタンが1つ配置されています。

ステップ3：MainActivity.javaにコードを追加する

続いて、「src/MainActivity.java」に以下のコードを記述します。

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Button button = findViewById(R.id.showToast);
      button.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            LayoutInflater li = getLayoutInflater();
            View layout = li.inflate(R.layout.custom_toast, (ViewGroup)       findViewById(R.id.custom_toast_layout_id));
            Toast toast = new Toast(getApplicationContext());
            toast.setDuration(Toast.LENGTH_SHORT);
            toast.setView(layout);//setting the view of custom toast layout
            toast.show();
         }
      });
   }
}

ここでのポイントは、LayoutInflaterを使って独自のレイアウトファイル（custom_toast）を読み込み、setView()メソッドでそのビューをトーストに設定している点です。これにより、標準のトーストではなく、オリジナルデザインのトーストを表示できるようになります。

ステップ4：カスタムトースト用レイアウトを作成する

次に、「res/layout/」フォルダ内に「custom_toast.xml」というファイルを新規作成し、以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   android:id = "@+id/custom_toast_layout_id"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:gravity = "center">
   <LinearLayout
      android:layout_width = "wrap_content"
      android:layout_height = "62dp"
      android:gravity = "center"
      android:background = "@drawable/buttonshape"
      android:orientation = "horizontal">
      <ImageView
         android:id = "@+id/imageView"
         android:layout_width = "100dp"
         android:layout_height = "50dp"
         android:scaleType = "fitStart"
         android:src = "@drawable/logo" />
      <TextView
         android:id = "@id/text"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:layout_marginLeft = "10dp"
         android:layout_marginRight = "20dp"
         android:text = "This is custom toast"
         android:textColor = "#FFF"
         android:textSize = "15sp"
         android:textStyle = "bold" />
   </LinearLayout>
</LinearLayout>

このレイアウトでは、画像（ImageView）とテキスト（TextView）を横並びで配置し、トーストらしい見た目を作っています。

ステップ5：背景用のシェイプXMLを作成する

先ほどのコードでは、レイアウトの背景としてdrawableリソース内の「buttonshape」を指定しました。そこで、「res/drawable/」フォルダ内に「buttonshape.xml」というXMLファイルを作成し、以下のコードを追加しましょう。

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android" android:shape = "rectangle" >
   <corners
      android:radius = "14dp"
   />
   <gradient
      android:angle = "45"
      android:centerX = "%"
      android:centerColor = "#47A891"
      android:startColor = "#E8E8E8"
      android:endColor = "#000000"
      android:type = "linear"/>
   <padding
      android:left = "0dp"
      android:top = "0dp"
      android:right = "0dp"
      android:bottom = "0dp"/>
   <size
      android:width = "270dp"
      android:height = "60dp"/>
   <stroke
      android:width = "3dp"
      android:color = "#878787"/>
   </shape>

このシェイプ定義により、角丸・グラデーション・枠線付きのスタイリッシュな背景を実現しています。

アプリを実行して動作を確認しよう

それでは実際にアプリケーションを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提に説明します。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの実行（Run）アイコンをクリックします。表示された選択肢から接続済みのモバイルデバイスを選択すると、スマートフォン側にデフォルト画面が表示されます。

次に「Show Toast」ボタンをタップしてみてください。以下のように、独自にデザインしたカスタムトーストが画面に表示されます。

まとめ

今回は、LayoutInflaterとsetView()メソッドを組み合わせることで、アイコンやテキスト、独自の背景デザインを持つカスタムトーストを作成する手順を紹介しました。標準のトーストでは物足りない場合も、レイアウトXMLを差し替えるだけで自由自在に見た目をカスタマイズできます。ぜひご自身のアプリにも取り入れてみてください。