Custom Toast with Border

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.

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.

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.