Posts tagged Toast

You may recognise Toast notifications from Android applications you have used, they look like this:

Android Toast Notification

These are very easy to implement, like so:

Toast.makeText(this, "This is toast.", Toast.LENGTH_LONG).show();

This will display the toast notification immediately. You will also need to import android.widget.Toast in your activity, pushing ctrl+shift+o in Eclipse will take care of this for you.

But what about notifications with the same behaviour, but a customised layout? Perhaps with images? To demonstrate I’ve set up an activity with a button and an onClick handler. Here are the layout xml and Activity class.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="10px"
    >
	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Push For Toast"
		android:onClick="buttonClicked">
	</Button>
</LinearLayout>

CustomToastDemo.java

package samcoles.customtoastdemo;
package samcoles.customtoastdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

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

    public void buttonClicked(View view) {

    }
}

First things first with your custom toast, you will need to create an xml layout for it. Add this to your /res/layout/ folder. You are practically unlimited in what you can do with this. I’ve put the application’s icon to the left with some text to the right. I’ve also made the background partly transparent so you can see what’s behind.

custom_toast.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/toast_layout_root"
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:paddingLeft="10dp"
     android:paddingRight="10dp"
     android:layout_marginLeft="10dp"
     android:layout_marginRight="10dp">
     <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	android:background="#DAAA"
    	android:paddingTop="5dp"
    	android:paddingBottom="5dp">
		    <ImageView
		    	android:id="@+id/toastImage"
		    	android:layout_width="wrap_content"
		        android:layout_height="fill_parent"
		        android:src="@drawable/icon"
		        android:layout_marginRight="10dp"
		        />
		    <TextView
		    	 android:id="@+id/toastText"
		         android:layout_width="wrap_content"
		         android:layout_height="fill_parent"
		         android:textSize="7pt"
		         android:textStyle="bold"
		         android:textColor="#000"
		         android:layout_gravity="center_vertical"
		         android:gravity="center"
		         android:layout_marginRight="10dp"
		         />
    </LinearLayout>
</LinearLayout>

To create and show the custom toast, I’ve modified the onClick handler for the button in the CustomToastDemo activity.

    public void buttonClicked(View view) {
        //get the LayoutInflater and inflate the custom_toast layout
        LayoutInflater inflater = getLayoutInflater();
        View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.toast_layout_root));

        //get the TextView from the custom_toast layout
        TextView text = (TextView) layout.findViewById(R.id.toastText);
        text.setText("This is my custom toast");

        //create the toast object, set display duration,
        //set the view as layout that's inflated above and then call show()
        Toast t = new Toast(getApplicationContext());
        t.setDuration(Toast.LENGTH_LONG);
        t.setView(layout);
        t.show();
    }

To explain the above, first we instantiate the layout using the application context’s LayoutInflater. We then set the Text to “This is my custom toast”. You could also set the image to something more specific here if wanted. Next up we create the Toast object using the custom layout and finally call show() to display it.

and here’s how that looks:

Custom Toast Notification