How to Customize the Default Toast Message in Android

Android provides a very convinient way of showing messages to the user in form of Toasts. Toasts do not require any user interaction, these are just a way of informing some useful or not message to the user. Toasts disappear automatically after a short time. However if you do not like the default Toast message, Android provides you the ability to customize the Toast according to your needs. You can customize the position as well as the appearance of the Toast. However the duration of Toast can accept only two parameters: Toast.LENGTH_SHORT and Toast.LENGTH_LONG. The Toast.LENGTH_SHORT shows the Toast for 2 seconds while the Toast.LENGTH_LONG shows the Toast for 3.5 seconds. You cannot change the duration of the Toast.

Custom Toast Message in Android

In this tutorial we will see how to customize the appearance of the default Toast. First of all we need to create a layout that will be shown in place of default Toast. You can include almost anything in this layout file. We will include an ImageView and a TextView in our layout.

The Toast Layout file:

Create the tasty_toast.xml in res/layout directory. We have shown an image named ic_alert_64x64 in the ImageView. You can save any image in the drawable folders to be shown here.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tastyLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="5dp"
    android:background="#80000000">
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_alert_64x64" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:textSize="17sp"
        android:paddingLeft="2dp"
        android:text="TextView" />
</LinearLayout>

The Java Code:

We have created a function named showTastyToast in our main class file. This function is called on the onClick event of the required button to show the custom Toast. Note that the line newToast.setGravity(Gravity.CENTER, 0, 0); makes the Toast center aligned on the screen. After that we inflate the new layout and then set it as the view of the Toast object. All the code is self explanatory.

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class TestActivity extends Activity {
     
     /** Called when the activity is first created. */
       @Override
       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
       }

       public void showTastyToast(View v) {
           //Show the default toast
           Toast.makeText(getApplicationContext(), "This is default toast!", Toast.LENGTH_SHORT).show();

           //Create the instance of a new toast
           Toast newToast = Toast.makeText(getApplicationContext(), R.string.app_name, Toast.LENGTH_LONG);

           //Center align the toast
           newToast.setGravity(Gravity.CENTER, 0, 0);

           //Generate the layout from the tasty_toast.xml
           LayoutInflater inflater = getLayoutInflater();
           View tastyToast = inflater.inflate(R.layout.tasty_toast, (ViewGroup) findViewById(R.id.tastyLayout));
           //Get the textview in our toast layout
           TextView toastText = (TextView) tastyToast.findViewById(R.id.textView1);
           //Set the message in the textview
           toastText.setText("This is tasty toast!");
           //Set the custom view in the toast
           newToast.setView(tastyToast);
           //Show the toast
           newToast.show();    
    }
}

Calling the Custom Toast From Layout

We have used the android:onClick property of the button to invoke the showTastyToast function.

<Button 
    android:id="@+id/go"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/gobtn_label"
    android:onClick="showTastyToast"
    />