Open In App

How to Add Action Snackbar in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

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

  • Snackbar can only be shown at the bottom of the screen.
  • It has more than one option.
  • It can be swiped off before the time limit.

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




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

Kotlin




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:



Last Updated : 28 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads