In this post we will see how to create a custom snackbar in android with Images and text message. In the previous post we saw to how create simple snackbar in android. In this post we will create a custom template layout for our snackbar and show it on corresponding button click methods. Let’s begin.
DOWNLOAD SOURCE CODE
Android – Create Custom SnackBar
Create two new layout files in your project with below names and edit as following:
res > layout > main.xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/lvparent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center_horizontal"
android:text="Custom SnackBar in Android"
android:textSize="25sp"
android:textStyle="bold" />
<EditText
android:id="@+id/edtMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="sans-serif-condensed-medium"
android:padding="5dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="@+id/btnShowMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@color/colorAccent"
android:fontFamily="sans-serif-condensed-medium"
android:text="Show Message"
android:textColor="#fff" />
<Button
android:id="@+id/btnShowHighScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@color/colorPrimaryDark"
android:fontFamily="sans-serif-condensed-medium"
android:text="High Score"
android:textColor="#fff" />
</LinearLayout>
<TextView
android:id="@+id/txtSnackAction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="Snackbar Action will come here" />
</LinearLayout>
res > layout > snacktemplate.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:padding="2dp">
<ImageView
android:id="@+id/img1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:src="@drawable/trophyyellow" />
<TextView
android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_toRightOf="@+id/img1"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center_vertical"
android:text="Hello"
android:textColor="#fff" />
<Button
android:id="@+id/btnOkay"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="@android:color/transparent"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center_vertical|center_horizontal"
android:text="OKAY"
android:textColor="@color/colorAccent" />
</RelativeLayout>
The snacktemplate will be our design for custom Snackbar. It contains an Imageview, a TextView and a transparent button view to respond to clicks on snackbar design. We will change the text of the textview on button click events as per the buttons.
The main.xml file is our main layout file. It has a EditText to take input message which we will display on snackbar view and two buttons, one for showing message and other for showing a sample high score message. These two action will show different images. You can download images from iconfinder website.
Trophy Icon
Right Check Blue Icon
Now create a new class file with name CustomSnackBar.java and edit it as below
CustomSnackBar.java:
package com.app.mysnackbar;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.Calendar;
public class CustomSnackBar extends AppCompatActivity {
LinearLayout lvparent;
EditText edtMessage;
Button btnShowMessage, btnShowHighScore;
TextView txtSnackAction;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
lvparent = findViewById(R.id.lvparent);
btnShowMessage = findViewById(R.id.btnShowMessage);
btnShowHighScore = findViewById(R.id.btnShowHighScore);
edtMessage = findViewById(R.id.edtMessage);
txtSnackAction = findViewById(R.id.txtSnackAction);
btnShowMessage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ShowSnackBar(edtMessage.getText().toString(), R.drawable.rightblue);
}
});
btnShowHighScore.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ShowSnackBar("New High score 5000!", R.drawable.trophyyellow);
}
});
}
public void ShowSnackBar(String message, int id) {
try {
Snackbar snackbar = Snackbar.make(lvparent, "", Snackbar.LENGTH_LONG);
Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) snackbar.getView();
TextView textView = (TextView) layout.findViewById(android.support.design.R.id.snackbar_text);
textView.setVisibility(View.INVISIBLE);
View snackView = LayoutInflater.from(this).inflate(R.layout.snacktemplate, null);
ImageView imageView = snackView.findViewById(R.id.img1);
imageView.setImageResource(id);
TextView textViewTop = snackView.findViewById(R.id.txtMessage);
textViewTop.setText(message);
Button btnOkay = snackView.findViewById(R.id.btnOkay);
btnOkay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtSnackAction.setText("You pressed Okay on SnackBar!\r" + Calendar.getInstance().getTime().toString());
}
});
layout.setPadding(1, 2, 1, 2);
layout.addView(snackView, 0);
snackbar.show();
} catch (Exception ex) {
}
}
}
Here we are changing the icons shown on custom snackbar view by passing the parameter to ShowSnackBar method. This method will show custom layout instead of default Snackbar. And also we are passing image drawable icons to this method to show our messages.
Result:
Android Custom SnackBar
References:
StackOverflow Answer Link on same topic.