[Android] Toast をカスタマイズする

トーストで表示される色や形がいまいちアプリに合わないと思うことは多々あるのではないでしょうか。

Snackbar を使って代替えにできます

Android Studio 3.6
API 29

Custom Toast

(注)　Android 11 からはToastに関して変更点があります。
簡単な Toast は使えますが、以下のような setViewを使うようなカスタムトーストはAPI30からは非推奨になりました。

しばらくは残しておきますがいずれこの記事も削除する予定です。

Android 11 でのトーストに関する更新

バックグラウンドからのカスタムトーストのブロック
トーストのコールバック
Text Toast API の変更

このため、

Toastはちょっとした確認メッセージを入れるのにとても適しています。ただテキスト、あるいは画像を表示させるのであれば他の方法もありますが、ほどほどの時間で消えてくれるところがいいですね。これをタイマー使うと煩雑なコードになりそうです。

目次
1. カスタマイズ
2. サンプルコード
3. サンプル動画

カスタマイズ

　
カスタマイズとして、このくらい手を加えてみます。

画像付きのメッセージ
ダイアログの形は丸角
グラデーションのついた背景

大元のToastをインポートします
import android.widget.Toast;
　

Toast.makeText(this, "メッセージ", Toast.LENGTH_LONG).show();

1	Toast.makeText(this, "メッセージ", Toast.LENGTH_LONG).show();

　
これでdefaultのトーストはできあがりで、これを拡張していきます

TextViewとImageViewを乗せたViewを作り
1. custom_toast.xmlというレイアウトファイルにします
そのViewを inflate を使ってactivity_main に挿入
TextViewは背景を shape を使って色を付けたり、角を丸く

サンプルコード

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Context context;
    private String toastMessage;

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

        context = getApplicationContext();

        toastMessage = "OK";

        Button button = findViewById(R.id.button);
//        button.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View v) {
//                if(toastMessage != null){
//                    toastMake(toastMessage, context);
//                }
//            }
//        });

        // lambda式
        button.setOnClickListener( v -> {
            if(toastMessage != null){
                toastMake(toastMessage, context);
            }
        });

    }

    // custom toast maker
    public void toastMake( String str , Context cont) {
        Toast toast = new Toast( cont );

        LayoutInflater inflater = getLayoutInflater();

        // relative_layout:custom_toast.xmlのRelativeLayoutに付けたID
        ViewGroup viewGroup = findViewById(R.id.relative_layout);

        // inflateする
        View view = inflater.inflate( R.layout.custom_toast, viewGroup);

        TextView textView = view.findViewById( R.id.message );
        textView.setText( str );
        // 非推奨
        toast.setView( view );
        // 表示時間
        toast.setDuration( Toast.LENGTH_LONG );
        // 位置調整
        toast.setGravity(Gravity.CENTER, 0, -100);

        toast.show();
    }

}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.os.Bundle;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private Context context;

private String toastMessage;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

context = getApplicationContext();

toastMessage = "OK";

Button button = findViewById(R.id.button);

// button.setOnClickListener(new View.OnClickListener() {

// @Override

// public void onClick(View v) {

// if(toastMessage != null){

// toastMake(toastMessage, context);

// }

// });

// lambda式

button.setOnClickListener( v -> {

if(toastMessage != null){

toastMake(toastMessage, context);

}

});

}

// custom toast maker

public void toastMake( String str , Context cont) {

Toast toast = new Toast( cont );

LayoutInflater inflater = getLayoutInflater();

// relative_layout:custom_toast.xmlのRelativeLayoutに付けたID

ViewGroup viewGroup = findViewById(R.id.relative_layout);

// inflateする

View view = inflater.inflate( R.layout.custom_toast, viewGroup);

TextView textView = view.findViewById( R.id.message );

textView.setText( str );

// 非推奨

toast.setView( view );

// 表示時間

toast.setDuration( Toast.LENGTH_LONG );

// 位置調整

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

toast.show();

}

　
activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#dfe"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="340dp"
        android:layout_marginStart="80dp"
        android:layout_marginEnd="80dp"
        android:text="@string/button" />

</LinearLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#dfe"

android:orientation="vertical"

android:gravity="center"

tools:context=".MainActivity">

<Button

android:id="@+id/button"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="340dp"

android:layout_marginStart="80dp"

android:layout_marginEnd="80dp"

android:text="@string/button" />

</LinearLayout>

　
Inflateするレイアウトファイルを作成して res/layout/ 以下に配置します。
また例えば画像(ok.png)をdrawableに入れておきます。
custom_toast.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/round_rectangle"
    android:orientation="vertical" >

    <ImageView
        android:src="@drawable/ok"
        android:contentDescription="@string/app_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:paddingStart="200dp"
        android:paddingEnd="10dp"
        android:textColor="#f40"
        android:textStyle="bold"
        android:textSize="60sp" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/relative_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/round_rectangle"

android:orientation="vertical" >

<ImageView

android:src="@drawable/ok"

android:contentDescription="@string/app_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:id="@+id/message"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="80dp"

android:paddingStart="200dp"

android:paddingEnd="10dp"

android:textColor="#f40"

android:textStyle="bold"

android:textSize="60sp" />

</RelativeLayout>

　
背景を丸角のボックスで、エメラルド系のグラテーションを施してみます。
shape を使った定義xmlを、drawable フォルダに入れます
　
round_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="20dp" />
    <gradient
        android:angle="180"
        android:startColor="#8fa"
        android:endColor="#0a4" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<corners

android:radius="20dp" />

<gradient

android:angle="180"

android:startColor="#8fa"

android:endColor="#0a4" />

</shape>

　
リソース

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">picture</string>
    <string name="button">Button</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="description">picture</string>

<string name="button">Button</string>

</resources>

サンプル動画

　
custom_toast.xml を色々修正してアプリのテーマにあったカスタマイズができますね
　
　
関連ページ；

Toastを表示させる
Toastのカスタマイズ

　
Refferences:
Toasts | Android Developers
Toasts
Android 11 でのトーストに関する更新