カスタマイズ

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

 

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

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

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

デフォルト

カスタマイズ後

 


 

開発環境

Android Studio 3.4
Android Emulator Nexus 5 API 27

 
 

動画

【Android Studio】How to Display Custom Toast

 
 

解説

プロジェクトの用意

このサンプルでは 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 の使い方

setGravity (int gravity, int xOffset, int yOffset)

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

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

完成

 
 
 

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

toast_layout.xml

 

activity_main.xml

 

MainActivity.java

 
 

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

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です