【Android Studio】Snackbarを表示する方法(Java&Kotlin対応)

この記事ではアプリ画面の下部に簡単なメッセージを表示することができる Snackbar の使い方を紹介します。


開発環境
Android Studio | 4.1.1, Arctic Fox 2020.3.1 |
---|---|
Android Emulator | Nexus 4 (API 30) |
minSdk | 16 |
targetSdk | 30, 31 |
プロジェクトについて
Sample という名前でプロジェクトを作成しています。
また、以下のファイルに実装していきます。
- activity_main.xml
- MainActivity.java / MainActivity.kt
テーマの確認
themes.xml で指定しているテーマによって Snackbar のデザインが少し異なります。

Snackbar を表示する
1. ボタンの用意
まず Snackbar を表示するボタンを activity_main.xml に用意します。
<?xml version="1.0" encoding="utf-8"?> | |
<androidx.constraintlayout.widget.ConstraintLayout | |
xmlns:android="http://schemas.android.com/apk/res/android" | |
xmlns:app="http://schemas.android.com/apk/res-auto" | |
xmlns:tools="http://schemas.android.com/tools" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
tools:context=".MainActivity"> | |
<Button | |
android:layout_width="wrap_content" | |
android:layout_height="wrap_content" | |
android:text="Snackbarを表示" | |
android:textAllCaps="false" | |
app:layout_constraintBottom_toBottomOf="parent" | |
app:layout_constraintLeft_toLeftOf="parent" | |
app:layout_constraintRight_toRightOf="parent" | |
app:layout_constraintTop_toTopOf="parent" | |
android:onClick="showSnackbar"/> | |
</androidx.constraintlayout.widget.ConstraintLayout> |
2. Snackbarを表示する
ボタンが押された時に呼ばれる showSnackbar メソッドを実装します。
Javaバージョン
MainActivity.java に書きます。(18~27行目)
package com.example.sample; | |
import androidx.appcompat.app.AppCompatActivity; | |
import android.os.Bundle; | |
import android.view.View; | |
import com.google.android.material.snackbar.Snackbar; | |
public class MainActivity extends AppCompatActivity { | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_main); | |
} | |
public void showSnackbar(View view) { | |
Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT) | |
.setAction("ボタン", new View.OnClickListener() { | |
@Override | |
public void onClick(View v) { | |
// ボタンを押した時の処理 | |
} | |
}) | |
.show(); | |
} | |
} |
Kotlin バージョン
MainActivity.kt に書きます。(14~20行目)
package com.example.sample | |
import androidx.appcompat.app.AppCompatActivity | |
import android.os.Bundle | |
import android.view.View | |
import com.google.android.material.snackbar.Snackbar | |
class MainActivity : AppCompatActivity() { | |
override fun onCreate(savedInstanceState: Bundle?) { | |
super.onCreate(savedInstanceState) | |
setContentView(R.layout.activity_main) | |
} | |
fun showSnackbar(view: View) { | |
Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT) | |
.setAction("ボタン") { | |
// ボタンを押した時の処理 | |
} | |
.show() | |
} | |
} |
make メソッド
Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT)
1つ目の引数は、Snackbar を表示するビューを指定します。
2つ目の引数には、表示するメッセージを指定します。
3つ目の引数は、Snackbar を表示する時間です。
使用できる値 | |
---|---|
LENGTH_SHORT | 短く表示 |
LENGTH_LONG | 少し長めに表示 |
LENGTH_INDEFINITE | Snackbar が閉じられるか、次の Snackbar が表示されるまで表示 |
表示時間を自分で指定する場合は setDuration メソッドを使うことができます。
.setDuration(10000)
ミリ秒で指定します。1秒 = 1000ミリ秒
3. 動作確認
アプリを実行してボタンを押すと、以下のように Snackbar が表示されます。

