iOS開発者のAndroid開発入門ポップ色々その３（Toast・Snackbar編）

はじめに
Toast
1. 実装
  1. 簡易実装
  2. カスタム表示
2. 参考
Snackbar
1. 実装
2. 参考
おわりに

はじめに

Android のダイアログとかポップぽいものを Popup としてまとめました。その３！！
今回は Toast と Snackbar について！

ソースは github にあげてます↓↓↓
ソース（github）

Toast

メッセージを表示するやつ。アプリがバックグラウンドにいっても表示されたままになる。

通常	中央表示	左上表示	カスタム

アプリがバックグラウンド状態でも表示される

基本的に使うのは下記。makeText で Toast を生成し、setGravity で表示位置を調整して show で表示する。

makeText(context: Context!, text: CharSequence!, duration: Int)
setGravity(gravity: Int, xOffset: Int, yOffset: Int)
show()

makeText(context: Context!, text: CharSequence!, duration: Int)

setGravity(gravity: Int, xOffset: Int, yOffset: Int)

show()

duration は下記２パターン

Toast.LENGTH_LONG
Toast.LENGTH_SHORT

実装

簡易実装

// 画面中央下部に表示
Toast.makeText(this, "Normal", Toast.LENGTH_SHORT).show()

// 画面左上部に表示
val toast = Toast.makeText(this, "Top Left", Toast.LENGTH_SHORT)
toast.setGravity(Gravity.TOP or Gravity.LEFT, 0, 0)
toast.show()

// 画面中央下部に表示

Toast.makeText(this, "Normal", Toast.LENGTH_SHORT).show()

// 画面左上部に表示

val toast = Toast.makeText(this, "Top Left", Toast.LENGTH_SHORT)

toast.setGravity(Gravity.TOP or Gravity.LEFT, 0, 0)

toast.show()

カスタム表示

val inflater = layoutInflater
val container = findViewById<LinearLayout>(R.id.custom_toast_container)
val layout = inflater.inflate(R.layout.custom_toast, container)
val text = layout.findViewById<TextView>(R.id.text)
text.text = "This is a custom toast"
with (Toast(this)) {
    setGravity(Gravity.CENTER_VERTICAL, 0, 0)
    duration = Toast.LENGTH_LONG
    view = layout
    show()
}

val inflater = layoutInflater

val container = findViewById<LinearLayout>(R.id.custom_toast_container)

val layout = inflater.inflate(R.layout.custom_toast, container)

val text = layout.findViewById<TextView>(R.id.text)

text.text = "This is a custom toast"

with (Toast(this)) {

setGravity(Gravity.CENTER_VERTICAL, 0, 0)

duration = Toast.LENGTH_LONG

view = layout

show()

}

custom_toast.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/custom_toast_container"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:background="#DAAA"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        app:srcCompat="@android:mipmap/sym_def_app_icon" />
    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        />
</LinearLayout>

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

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

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/custom_toast_container"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="8dp"

android:background="#DAAA"

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="8dp"

app:srcCompat="@android:mipmap/sym_def_app_icon" />

<TextView android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#FFF"

</LinearLayout>

参考

Android デベロッパー: Toast

Snackbar

メッセージ表示とアクション設定ができるマテリアルコンポーネントの一つ。Toast とは異なりアプリがバックグラウンドになった場合は表示されない。
Snackbarの形を変えたり、アイコンをのせたり、アクションボタンの見た目を変更したりといったカスタマイズは推奨されていない（Don't って書いてたのでするな！ってことだと思う）背景色と文字色の変更は標準で用意されている。

メッセージのみ	アクション付き	中央表示	左寄せ	カスタム

基本的に使うのは下記。make で Snackbar を生成し、setAction でアクションを設定し、setTextColor などで色を調整し show で表示する。

make(view: View!, text: CharSequence!, duration: Int)
setAction(text: CharSequence!, listener: View.OnClickListener!)
setAnchorView(anchorViewId: int)
setTextColor(color: int)
setActionTextColor(color: int)
setBackgroundTint(color: int)
show()

make(view: View!, text: CharSequence!, duration: Int)

setAction(text: CharSequence!, listener: View.OnClickListener!)

setAnchorView(anchorViewId: int)

setTextColor(color: int)

setActionTextColor(color: int)

setBackgroundTint(color: int)

show()

duration は下記3パターン

Snackbar.LENGTH_LONG
Snackbar.LENGTH_SHORT
Snackbar.LENGTH_INDEFINITE
Dismissするまでずっと表示？

SnackBar は FAB や BottomAppBar の上に出すよう推奨しているのでそういうときに setAnchorView に FAB などを設定する。何も設定しないと FAB と重なって表示されてしまう。

実装

val root = findViewById<View>(R.id.root) // ActivityのrootのConstraintLayout
Snackbar
        .make(root, "Custom", Snackbar.LENGTH_LONG)
        .setAction("action") {
            Toast.makeText(this, "Action", Toast.LENGTH_SHORT).show()
        }
        .setTextColor(ContextCompat.getColor(this, R.color.colorAccent))
        .setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
        .setBackgroundTint(ContextCompat.getColor(this, R.color.colorPrimaryDark))
        .setAnchorView(R.id.fab)
        .show()

val root = findViewById<View>(R.id.root) // ActivityのrootのConstraintLayout

Snackbar

.make(root, "Custom", Snackbar.LENGTH_LONG)

.setAction("action") {

Toast.makeText(this, "Action", Toast.LENGTH_SHORT).show()

}

.setTextColor(ContextCompat.getColor(this, R.color.colorAccent))

.setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))

.setBackgroundTint(ContextCompat.getColor(this, R.color.colorPrimaryDark))

.setAnchorView(R.id.fab)

.show()

表示位置を変えたい場合は下記のように任意の位置に空のViewを配置して make で設定するとそこに表示される。（表示位置変えるっていうのをやっていいのかはわからない。。。）

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"

<androidx.coordinatorlayout.widget.CoordinatorLayout

android:id="@+id/center"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

Snackbar
    .make(findViewById(R.id.center), "Center", Snackbar.LENGTH_SHORT)
    .show()

Snackbar

.make(findViewById(R.id.center), "Center", Snackbar.LENGTH_SHORT)

.show()

参考

おわりに

Toast がアプリバックグラウンドにいても表示されるっていうのが味噌なんだと思う。。。しらんけど。マテリアルコンポーネントは色々決まりがあるみたいなのでマテリアルデザインのサイトをよくチェックした方がよさそう。

Android は同じことをやるのでもやり方がありすぎてこまる。。。使い分けがわからない。。。
とりあえずこんな記事をみつけた
Dialog・Snackbar・Toast の使い分け

Amazon.co.jp