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.
Steps to Implement the Custom SnackBars in Android
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 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> |
Output UI: Run on Emulator
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 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="Lazyroar" 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(); } }); }} |
Kotlin
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() } }) }}//This code is written by Ujjwal kumar Bhardwaj |