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

Sara

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

あわせて読みたい
【Android Studio】Snackbar の文字色・背景色を変更する方法(Java&Kotlin対応)
【Android Studio】Snackbar の文字色・背景色を変更する方法(Java&Kotlin対応)

開発環境

Android Studio4.1.1, Arctic Fox 2020.3.1
Android EmulatorNexus 4 (API 30)
minSdk16
targetSdk30, 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_INDEFINITESnackbar が閉じられるか、次の 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 の背景色・文字色を変更する方法は以下の記事をお読みください。

あわせて読みたい
【Android Studio】Snackbar の文字色・背景色を変更する方法(Java&Kotlin対応)
【Android Studio】Snackbar の文字色・背景色を変更する方法(Java&Kotlin対応)
Remaining:
この記事が気に入ったら、サポートしてみませんか?

COMMENT

Subscribe
必ずお読みください!

投稿いただいたコメントは管理者の承認後に表示されます。

コードやエラーに関するご質問の場合は、以下の3点

  1. 開発環境(OS / ブラウザ / MAMP 6.6 / Android Studio Chipmunk など)
  2. エラーメッセージ
  3. お試しになったこと

できるだけ具体的に必ず書いてください。

Notify of


0 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

POINT 01

動くコード

プログラミングの文法を学んでも、そこからどのようにアプリ開発ができるのかイメージが湧きにくいものです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなどアプリとして機能するものを作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

受講期限もないので、いつでも前のレッスンに戻ることができるので安心です。

お申し込みしたその日からすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました