【Android Studio】Toast に画像・テキストを追加するカスタマイズ方法

この記事ではToast（トースト）のカスタマイズ方法を紹介します。

デフォルトの Toast は文字列のみしか表示できませんが、自分でレイアウトを用意すれば文字サイズを変えたり画像を表示することができます。

今回は Toast に TextView と ImageView を表示して背景色を変更する方法を紹介します。
 

開発環境

Android Studio 3.4
Android Emulator Nexus 5 API 27

動画

解説

プロジェクトの用意

このサンプルでは Custom Toast という名前でプロジェクトを作成して MainActivity.java と activity_main.xml があることを前提に進めていきます。

ご自身のプロジェクトに合わせて変更してください。

toast_layout.xml を作成する

まずは Toast のレイアウトを用意します。

Android Studio 画面左側のプロジェクト構造にある res → layout フォルダの上で右クリックして、New → Layout resource file を選択します。

File name に toast_layout と入力して OK を押します。

toast_layout.xml が作成されたら、以下のようにコードを変更します。

7行目

android:background="@color/colorPrimary"

Toast の背景色を指定しています。

27行目

android:src="@android:mipmap/sym_def_app_icon"

画像を指定しています。

自分で用意した画像を使う場合は drawable フォルダに画像を置いて、android:src="@drawable/filename" と指定します。
 

29行目

android:id="@+id/msg"

この TextView のテキストは MainActivity.java から動的に変更するので id を指定しておきます。

ImageView の画像も id を指定すれば、同じように MainActivity.java から変更することができます。
 
 

Toast を呼び出すボタンを用意

次に Toast を表示するためのボタンを用意します。

activity_main.xml を開いて、9~18行目を追加します。

このようなボタンが追加されます。

18行目

android:onClick="showToast"

ボタンが押されたときに showToast メソッドを呼び出すために書きます。

赤い波線が出ているかもしれませんが、このあと MainActivity.java に showToast メソッドを追加した時に消えるのでこのままで大丈夫です。

Toast を表示する

先ほど用意したボタンが押されたら Toast が表示されるようにします。

MainActivity.java を開いて 19~30行目を追加します。

27行目

toast.setGravity(Gravity.CENTER, 0, 0);

Toast が画面の中央に表示されるように Gravity を設定します。
デフォルトの Toast と同じように画面下に表示する場合は Gravity の設定は不要です。
 

setGravity の使い方

水平方向に動かしたい場合は第二引数の xOffset、垂直方向に動かしたい場合は第三引数の yOffset を変更します。

例えば中央よりも少しだけ下に Toast を表示したい場合は
toast.setGravity(Gravity.CENTER, 0, 100);
と書くことができます。
 
 

完成

上手く動かない場合は下のサンプルコードと比較してみてください。

toast_layout.xml

activity_main.xml

MainActivity.java

ABOUT ME

Sara

「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