Open In App

How to Add Action Snackbar in Android?

Snackbar provides lightweight feedback about an operation. The message appears at the bottom of the screen on mobile and lowers left on larger devices. SnackBars plays a very important role in the user experience. The snack bar which may or may not contain the action button to do shows the message which had happened due to the user interaction immediately. Snackbar is similar to Toast but there are some differences such as

An Action Snackbar can perform actions that are specified in the Snackbar within the time limit of Snackbar.



Step by Step Implementation

Step 1: Create a New Project

Create an empty activity Android Studio project. And select Kotlin as a programming language. To create a new project in Android Studio please refer to Create a new project in android studio in kotlin.



Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    tools:context=".MainActivity">
 
     <TextView
        android:id="@+id/gfg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksforGeeks"
        android:textColor="#189C1E"
        android:textSize="22sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.134" />
  
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Delete Message"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.




package com.ayush.snackbar
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.constraintlayout.widget.ConstraintLayout
import com.google.android.material.snackbar.Snackbar
 
class MainActivity : AppCompatActivity() {
    lateinit var clmain : ConstraintLayout
    lateinit var btn : Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // view bindings
        clmain = findViewById(R.id.main)
        btn = findViewById(R.id.button)
 
        // setting click listener for an
        // event of click on the view.
        btn.setOnClickListener {
            // create an instance of the snackbar
            val snackbar = Snackbar.make(clmain, "Message is Deleted", Snackbar.LENGTH_LONG)
                .setAction("UNDO") {
                    val snackbar =
                        Snackbar.make(clmain, "Message is restored", Snackbar.LENGTH_LONG)
                    snackbar.show()
                }
            // call show() method to
            // display the snackbar
            snackbar.show()
        }
    }
}

So, our app is ready. And we can see the output.

Output:


Article Tags :