Sunday 1 April 2012

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.

To create the custom Toast we want to create two xml files.One  for the Toast view and another for to attach the toast view,ie main.xml

For example, you can create the layout for the toast visible in the screenshot to the right with the following XML (saved as 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>




 the main.xml will be look like the following


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



Notice that the ID of the LinearLayout element is "custom_toast_layout_id". You must use this ID to inflate the layout from the XML, as shown here:


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();
            }
        });
    }
}

See demo, when a button is clicked, display the custom Toast message.




No comments:

Post a Comment