Snackbar をスワイプで消す方法
CoordinatorLayout を使うと Snackbar をスワイプで消せるようになります。
activity_main.xml の2行目を CoordinatorLayout に変更します。
<?xml version="1.0" encoding="utf-8"?> | |
<androidx.coordinatorlayout.widget.CoordinatorLayout | |
xmlns:android="http://schemas.android.com/apk/res/android" | |
xmlns:app="http://schemas.android.com/apk/res-auto" | |
xmlns:tools="http://schemas.android.com/tools" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
tools:context=".MainActivity"> | |
<Button | |
android:layout_width="wrap_content" | |
android:layout_height="wrap_content" | |
android:text="Snackbarを表示" | |
android:textAllCaps="false" | |
android:layout_gravity="center" | |
android:onClick="showSnackbar"/> | |
</androidx.coordinatorlayout.widget.CoordinatorLayout> |
アプリを実行すると Snackbar をスワイプして消すことができるようになっています。

view オブジェクトついて
ここまでのサンプルでは、ボタンを押した時に Snackbar を表示しているので、onClick メソッドの view オブジェクトを使っています。
例えば
- メール送信完了時
- ログイン完了時
- onCreate メソッド内
のようなタイミングで Snackbar を表示する場合は、親レイアウトの id 使うことができます。
onCreate メソッド内で表示するサンプル
activity_main.xml の親レイアウトに id を追加します。(9行目)
<?xml version="1.0" encoding="utf-8"?> | |
<androidx.constraintlayout.widget.ConstraintLayout | |
xmlns:android="http://schemas.android.com/apk/res/android" | |
xmlns:app="http://schemas.android.com/apk/res-auto" | |
xmlns:tools="http://schemas.android.com/tools" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
tools:context=".MainActivity" | |
android:id="@+id/layout"> | |
<Button | |
android:layout_width="wrap_content" | |
android:layout_height="wrap_content" | |
android:text="Snackbarを表示" | |
android:textAllCaps="false" | |
app:layout_constraintBottom_toBottomOf="parent" | |
app:layout_constraintLeft_toLeftOf="parent" | |
app:layout_constraintRight_toRightOf="parent" | |
app:layout_constraintTop_toTopOf="parent" | |
android:onClick="showSnackbar"/> | |
</androidx.constraintlayout.widget.ConstraintLayout> |
Javaバージョン
MainActivity.java の onCreate メソッドで Snackbar を表示します。(17・18行目)
package com.example.sample; | |
import androidx.appcompat.app.AppCompatActivity; | |
import android.os.Bundle; | |
import android.view.View; | |
import com.google.android.material.snackbar.Snackbar; | |
public class MainActivity extends AppCompatActivity { | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_main); | |
Snackbar.make(findViewById(R.id.layout), "こんにちは!", Snackbar.LENGTH_SHORT) | |
.show(); | |
} | |
public void showSnackbar(View view) { | |
Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT) | |
.setAction("ボタン", new View.OnClickListener() { | |
@Override | |
public void onClick(View v) { | |
// ボタンを押した時の処理 | |
} | |
}) | |
.show(); | |
} | |
} |
Kotlinバージョン
MainActivity.kt の onCreate メソッドで Snackbar を表示します。(13行目)
package com.example.sample | |
import androidx.appcompat.app.AppCompatActivity | |
import android.os.Bundle | |
import android.view.View | |
import com.google.android.material.snackbar.Snackbar | |
class MainActivity : AppCompatActivity() { | |
override fun onCreate(savedInstanceState: Bundle?) { | |
super.onCreate(savedInstanceState) | |
setContentView(R.layout.activity_main) | |
Snackbar.make(findViewById(R.id.layout), "こんにちは!", Snackbar.LENGTH_SHORT).show() | |
} | |
fun showSnackbar(view: View) { | |
Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT) | |
.setAction("ボタン") { | |
// ボタンを押した時の処理 | |
} | |
.show() | |
} | |
} |
動作確認
onCreate メソッドに書いたので、アプリが起動するとすぐに Snackbar が表示されます。

Snackbar のカスタマイズ方法
Snackbar の背景色・文字色を変更する方法は以下の記事をお読みください。


このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
COMMENT
投稿いただいたコメントは管理者の承認後に表示されます。
コードやエラーに関するご質問の場合は、以下の3点
をできるだけ具体的に必ず書いてください。