Create Custom Toasts in Android

In Android apps, programmers generally like to display a few important messages by making use of a toast. Just like in a webpage, developers make use of JavaScript alert boxes, in a similar way, the toasts work for the Android developers. If you do not know what a toast is, let me show it to you with the help of an example. The image shown below contains a toast at the bottom of the screen. If you wish to read more about toasts, you can do so by heading over to the official Android Developer website.

So now, the question that might come to your mind is “What is a custom toast?“. This question is expected. A custom toast is a type of toast in which we can display an image, change the background color of the toast, decide the position of the toast, and include whatever text we may need. In comparison to a regular toast, which allows you to add only a text message to it, custom toast messages allow you to change a few other properties, just the way you want it. Here is an image of a custom toast.

Let’s get started by creating our Toasts. I would also show you how to make a simple toast, which is actually pretty easy and straight forward. Also, if you are new to android application development, you might want to go through these tutorials first.

• Creating your First Android Application
• The Basics of an Android Application Development
• Splash Screen without 9 Patch Imaging in Android

Creating Custom Toast Messages in Android

For this tutorial, I have created a new android project (I hope you know how to do that). Then, in my layout, I want to display 2 buttons, which will call the functions to display 2 different types of toasts. Here is the code for the “activity_main.xml” file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<Button
android:id="@+id/normalToast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:text="Generate Normal Toast" />

<Button
android:id="@+id/customToast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/normalToast"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:text="Generate Custom Toast" />

</RelativeLayout>

Now, head over to the MainActivity Java file. In there, define two new variables with the Button class, and import the android’s button class. Also, we want to implement the OnClickListener class, to define our listeners for the two buttons. Also, import all the required files here. Paste the following code in your Main Activity java file.

package com.slashcoding.customtoaster;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
Button custom, normal;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

In the onCreate function, we need to define the Buttons that we just created and also set up On Click Listeners for both of them. Do this by adding the following lines of code to the onCreate function.

custom = (Button) findViewById(R.id.customToast);
normal = (Button) findViewById(R.id.normalToast);
custom.setOnClickListener(this);
normal.setOnClickListener(this);

Add a new image to your drawable folder, which will be the image you want to display in the toast. For this tutorial, I am going to use this image. If you want you can save this and use it. Also, remember to name this image “warning” for this tutorial.

Now, head over to the res/layout folder and create a new file. Name this file “custom_toast.xml“, and in that file, paste the following code.

<?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="#000"
android:orientation="horizontal"
android:padding="5dp" >

<ImageView
android:id="@+id/image"
android:src="@drawable/warning"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="5dp" />

<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="This is a Custom Toast"
android:gravity="center"
android:textColor="#FFF" />

</LinearLayout>

Now get back to the MainActivity Java file, and add the following lines of code to the onClick function.

switch (arg0.getId()) {
case R.id.customToast:
// The Custom Toast Layout Imported here
LayoutInflater inflater = getLayoutInflater();

View layout = inflater.inflate(R.layout.custom_toast,
(ViewGroup) findViewById(R.id.custom_toast_layout_id));

// The actual toast generated here.
Toast toast = new Toast(getApplicationContext());
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();
break;
case R.id.normalToast:
Toast.makeText(getApplicationContext(), "This is a normal Toast",
Toast.LENGTH_LONG).show();
break;
}

This is the output application we get after this tutorial.

Well, that’s all. Just run your Android application and you will be able to see a custom toast when you click on that specific button. I hope you learned something new from this tutorial. Stay subscribed to Slash Coding via RSS Feeds, Facebook, or Twitter.