Snackbar - Android Material UI/UX

Snack bars provide brief messages about app processes at the bottom of the screen.

In this tutorial, we will learn snackbar, snackbar theming & custom snackbar using kotlin...

Usage 

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Frequency 

Only one snackbar may be displayed at a time. 

Actions 

A snackbar can contain a single action. "Dismiss" or "cancel" actions are optional.

Eg:

Custom Snackbar

..

Simple Snackbar

 // Adding an action
            Snackbar.make(binding.snackbarId, R.string.snackbar_message, Snackbar.LENGTH_LONG)
                .setAction(R.string.snackbar_action) {
                    // Responds to click on the action
                }
                //.setAnchorView(fab_demo)
                .show()

..

Snackbar theme

 Snackbar.make(binding.snackbarId, R.string.snackbar_message, Snackbar.LENGTH_LONG)
                .setAction(R.string.snackbar_action) {
                    // Responds to click on the action
                }
                .setBackgroundTint(ContextCompat.getColor(requireContext(), R.color.backgroundTint))
                .setActionTextColor(ContextCompat.getColor(requireContext(), R.color.actionTextColor))
                .show()

..

Custom snack bar (with view binding)

  val customSnackBar   = Snackbar.make(binding.snackbarId, "", Snackbar.LENGTH_INDEFINITE)
            val layout           = customSnackBar.view as Snackbar.SnackbarLayout
            val bind: CustomSnackbarBinding = CustomSnackbarBinding.inflate(layoutInflater)
            bind.btTwitter.setOnClickListener {
            }
            layout.setPadding(0, 0, 0, 0)
            layout.addView(bind.root, 0)
            customSnackBar.show()

In the layout : Custom snack bar UI

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/dialog_background"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check my social media"
        android:textColor="@color/overlay_light_90" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/bt_twitter"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:srcCompat="@drawable/ic_social_twitter" />

        <View
            android:layout_width="30dp"
            android:layout_height="0dp" />

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:srcCompat="@drawable/ic_social_facebook" />

        <View
            android:layout_width="30dp"
            android:layout_height="0dp" />

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:srcCompat="@drawable/ic_social_instagram" />

    </LinearLayout>

</LinearLayout>

..