What is Toast?
A Toast is a message that pops up on the surface of the window. It only fills the amount of space required for the message and the user’s current activity remains visible and interactive. The notification automatically fades in and out, and does not accept interaction events.
Toast is transient notifications that stay visible for less than a few seconds before fading out. Toast don’t take focus and its not a modal , so that they don’t interrupt the application.You can also use it for debugging purpose. A toast provides simple feedback about an operation in a small popup.
Toasts are excellent for informing your users of events without forcing them to open an Activity or browse a Notification. they provide a perfect mechanism for alerting users to events occurring in background Services without interrupting foreground applications. Generally, your application should show Toasts only if one of its Activities is active.
In our earlier tutorials, we usually see toast as a simple text message which pops up on the screen. But we can create custom toast with images and more style attributes like padding, gravity, etc.
In this tutorial, we are going to learn how to create a Custom Toast with Image and Text with different gravity.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Open res ⇒ values ⇒ strings.xml and add below string values. This are some strings that i am going to use in this tutorial.
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Custom Toast</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="text">Show Custom Toast</string> <string name="show_toast">Show Toast</string> <string name="custom_toast">This is Custom Toast</string> <string name="image_description">Custom Toast imageview</string> </resources> |
3. Firstly, create a main activity xml layout naming activity_main.xml that contains one textview and one button that shows toast on click.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:padding="5dp" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="15dp" android:text="@string/text" android:textColor="#0587d9" android:textSize="26sp" android:textStyle="bold" /> <Button android:id="@+id/show_toast" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="@string/show_toast" /> </LinearLayout> |
4. Now, for custom toast we have to create a new xml layout file naming custom_toast.xml. In this layout we can put any view that we want for our custom toast to show. I am using a TextView and ImageView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#AA000000" android:orientation="horizontal" android:padding="10dp" > <ImageView android:id="@+id/custom_toast_image" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginLeft="10dp" android:layout_marginStart="10dp" android:contentDescription="@string/image_description" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/custom_toast_text" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:padding="5dp" android:text="@string/custom_toast" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> |
5. Now, we create a method with int parameter for Gravity. In this method we inflate a new layout and set the view over Toast. This is very simple to use you can create any xml layout and use this method to show custom toast.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Custom toast method private void showCustomToast(int gravity_type) { LayoutInflater inflater = getLayoutInflater(); // Layout inflater for // custom inflater View view = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.container)); // inflating custom // view // By finding views id you can change their value at run time by // changing imageview image and textview text ImageView custom_toast_image = (ImageView) view .findViewById(R.id.custom_toast_image); TextView custom_toast_text = (TextView) view .findViewById(R.id.custom_toast_text); // Getting toast Toast toast = new Toast(MainActivity.this); toast.setGravity(gravity_type, 0, 0);// Setting gravity and margin toast.setDuration(Toast.LENGTH_LONG);// Duration of toast toast.setView(view);// Setting custom view toast.show();// finally showing toast } |
6. Finally come to your MainActivity.java and add the following code. In this code an AlertDialog will be shown on Button press that display three option to choose gravity “TOP”, “CENTRE” and “BOTTOM”. After selecting gravity the custom toast will be called to show custom toast with selected gravity.
If you are new to Alert Dialog then check its tutorial here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
package com.toast_custom; import android.app.AlertDialog; import android.content.DialogInterface; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends ActionBarActivity { private static int gravity; // Gravity variable for gravity @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Implement click listener over button findViewById(R.id.show_toast).setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { showAlerDialog();// Show alert dialog } }); } // Alert dialog method for selecting gravity of toast private void showAlerDialog() { CharSequence[] alertItems = { "TOP", "CENTRE", "BOTTOM" }; // Aler // dialog // listitems AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle("Choose Toast Gravity"); // builder title // Setting list items and clicklistener over it builder.setItems(alertItems, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int position) { // Switch statement for position and setting gravity according // to selected position and calling custom toast method by // passing selected gravity switch (position) { case 0: gravity = Gravity.TOP; showCustomToast(gravity); break; case 1: gravity = Gravity.CENTER; showCustomToast(gravity); break; case 2: gravity = Gravity.BOTTOM; showCustomToast(gravity); break; default: gravity = Gravity.CENTER; showCustomToast(gravity); break; } } }); AlertDialog ad = builder.create(); ad.setCancelable(true); ad.setCanceledOnTouchOutside(true); ad.show(); // Show dialog } // Custom toast method private void showCustomToast(int gravity_type) { LayoutInflater inflater = getLayoutInflater(); // Layout inflater for // custom inflater View view = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.container)); // inflating custom // view // By finding views id you can change their value at run time by // changing imageview image and textview text ImageView custom_toast_image = (ImageView) view .findViewById(R.id.custom_toast_image); TextView custom_toast_text = (TextView) view .findViewById(R.id.custom_toast_text); // Getting toast Toast toast = new Toast(MainActivity.this); toast.setGravity(gravity_type, 0, 0);// Setting gravity and margin toast.setDuration(Toast.LENGTH_LONG);// Duration of toast toast.setView(view);// Setting custom view toast.show();// finally showing toast } } |
7. Now, you are all done, run your app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.