Custom Toast Notification in Android with an Example

In one of my previous articles I’ve discussed about Toast Notification. Now, I’ll show you how we create a Custom Toast in android with an example.

Here, I’ve created an Xml file named my_customtoast_xml in which I’ve included an AnalogClock, an ImageView and a TextView which I need in my Toast.

The Xml layout is shown below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/toastlayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#FFF"
 android:orientation="horizontal" >

 <AnalogClock
 android:id="@+id/analogClock1"
 android:layout_width="95dp"
 android:layout_height="98dp" />
 <ImageView
 android:id="@+id/img"
 android:layout_width="wrap_content"
 android:layout_height="fill_parent"
 android:layout_marginRight="15dp"/>
 <TextView
 android:id="@+id/txtvdisplay"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textColor="#00ff00"
 android:textSize="20dip"/>
</LinearLayout>

 

In my main.xml I’ve included a button and in its click event I’ve written the code for Custom Toast.

My main.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

 <Button
 android:id="@+id/btntoast"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Click to View My Custom Toast"
 />
</LinearLayout>

Now lets the coding part. First of all, we need to inflate the layout (here, toastlayout) from the XML (here,my_customtoast_xml). (Inflate means converting the Xml layout specifications into View Objects.)

This is done by using a method named inflate(int resource,ViewGroup root) where the resource is the Xml file resource and root is the ViewGroup object specified by the Xml file. But for that first we need to create an instance of the LayoutInflator class using either getSystemService() or getLayoutInflator() and usind this instance we will inflate the Xml layout as shown below.

LayoutInflater myInflator=getLayoutInflater();
 View myLayout=myInflator.inflate(R.layout.my_customtoast_xml,(ViewGroup)findViewById(R.id.toastlayout) );
 

 Now this inflated layout is used to find the View objects in the layout. Therefore, now we can find them out (here the TextView, ImageView and AnalogClock) and define their content as shown below.

ImageView myImage=(ImageView)myLayout.findViewById(R.id.img);
 myImage.setImageResource(R.drawable.kitty);
 TextView myMessage=(TextView)myLayout.findViewById(R.id.txtvdisplay);
 myMessage.setText("My Custom Toast");
 AnalogClock myClock=(AnalogClock)myLayout.findViewById(R.id.analogClock1);

Now comes the code for creating the Toast and the code is shown below:

Toast myToast=new Toast(getApplicationContext());
 myToast.setDuration(Toast.LENGTH_LONG);
 myToast.setView(myLayout);
 myToast.show();

Now let’s look at the above code , we can see that the properties of the Toast (here, Duration) are set and then using the Toast object setView(view) is called in which the inflated layout (here, myLayout) is passed and finally, to display the Toast, call the method show().

The whole code looks like this:

package com.deepthi.customtoast;
import android.app.Activity;
import android.graphics.YuvImage;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AnalogClock;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MyCustomToast extends Activity {
 /** Called when the activity is first created. */
 Button click;
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 click=(Button)findViewById(R.id.btntoast);
 click.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
 //TODO Auto-generated method stub
 LayoutInflater myInflator=getLayoutInflater();
 View myLayout=myInflator.inflate(R.layout.my_customtoast_xml,(ViewGroup)findViewById(R.id.toastlayout) );
 ImageView myImage=(ImageView)myLayout.findViewById(R.id.img);
 myImage.setImageResource(R.drawable.kitty);
 TextView myMessage=(TextView)myLayout.findViewById(R.id.txtvdisplay);
 myMessage.setText("My Custom Toast");
 AnalogClock myClock=(AnalogClock)myLayout.findViewById(R.id.analogClock1);
 Toast myToast=new Toast(getApplicationContext());
 myToast.setDuration(Toast.LENGTH_LONG);
 myToast.setView(myLayout);
 myToast.show();
 }
 });

 }
}
 

The Output is shown below:

After Clicking the button:

Now, just try creating your own Toast.