Search This Blog

Tuesday 8 May 2012

Custom Toast


 Custom Toast

Toast is a notification message that appears on the surface of a window. It cannot accept any user inputs.
But you can customize the appearance of the same. For example, you can include images to the toast layout. Therefore, if a simple text message isn't enough, you can create a customized layout for your toast notification.

Creating a Custom Toast View

Steps:

Ø    Create a new Android project
Ø    In the main.xml file, insert a button. The custom toast is going to be displayed on the click event of this button.

This would be the main.xml file:
**************************************************
<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:onClick="click"/>

</LinearLayout>
**********************************************************************


Ø    Now create another Android xml file, toast.xml. This would be the layout for the toast message you are going to create. Insert an ImageView and a TextView inside the layout of this xml.

This would be the toast.xml file:
**************************************************
<?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:padding="10dp"
              android:background="#00FFEE"
              >
    <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="#FF0000"
              />
</LinearLayout>
********************************************************


Ø     Now, open your main Activity class and inflate the toast layout. Id of the linear layout you have created in the toast.xml is used to inflate the layout from the xml as the toast background.
As the first step, write a button click method and then code the inflate steps.

Ø     Use getLayoutInflater() or getSystemService(String) to retrieve a standard LayoutInflater instance.
That is,
LayoutInflater inflater = getLayoutInflater();

Ø    Now, inflate a new view hierarchy from the specified xml resource.
Here, you are going to inflate the layout from toast.xml using the inflate(int,ViewGroup) method.
The first parameter is the layout resource ID and the second is the root View.
View layout = inflater.inflate(R.layout.toast,
                                    (ViewGroup)findViewById(R.id.toast_layout_root));

Ø    Define contents for TextView and ImageView elements included in toast.xml file.
ImageView image = (ImageView) layout.findViewById(R.id.image);
image.setImageResource(R.drawable.android);
TextView text = (TextView) layout.findViewById(R.id.text);
text.setText("Hello! This is a custom toast!");

Ø    As the final step, create a Toast and set properties such as gravity, duration etc. Also move the toast to the inflated layout using toast.setView(layout);

The complete source code of the program looks like this:

package com.ipsr.customtoast;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class CustomActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    public void click(View v)
    {
          LayoutInflater inflater = getLayoutInflater();
          View layout = inflater.inflate(R.layout.toast,
                                         (ViewGroup) findViewById(R.id.toast_layout_root));

          ImageView image = (ImageView) layout.findViewById(R.id.image);
          image.setImageResource(R.drawable.doll);
          TextView text = (TextView) layout.findViewById(R.id.text);
          text.setText("Hello! This is a custom toast!");

          Toast toast = new Toast(getApplicationContext());
          toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
          toast.setDuration(Toast.LENGTH_LONG);
          toast.setView(layout);
          toast.show();
    }
}


see out put








No comments:

Post a Comment