info@androidpaper.co.in

Custom Snackbars in Android in Kotlin

Snackbars play a crucial role in enhancing user experience by displaying immediate feedback on user interactions.
In this article, we will discuss implementing custom Snackbars using Java to differentiate them from regular ones. Custom Snackbars can be designed with unique layouts and styles to match the app's branding or aesthetic.

To create custom Snackbars in Java, follow these steps:
To create an empty activity Android Studio project with Java as the programming language, follow these steps:
Open Android Studio: Launch Android Studio on your computer.
Create a New Project: Click on "Start a new Android Studio project" or go to "File" > "New" > "New Project."

Choose Project Template: Select "Empty Activity" from the list of project templates. Make sure to choose Java as the programming language.

Configure Project: Set the name and location for your project. Choose the package name for your app (usually in reverse domain name format, like com.example.myapp).

Select Form Factors: Choose the form factors your app will support (Phone and Tablet). You can also select the minimum SDK version based on your target audience.

Add Activity: Click "Finish" to create the project. Android Studio will generate the initial project structure with an empty activity.
Step 2: Working with the activity_main.xml file

<?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 custom_snackbar_layout.xml file
Give the layout file a name, for example, "custom_snackbar_layout.xml," and click "OK."
Android Studio will open the XML editor for the new layout file. Design your custom Snackbar layout according to your requirements. For example:

<?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/learnvibes" />
 
            <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="Learnvibes"
                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="Snackbar 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>

Step 4: Working with the MainActivity.java file

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;
 
class MainActivity : AppCompatActivity() {
    var bShowSnackbar: Button? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register the button with appropriate ID
        bShowSnackbar = findViewById(R.id.showSnackbarButton)
        bShowSnackbar.setOnClickListener(object : OnClickListener() {
            fun onClick(v: View?) {
 
                // create an instance of the snackbar
                val snackbar = Snackbar.make(v, "", Snackbar.LENGTH_LONG)
 
                // inflate the custom_snackbar_view created previously
                val customSnackView: View =
                    layoutInflater.inflate(R.layout.custom_snackbar_view, null)
 
                // set the background of the default snackbar as transparent
                snackbar.view.setBackgroundColor(Color.TRANSPARENT)
 
                // now change the layout of the snackbar
                val snackbarLayout = snackbar.view as SnackbarLayout
 
                // set padding of the all corners as 0
                snackbarLayout.setPadding(0, 0, 0, 0)
 
                // register the button from the custom_snackbar_view layout file
                val bGotoWebsite: Button = customSnackView.findViewById(R.id.gotoWebsiteButton)
 
                // now handle the same button with onClickListener
                bGotoWebsite.setOnClickListener(object : OnClickListener() {
                    fun onClick(v: View?) {
                        Toast.makeText(
                            applicationContext,
                            "Redirecting to Website",
                            Toast.LENGTH_SHORT
                        ).show()
                        snackbar.dismiss()
                    }
                })
 
                // add the custom snack bar layout to snackbar layout
                snackbarLayout.addView(customSnackView, 0)
                snackbar.show()
            }
        })
    }
}