はじめに
Android のダイアログとかポップぽいものを Popup としてまとめました。その3!!
今回は Toast と Snackbar について!
ソースは github にあげてます↓↓↓
ソース(github)
Toast
メッセージを表示するやつ。アプリがバックグラウンドにいっても表示されたままになる。
通常 | 中央表示 | 左上表示 | カスタム |
---|---|---|---|
アプリがバックグラウンド状態でも表示される
基本的に使うのは下記。makeText
で Toast
を生成し、setGravity
で表示位置を調整して show
で表示する。
1 2 3 |
makeText(context: Context!, text: CharSequence!, duration: Int) setGravity(gravity: Int, xOffset: Int, yOffset: Int) show() |
duration
は下記2パターン
- Toast.LENGTH_LONG
- Toast.LENGTH_SHORT
実装
簡易実装
1 2 3 4 5 6 7 |
// 画面中央下部に表示 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() |
カスタム表示
1 2 3 4 5 6 7 8 9 10 11 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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> |
参考
Snackbar
メッセージ表示とアクション設定ができるマテリアルコンポーネントの一つ。Toast
とは異なりアプリがバックグラウンドになった場合は表示されない。
Snackbarの形を変えたり、アイコンをのせたり、アクションボタンの見た目を変更したりといったカスタマイズは推奨されていない(Don't って書いてたのでするな!ってことだと思う)背景色と文字色の変更は標準で用意されている。
メッセージのみ | アクション付き | 中央表示 | 左寄せ | カスタム |
---|---|---|---|---|
基本的に使うのは下記。make
で Snackbar
を生成し、setAction
でアクションを設定し、setTextColor
などで色を調整し show
で表示する。
1 2 3 4 5 6 7 |
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
と重なって表示されてしまう。
実装
1 2 3 4 5 6 7 8 9 10 11 |
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
で設定するとそこに表示される。(表示位置変えるっていうのをやっていいのかはわからない。。。)
1 2 3 4 5 6 7 |
<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" |
1 2 3 |
Snackbar .make(findViewById(R.id.center), "Center", Snackbar.LENGTH_SHORT) .show() |
参考
- Android デベロッパー: Snackbar
- material components Snackbars
- Android で Snackbar の表示位置 & 幅を Material Design ガイドラインに則ってカスタマイズしてみた件
おわりに
Toast
がアプリバックグラウンドにいても表示されるっていうのが味噌なんだと思う。。。しらんけど。マテリアルコンポーネントは色々決まりがあるみたいなのでマテリアルデザインのサイトをよくチェックした方がよさそう。
Android は同じことをやるのでもやり方がありすぎてこまる。。。使い分けがわからない。。。
とりあえずこんな記事をみつけた
Dialog・Snackbar・Toast の使い分け
コメント