[Android & Kotlin] Snackbar で通知とアクションを実装しカスタマイズする

SnackbarはToastと同じように簡単なメッセージをユーザーに通知できます。更にメッセージと共にボタンタップでのアクションを提示することも可能です。
　

Android Studio
2024.1.1

Snackbar

SnackbarはToastと同じようにある短い期間だけ表示して消えます。
自動的に消えるのがいい場合と残っていて欲しい場合もあり、Snackbarでは表示期間をdismissするまで継続させたりとカスタマイズは色々とできます。

Toastは最近機能が制限されてきて、Snackbarを使うように仕向けられているようにも思います。
　

目次
1. Snackbarの表示
2. サンプルコード
3. Snackbarのカスタマイズ
4. サンプル動画

Snackbarの表示

SnackbarはToastと似たような設定ですが、引数として「View」を取ります。
因みにToastはContextでした。

なのでViewにattachして表示させる必要があります。
　

Snackbar.make(view , "Message", Snackbar.LENGTH_LONG).show()

1	Snackbar.make(view , "Message", Snackbar.LENGTH_LONG).show()

　
また、Snackbarのサポートライブラリーが必要です。
　

import com.google.android.material.snackbar.Snackbar;

1	import com.google.android.material.snackbar.Snackbar;

　
Viewをどう持ってくるかなのですが、XMLレイアウトファイルにIDを振る、あるいはandroid.R.id.content が親レイアウトViewを指しているのでこれを使うのが簡単です。

val rootLayout: View = findViewById(android.R.id.content)

1	val rootLayout: View = findViewById(android.R.id.content)

　
ViewBinding では元々root viewを使用しているのでそれを使うこともできます。

val view = binding.root

1	val view = binding.root

サンプルコード

以下簡単にSnackbarを表示させるコードです。

MainActivity.kt

//package com.example.kotlinsnackbar

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import android.view.View
import com.google.android.material.snackbar.Snackbar
import com.example.kotlinsnackbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        val rootLayout: View = binding.root

        val snackbar = Snackbar.make(rootLayout , "Snackbar message", Snackbar.LENGTH_LONG)
        snackbar.show()
    }
}

//package com.example.kotlinsnackbar

import android.os.Bundle

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

import android.view.View

import com.google.android.material.snackbar.Snackbar

import com.example.kotlinsnackbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

val rootLayout: View = binding.root

val snackbar = Snackbar.make(rootLayout , "Snackbar message", Snackbar.LENGTH_LONG)

snackbar.show()

}

　
レイアウトはそのままです。
　　
これでSnackbarが表示されました。
　

Snackbarのカスタマイズ

Snackbarにアクションを設定をしたり、文字色を変えるなどカスタマイズしてみましょう。
setAction()を使うと、バーの右横にmessageが設定されてそれをタップするとアクションが実行されます。Buttonのような感じに使えます。
　

Snackbar setAction (CharSequence text, View.OnClickListener listener)

1	Snackbar setAction (CharSequence text, View.OnClickListener listener)

　
カスタマイズとして以下のことをやってみました。

LENGTH_INDEFINITE:
- 表示をdismiss()が呼ばれるまで表示、つまり自動で消えない設定です
setAction：
- ボタンのようにタップでTextViewを変更
view.setBackgroundColor()：
- Snackbarの背景色
Snackbar：
- テキスト色、サイズ変更
Action：
- ボタンの背景色と色を変更

MainActivity.kt

//package com.example.kotlinsnackbar

import android.graphics.Color
import android.os.Bundle
import android.util.TypedValue
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import android.view.View
import android.widget.Button
import android.widget.TextView
import com.google.android.material.snackbar.Snackbar
import com.example.kotlinsnackbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        val rootLayout: View = binding.root
        val snackbar = Snackbar.make(rootLayout , R.string.message, Snackbar.LENGTH_INDEFINITE)

        val textView: TextView = findViewById(R.id.text_view)
        // Action: to change text of TextView
        snackbar.setAction(R.string.click) {
            textView.text = getString(R.string.click)
            snackbar.dismiss()
        }

        snackbar.view.setBackgroundColor(Color.rgb(125, 125, 255))

        // Text on Snackbar
        val snackTextView: TextView =
            snackbar.view.findViewById(com.google.android.material.R.id.snackbar_text)
        // TextColor
        snackTextView.setTextColor(Color.GREEN)
        // Text Size
        snackTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 28.0f)

        // Button on snackbar
        val snackActionView: Button =
            snackbar.view.findViewById(com.google.android.material.R.id.snackbar_action)
        // BackgroundColor of Button
        snackActionView.setBackgroundColor(Color.rgb(63, 94, 255))
        // TextColor of Button Title
        snackActionView.setTextColor(Color.rgb(255, 125, 255))

        snackbar.show()
    }
}

//package com.example.kotlinsnackbar

import android.graphics.Color

import android.os.Bundle

import android.util.TypedValue

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

import android.view.View

import android.widget.Button

import android.widget.TextView

import com.google.android.material.snackbar.Snackbar

import com.example.kotlinsnackbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

val rootLayout: View = binding.root

val snackbar = Snackbar.make(rootLayout , R.string.message, Snackbar.LENGTH_INDEFINITE)

val textView: TextView = findViewById(R.id.text_view)

// Action: to change text of TextView

snackbar.setAction(R.string.click) {

textView.text = getString(R.string.click)

snackbar.dismiss()

}

snackbar.view.setBackgroundColor(Color.rgb(125, 125, 255))

// Text on Snackbar

val snackTextView: TextView =

snackbar.view.findViewById(com.google.android.material.R.id.snackbar_text)

// TextColor

snackTextView.setTextColor(Color.GREEN)

// Text Size

snackTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 28.0f)

// Button on snackbar

val snackActionView: Button =

snackbar.view.findViewById(com.google.android.material.R.id.snackbar_action)

// BackgroundColor of Button

snackActionView.setBackgroundColor(Color.rgb(63, 94, 255))

// TextColor of Button Title

snackActionView.setTextColor(Color.rgb(255, 125, 255))

snackbar.show()

}

　
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">

    <TextView
        android:id="@+id/text_view"
        android:text="Hello World!"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?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">

<TextView

android:id="@+id/text_view"

android:text="Hello World!"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
strings.xml

<resources>
    <string name="button">Your App Name</string>
    <string name="click">Click</string>
    <string name="message">Message</string>
</resources>

<string name="click">Click</string>

<string name="message">Message</string>

</resources>

これで実行してみます

サンプル動画

setActionのテキストやタップはTextViewやButtonとして設定していけるので、後は色々と変更が可能となります。
　

Reference:
Snackbar | Android Developers