Custom Snackbars in Android

23 Feb, 2021
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. So in this article, it’s been discussed how the SnackBars can be implemented using custom layouts. Have a look at the following image to get an idea of how can the custom-made SnackBars can be differentiated from the regular(normal) SnackBars. Note that we are going to implement this project using the Java language. 
Step 1: Create an empty activity project
Create an empty activity Android Studio project. And select the JAVA as a programming language.
Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android studio project.
Step 2: Working with the activity_main.xml file
The main layout here includes only one button which when clicked the custom SnackBar is to be shown.
Invoke the following code, in the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <Button        android:id="@+id/showSnackbarButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:backgroundTint="@color/colorPrimary"        android:text="SHOW SNACKBAR"        android:textColor="@android:color/white" />  </RelativeLayout>
Step 3: Creating a custom layout for Snackbar
Under layout folder create a layout for SnackBar which needs to be inflated when building the SnackBar under the MainActivity.java file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     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:ignore="HardcodedText">      <androidx.cardview.widget.CardView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="8dp"        android:elevation="4dp"        app:cardBackgroundColor="@color/colorPrimaryDark"        app:cardCornerRadius="4dp"        app:cardPreventCornerOverlap="true"        app:cardUseCompatPadding="true">          <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:padding="8dp">              <ImageView                android:id="@+id/imageView"                android:layout_width="45dp"                android:layout_height="45dp"                android:layout_alignParentStart="true"                android:src="@drawable/image_logo" />              <TextView                android:id="@+id/textView1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginStart="4dp"                android:layout_toEndOf="@id/imageView"                android:text="GeeksforGeeks"                android:textAlignment="center"                android:textColor="@android:color/white"                android:textSize="18sp"                android:textStyle="bold" />              <TextView                android:id="@+id/textView2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_below="@id/textView1"                android:layout_marginStart="4dp"                android:layout_toEndOf="@id/imageView"                android:text="Computer Science Portal"                android:textColor="@android:color/white"                android:textSize="14sp" />              <!--this view separates between button and the message-->            <View                android:layout_width="2dp"                android:layout_height="45dp"                android:layout_toStartOf="@id/gotoWebsiteButton"                android:background="@android:color/white" />              <Button                android:id="@+id/gotoWebsiteButton"                style="@style/Widget.MaterialComponents.Button.TextButton"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentEnd="true"                android:text="GOTO WEBSITE"                android:textColor="@android:color/white"                android:textSize="14sp" />          </RelativeLayout>      </androidx.cardview.widget.CardView></RelativeLayout>
Which produces the following view:
Step 4: Working with the MainActivity.java file
Java
import androidx.appcompat.app.AppCompatActivity;import android.graphics.Color;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Toast;import com.google.android.material.snackbar.Snackbar;  public class MainActivity extends AppCompatActivity {      Button bShowSnackbar;      @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // register the button with appropriate ID        bShowSnackbar = findViewById(R.id.showSnackbarButton);          bShowSnackbar.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                  // create an instance of the snackbar                final Snackbar snackbar = Snackbar.make(v, "", Snackbar.LENGTH_LONG);                  // inflate the custom_snackbar_view created previously                View customSnackView = getLayoutInflater().inflate(R.layout.custom_snackbar_view, null);                  // set the background of the default snackbar as transparent                snackbar.getView().setBackgroundColor(Color.TRANSPARENT);                  // now change the layout of the snackbar                Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbar.getView();                  // set padding of the all corners as 0                snackbarLayout.setPadding(0, 0, 0, 0);                  // register the button from the custom_snackbar_view layout file                Button bGotoWebsite = customSnackView.findViewById(R.id.gotoWebsiteButton);                  // now handle the same button with onClickListener                bGotoWebsite.setOnClickListener(new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        Toast.makeText(getApplicationContext(), "Redirecting to Website", Toast.LENGTH_SHORT).show();                        snackbar.dismiss();                    }                });                  // add the custom snack bar layout to snackbar layout                snackbarLayout.addView(customSnackView, 0);                                  snackbar.show();            }        });    }}
Android-Bars
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
Arrays.sort() in Java with examples
Reverse a string in Java
Object Oriented Programming (OOPs) Concept in Java
For-each loop in Java
How to iterate any Map in Java