Android – Create Custom SnackBar with Images

  • by
Android_Custom_SnackBar

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

Android Custom SnackBar

DOWNLOAD SOURCE CODE

References:

StackOverflow Answer Link on same topic.