September 28, 2010 by

In Android, a Toast is a great way to show popup notification to users. It can be used by a background service, which otherwise has no visible user interface. By default, a toast simply shows a text message. In this tutorial, we will show you how to use a layout resource to display custom content. We will also show you how to provide a custom border to the view.

The tutorial assumes that you have a functional Eclipse based Android development system.

When done, the toast will look like this.

image

Create the Resources

We need three resource files.

  1. An image resource file. This image is shown in the left hand side of the toast.
  2. A shape resource file that will draw the rounded rectangle border around the toast.
  3. A layout resource file that defines the views for the toast.

First, create a small image file. Save it in the project as res/drawable/annie.png.

Next, in the res/drawable folder, create a new XML file called my_border.xml. Set the contents of the file as follows.


<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns_android="http://schemas.android.com/apk/res/android"> 
    <stroke android_width="4dp" android_color="#FFFFFFFF" /> 
    <padding android_left="7dp" android_top="7dp" 
            android_right="7dp" android_bottom="7dp" /> 
    <corners android_radius="4dp" /> 
</shape>

Next, in the res/layout folder, create a new layout file called my_toast.xml. Set its content as follows.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
	android_layout_width="wrap_content" 
	android_layout_height="wrap_content"
	android_background="@drawable/my_border">
<ImageView android_layout_width="wrap_content"
	android_layout_height="wrap_content" 
	android_src="@drawable/annie" />
<TextView android_layout_width="wrap_content"
	android_layout_height="wrap_content" 
	android_text="The image has been uploaded"
	android_layout_gravity="center_vertical" />
</LinearLayout>

Note, how the border shape is set for the root ViewGroup, the LinearLayout, using the background attribute.

Here is a screenshot of all three files.

image

Create and Show the Toast

The trick is to load the layout from the XML file and set the root view of the toast.

From an event handler of your activity, do the following.


Context context = getApplicationContext();
LayoutInflater inflater = getLayoutInflater();

View toastRoot = inflater.inflate(R.layout.my_toast, null);

Toast toast = new Toast(context);

toast.setView(toastRoot);
toast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL,
		0, 0);
toast.show();

We are using a LayoutInflater to load the root view from the resource file. Then we are calling setView of the toast to set the root view.

8 Comments

Shaista Naaz

If I do not want to hard code the text in the xml then how do I do it. Say the same toast I want to use multiple times then how will i do it as I would like to change the text each time.

Reply
Shaista Naaz

Got the solution , I just have to do like this
TextView text = (TextView)toastRoot.findViewById(R.id.taost_text);
text.setText(“Test”);

Anyways thanks for your tutorial 🙂

Reply
Bibhas Bhattacharya

Shaista Naaz :

Got the solution…

That’s right Shaista. Just assign an ID to the TextView in the layout XML file. Then call findViewById for the root view of the layout.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *