How to add a custom styled Toast in Android

A Toast is a feedback message. It takes very little space for displaying and it is displayed on top of the main content of an activity, and only remains visible for a short time period. This article explains how to create Custom Toast messages, which has custom background, image, icon, etc, which are not provided by the original Toast library.

In this article, the Toasty library of JitPack gradle is used to create a custom toast for the user, as it is a very common library and is used by many apps already.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency and JitPack Repository

Add the support Library in your root build.gradle file (not in module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bitbucket can be directly used in the application. 

allprojects {

   repositories {

       maven {

           url “https://jitpack.io”  

        }

    }

}

Add the support library in your module’s build.gradle file and add dependency in the dependencies section. This dependency is added so that directly different styles of toast can be used in the application. 

dependencies {

        implementation ‘com.github.GrenderG:Toasty:1.4.2’

}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?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">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:orientation="vertical">

        <Button
            android:layout_margin="10dp"
            android:id="@+id/button_warning"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="showToast"
            android:text="show warning toast" />

        <Button
            android:layout_margin="10dp"
            android:id="@+id/button_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="showToast"
            android:text="show info toast" />

        <Button
            android:layout_margin="10dp"
            android:id="@+id/button_success"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="showToast"
            android:text="show success toast" />

        <Button
            android:layout_margin="10dp"
            android:id="@+id/button_error"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="showToast"
            android:text="show error toast" />

        <Button
            android:layout_margin="10dp"
            android:id="@+id/button_normal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="showToast"
            android:text="show normal toast with an icon" />

    </LinearLayout>

</RelativeLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import es.dmoral.toasty.Toasty;

public class MainActivity
    extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    // We assign this method
    // on OnClick() method
    // in activity_main.xml file.
    public void showToast(View v)
    {
        switch (v.getId()) {

        // For Error type Toast
        case R.id.button_error:
            Toasty.error(this, "This is an error Toast", Toast.LENGTH_SHORT).show();
            break;

        // For Success type Toast
        case R.id.button_success:
            Toasty.success(this, "This is a success Toast", Toast.LENGTH_SHORT).show();
            break;

        // For Info type Toast
        case R.id.button_info:
            Toasty.info(this, "This is an info Toast", Toast.LENGTH_SHORT).show();
            break;

        // For Warning type Toast
        case R.id.button_warning:
            Toasty.warning(this, "This is a warning Toast", Toast.LENGTH_SHORT).show();
            break;

        // For Normal type Toast
        // with an icon
        case R.id.button_normal:
            Toasty.normal(this, "This is a normal Toast", Toast.LENGTH_SHORT, ContextCompat.getDrawable(this, R.drawable.ic_android_black_24dp)).show();
            break;
        }
    }
}

Output:

Note: Custom toast views are no longer recommended. When in the foreground, apps can use the makeText() function to produce a normal text toast, or they can create a Snackbar. Custom toast views will not be displayed when the owning application, targeting API level Build.VERSION_CODES#R or above is in the background. For now, Toasts built using makeText() or its variations will likewise return null here in apps targeting API level Build.VERSION CODES.R or above, unless they called setView with a non-null view.