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

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

あわせて読みたい

【Android Studio】Snackbar の文字色・背景色を変更する方法（Java&Kotlin対応）

開発環境

プロジェクトについて

Sample という名前でプロジェクトを作成しています。

また、以下のファイルに実装していきます。

テーマの確認

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>

view raw activity_main.xml hosted with by GitHub

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();
	}
	}

view raw MainActivity.java hosted with by GitHub

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()
	}
	}

view raw MainActivity.kt hosted with by GitHub

make メソッド

Snackbar.make(view, "ここにメッセージを表示します", Snackbar.LENGTH_SHORT)

１つ目の引数は、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>

view raw activity_main.xml hosted with by GitHub

アプリを実行すると Snackbar をスワイプして消すことができるようになっています。

view オブジェクトついて

ここまでのサンプルでは、ボタンを押した時に Snackbar を表示しているので、onClick メソッドの view オブジェクトを使っています。

例えば

のようなタイミングで 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>

view raw activity_main.xml hosted with by GitHub

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();
	}
	}

view raw MainActivity.java hosted with by GitHub

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()
	}
	}

view raw MainActivity.kt hosted with by GitHub

動作確認

onCreate メソッドに書いたので、アプリが起動するとすぐに Snackbar が表示されます。

Snackbar のカスタマイズ方法

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

あわせて読みたい

【Android Studio】Snackbar の文字色・背景色を変更する方法（Java&Kotlin対応）

Read more

Remaining: 0charactors

サポート記事

¥100

Buy content

Continue from here

この記事が気に入ったら、サポートしてみませんか？

Code for Fun を応援する

2 buyer like this

Login to restore purchases

HELP created by Code for Fun powered by codoc

Sara

運営者

XYouTubeContact

書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！