Custom Toast in Android App using Android Studio

Toast is a result of what we had done in a android app. Toasts are of two types, one is a basic normal toast and other is custom toast. In previous post, we already had learned about using normal toasts and this time we're going a bit more deeply into it.

Toasts can be prepared using the activity class that we are using. Here's a sample how toast codes looks like in the activity:

 Toast toast = Toast.makeText(getApplicationContext(),  
     "This is a message displayed in a Toast",  
     Toast.LENGTH_SHORT);  
     
 toast.show();

The Toast.makeText() method is a factory method which creates a Toast object. The getApplicationContext() method is a method that exists inside activities,it shows toasts that has normal appearance as a application have. The Toast class contains two predefined constants you can use:Toast.LENGTH_SHORT and Toast.LENGTH_LONG. You will have to experiment with these two values to see which fits your situation better.

Toast Positioning

You can change the positioning on the screen of a Toast message using the setGravity() method. Here is a Toast setGravity() example:

toast.setGravity(Gravity.CENTER, 0, 0);

The first parameter of the setGravity() method specifies the overall position of the Toast. You can use the following constants in the Gravity class to specify the overall position:

• TOP
• BOTTOM
• LEFT
• RIGHT
• CENTER
• CENTER_HORIZONTAL
• CENTER_VERTICAL

Each of these constants defines the position in either the X or Y direction, except for the CENTER constant which implies centered both horizontally and vertically. You can combine these constants using the | (or) operator, like this:

toast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTALLY, 0, 0);

The two other parameters of the setGravity() method are an X and Y offset to the position defined by theGravity constant. If, for instance, you need the Toast to be displayed at the top, centered horizontally, but 20 pixels down from the top position, you would use this setGravity() call:

toast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTALLY, 0, 20);

Toast Custom Views

It is possible to define a custom View for your Toast. To do so, first you must create a layout XML file for the custom View. Here is an example Toast layout XML file:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:id="@+id/toast_root_view"
                  android:orientation="vertical" android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:background="@android:color/background_dark"
                  android:padding="16dp"
            >

        <TextView
                android:id="@+id/toast_header"
                android:textSize="20dp"
                android:textColor="@android:color/primary_text_dark"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        <TextView
                android:id="@+id/toast_body"
                android:textColor="@android:color/primary_text_dark"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

    </LinearLayout>

Put this layout XML file into your Android project's /app/src/main/res/layout directory and name the filemy_toast.xml .

To use this layout XML file with a Toast you write this code:

LayoutInflater inflater = getLayoutInflater();

View toastLayout = inflater.inflate(R.layout.my_toast,
        (ViewGroup) findViewById(R.id.toast_root_view));

TextView header = (TextView) toastLayout.findViewById(R.id.toast_header);
header.setText("Message for you:");

TextView body = (TextView) toastLayout.findViewById(R.id.toast_body);
body.setText("You have got mail!");

Toast toast = new Toast(getApplicationContext());
toast.setGravity(Gravity.CENTER, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(toastLayout);
toast.show();

First you obtain the LayoutInflater. You use that to inflate (create) the View defined by your the layout XML file named  my_toast.xml  (referred to by R.layout.my_toast).

Notice the findViewById(R.id.toast_root_view) call as the second parameter to the inflate() method call. This finds the root ViewGroup in the my_toast.xml layout XML file (the root ViewGroup has the idtoast_view_group). This call is necessary for the inflated View to know what the root ViewGroup inside the inflated View is.

Once the View is created, you obtain the two TextView components from the View and set their texts.

Finally, you create a Toast object, set its gravity (position / alignment), its duration, its View and then show it.

Here're some sample of custom toast done by adjust widgets and other in my_toast layout file:

Hope you understand it, Thanks for your time!