Custom Toast

Custom Toast

If a simple text message isn't enough, you can create a customized layout for your toast notification. To create a custom layout, define a View layout, in XML or in your application code, and pass the root View object to the setView(View) method.

Custom_ToastActivity

package com.ann;

import android.app.Activity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

public class Custom_ToastActivity extends Activity {

private Button button;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

button = (Button) findViewById(R.id.button1);

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// get your custom_toast.xml

LayoutInflater inflater = getLayoutInflater();

View layout = inflater.inflate(R.layout.toast,

(LinearLayout) findViewById(R.id.custom_toast_layout_id));

// set a dummy image

ImageView image = (ImageView) layout.findViewById(R.id.imageView1);

image.setImageResource(R.drawable.ic_launcher);

// set a message

TextView text = (TextView) layout.findViewById(R.id.textView1);

text.setText("Button Clicked");

// Toast...

Toast toast = new Toast(getApplicationContext());

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

toast.setDuration(Toast.LENGTH_LONG);

toast.setView(layout);

toast.show();

}

});

}

}

toast.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/custom_toast_layout_id"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#F4FA58"

android:orientation="horizontal"

android:padding="5dp" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#FF00FF"

/>

</LinearLayout>

main.xml

<?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" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello" />

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="show toast" />

</LinearLayout>

Custom Dialog

Creating a Custom Dialog

If you want a customized design for a dialog, you can create your own
layout for the dialog window with layout and widget elements. After you've defined your layout, pass the root View object or layout resource ID to setContentView(View).
For example, to create the dialog shown to the right:

1. Create an XML layout saved as custom_dialog.xml:
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:id="@+id/layout_root"
                 android:orientation="horizontal"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent"
                 android:padding="10dp"
                 >
       <ImageView android:id="@+id/image"
                  android:layout_width="wrap_content"
                  android:layout_height="fill_parent"
                  android:layout_marginRight="10dp"
                  />
       <TextView android:id="@+id/text"
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent"
                 android:textColor="#FFF"
                 />
   </LinearLayout>

   This XML defines an ImageView and a TextView inside a LinearLayout.
   
2. Set the above layout as the dialog's content view and define the content for the ImageView and TextView elements:
   

   Context mContext = getApplicationContext();
   Dialog dialog = new Dialog(mContext);
   dialog.setContentView(R.layout.custom_dialog);
   dialog.setTitle("Custom Dialog");
   TextView text = (TextView) dialog.findViewById(R.id.text);
   text.setText("Hello, this is a custom dialog!");
   ImageView image = (ImageView) dialog.findViewById(R.id.image);
   image.setImageResource(R.drawable.android);

   After you instantiate the Dialog, set your custom layout as the dialog's content view with setContentView(int), passing it the layout resource ID. Now that the Dialog has a defined layout, you can capture View objects from the layout with findViewById(int) and modify their content.
   
3. That's it. You can now show the dialog as described in Showing A Dialog.
   

A dialog made with the base Dialog class must have a title. If you don't call setTitle(), then the space used for the title remains empty, but still visible. If you don't want a title at all, then you should create your custom dialog using the AlertDialog class. However, because an AlertDialog is created easiest with the AlertDialog.Builder class, you do not have access to the setContentView(int) method used above. Instead, you must use setView(View). This method accepts a View object, so you need to inflate the layout's root View object from XML.
To inflate the XML layout, retrieve the LayoutInflater with getLayoutInflater() (or getSystemService()), and then call inflate(int, ViewGroup), where the first parameter is the layout resource ID and the second is the ID of the root View. At this point, you can use the inflated layout to find View objects in the layout and define the content for the ImageView and TextView elements. Then instantiate the AlertDialog.Builder and set the inflated layout for the dialog with setView(View).
Here's an example, creating a custom layout in an AlertDialog:

AlertDialog.Builder builder;
AlertDialog alertDialog;
Context mContext = getApplicationContext();
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.custom_dialog,
                               (ViewGroup) findViewById(R.id.layout_root));
TextView text = (TextView) layout.findViewById(R.id.text);
text.setText("Hello, this is a custom dialog!");
ImageView image = (ImageView) layout.findViewById(R.id.image);
image.setImageResource(R.drawable.android);
builder = new AlertDialog.Builder(mContext);
builder.setView(layout);
alertDialog = builder.create();

Using an AlertDialog for your custom layout lets you take advantage of built-in AlertDialog features like managed buttons, selectable lists, a title, an icon and so on.
For more information, refer to the reference documentation for the Dialog and AlertDialog.Builder classes.