Custom Toast in Android Example with Source Code and Description

February 20, 2013 Android Tutorial, Tutorials

Custom Toast in Android Example with Source Code and Description

I know Android default Toast can’t full fill all the requirements for a developers. There are some limitations of Android Toast API. But don’t worry. You can create your own Custom Toast in Android. Here you can find Custom Toast in Android Example with source code and detailed description. We will create 2 different type of Custom Toast in android, which can full fill all your requirements.

1. Default Toast in Android

2. Custom Toast With Duration.

3. Custom Toast With Image, Font, Style, Border etc.

Here We will discuss regarding default Toast first, then we will move to Custom Toast with Duration and finally we will discuss about Custom Toast with image font border etc.

When we are going to create a custom toast in Android, we have play with xml file and little bit of java coding. Trust me guys it is very easy to crate custom toast in android. This toast will be display without flickering. Just we need to put our logic.

1. Default Toast in Android Example

1. First import the below package into your activity java file.

import android.widget.Toast;

1	import android.widget.Toast;

2. Then add the below line where you want to show the Toast.

	Toast.makeText(getBaseContext(),"Debug Break point passed", Toast.LENGTH_SHORT).show();

1	Toast.makeText(getBaseContext(),"Debug Break point passed", Toast.LENGTH_SHORT).show();

3. Android Toast have 2 different properties, We can show the android default toast for 2 different duration. One option is for short duration and other is for little long duration. We can use below properties for android default toast.

Toast.LENGTH_LONG  //used for long duration
Toast.LENGTH_SHORT //used for short duration

1 2	Toast.LENGTH_LONG //used for long duration Toast.LENGTH_SHORT //used for short duration

___________________________________________________________________________

2. Custom Toast With Duration.

Steps:

1. Create a countdown timer.

3. Show the default toast ( with “Toast.LENGTH_SHORT” attribute) using countdown timer.

4. Cancel or stop the custom toast display.

So lets start our mission. Here is your code to create a countdown timer for the toast.

Code Snippet for Showing Custom Toast With Timer

CountDownTimer myTimer = null; // need to declare this variable as static inside the class,
//so when you use this snippet, don't declare here, declare in side the class, explained below.
//so that when we will cancel the toast, we will just stop the countdown timer form another function,
//so that the toast will never show after.
final Toast tag = Toast.makeText(getBaseContext(), "YOUR MESSAGE",Toast.LENGTH_SHORT);
tag.show();
//Create the count down timer here. &nbsp;
//Duration (1000-19000)this toast will show from time 1 to 19 seconds = duration 20 seconds
myTimer =new CountDownTimer(19000, 1000)
{
  public void onTick(long millisUntilFinished) {tag.show();}
  public void onFinish() {tag.show();}

}.start();

CountDownTimer myTimer = null; // need to declare this variable as static inside the class,

//so when you use this snippet, don't declare here, declare in side the class, explained below.

//so that when we will cancel the toast, we will just stop the countdown timer form another function,

//so that the toast will never show after.

final Toast tag = Toast.makeText(getBaseContext(), "YOUR MESSAGE",Toast.LENGTH_SHORT);

tag.show();

//Create the count down timer here.  

//Duration (1000-19000)this toast will show from time 1 to 19 seconds = duration 20 seconds

myTimer =new CountDownTimer(19000, 1000)

{

public void onTick(long millisUntilFinished) {tag.show();}

public void onFinish() {tag.show();}

}.start();

Code Snippet for Cancel Custom Toast With Timer

myTimer.cancel(); // call this when ever you want to cancel the toast. //This variable myTimer is nothing but the static variable,
//which we have used when create the countdown timer.

1 2	myTimer.cancel(); // call this when ever you want to cancel the toast. //This variable myTimer is nothing but the static variable, //which we have used when create the countdown timer.

Here is the complete code for Custom Toast with Timer.

We have used 2 buttons for the Custom Toast project. One for showing the Toast and another for Cancel the Toast.

Create new android project [File >> New >> Android Project] with Project Name: CustomToastExample
Click next and select target android device version [I chose version 2.2]
Click next and enter package name – ‘com.example.customtoast’
Click finish

Layout creation:
We need to create one layout, which hold two buttons for test the Custom Toast application. one is for showing the custom test and other is for cancel the custom toast.

Default Application layout – main.xml:

Open main.xml under /res/layout and replace it with the below XML.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="10dp" >

    <Button
        android1:id="@+id/button1"
        android1:layout_width="104dp"
        android1:layout_height="66dp"
        android1:layout_weight="0.52"
        android1:text="Show Custom Toast" />

    <Button
        android1:id="@+id/button2"
        android1:layout_width="130dp"
        android1:layout_height="64dp"
        android1:layout_weight="0.17"
        android1:text="Stop Toast" />

</LinearLayout>

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

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

android:id="@+id/main"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:padding="10dp" >

<Button

android1:id="@+id/button1"

android1:layout_width="104dp"

android1:layout_height="66dp"

android1:layout_weight="0.52"

android1:text="Show Custom Toast" />

<Button

android1:id="@+id/button2"

android1:layout_width="130dp"

android1:layout_height="64dp"

android1:layout_weight="0.17"

android1:text="Stop Toast" />

</LinearLayout>

Now coming to Java code (CustomToastExampleActivity.java)

Here we create the Custom Toast in side the onCreate method of the activity. I mean inside your button click code.

package com.example.customtoast;

import android.os.Bundle;
import android.os.CountDownTimer;
import android.app.Activity;
import android.view.View; 
import android.widget.Button;
import android.widget.Toast;

public class CustomToastExampleActivity extends Activity {

	static CountDownTimer myTimer =null; // here we declare the countdown timer variable as static, 
	//bcz we want to cancel the toast using this variable from other place, the trick is we will cancel the timer
	//then toast will never display again. 

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

		//This button is used for show the toast
		Button btn = (Button) findViewById(R.id.button1); 
		//Create onclick listener class 
		btn.setOnClickListener(new View.OnClickListener() {        
			//When button is clicked, toast will be showed          
			public void onClick(View v) {
				//To show the default toast with Toast.LENGTH_SHORT
				final Toast tag = Toast.makeText(getBaseContext(), "YOUR MESSAGE",Toast.LENGTH_SHORT);
				tag.show();

				//Create the count down timer here
				myTimer =new CountDownTimer(19000, 1000) //(1000-19000)this toast will show from time 1 to 19 seconds = duration 20 seconds
				{
				    public void onTick(long millisUntilFinished) {tag.show();}
				    public void onFinish() {tag.show();}

				}.start();
			}  
		});

		//This button is used for cancle the toast, in button click we will cancle the toast/timer
		Button btn2 = (Button) findViewById(R.id.button2); 
		btn2.setOnClickListener(new View.OnClickListener() { 
		public void onClick(View v) {

			myTimer.cancel();
		}
	}); 
 }
}

package com.example.customtoast;

import android.os.Bundle;

import android.os.CountDownTimer;

import android.app.Activity;

import android.view.View;

import android.widget.Button;

import android.widget.Toast;

public class CustomToastExampleActivity extends Activity {

static CountDownTimer myTimer =null; // here we declare the countdown timer variable as static,

//bcz we want to cancel the toast using this variable from other place, the trick is we will cancel the timer

//then toast will never display again.

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//This button is used for show the toast

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

//Create onclick listener class

btn.setOnClickListener(new View.OnClickListener() {

//When button is clicked, toast will be showed

public void onClick(View v) {

//To show the default toast with Toast.LENGTH_SHORT

final Toast tag = Toast.makeText(getBaseContext(), "YOUR MESSAGE",Toast.LENGTH_SHORT);

tag.show();

//Create the count down timer here

myTimer =new CountDownTimer(19000, 1000) //(1000-19000)this toast will show from time 1 to 19 seconds = duration 20 seconds

{

public void onTick(long millisUntilFinished) {tag.show();}

public void onFinish() {tag.show();}

}.start();

}

});

//This button is used for cancle the toast, in button click we will cancle the toast/timer

Button btn2 = (Button) findViewById(R.id.button2);

btn2.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

myTimer.cancel();

}

});

}

Then build the app and run it on emulator or device and enjoy your custom toast.

__________________________________________________________________________

3. Custom Toast with Image, Font, Style, Border etc.

Now coming to the second type of custom toast. Here we will develop a simple android activity which will have one button. On clicking the button, your custom toast message will be displayed.

Steps:

1. Create an xml layout which contains a button, We will display the custom toast on the button click option.

2. Create a xml layout for our custom toast, we can add extra styles later in this xml as per our requirement.

3. A small java code snippet to display the custom toast.

Project Creation

Create new android project [File >> New >> Android Project] with Project Name: CustomToast
Click next and select target android device version [I chose version 2.2]
Click next and enter package name – ‘com.techblogon.customtoast’
Click finish

Layout Creation

We need to create two layouts:

Layout of the application – main.xml
Layout of the custom toast message – custom_toast.xml

1. Default Application layout – main.xml:

Open main.xml under /res/layout and add replace it with the below XML.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="10dp" >

    <Button
        android:id="@+id/button_show_toast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Show custom toast" />

</LinearLayout>

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

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

android:id="@+id/main"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:padding="10dp" >

<Button

android:id="@+id/button_show_toast"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="Show custom toast" />

</LinearLayout>

2. Layout of the custom toast message – custom_toast.xml

Create a new layout XML under /res/layout with name custom_toast.xml and the below XML. You can add/replace below code in your custom_toast.xml file.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:id="@+id/toast_layout_root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#DAAA"
    android:orientation="horizontal"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/india_flag" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Your Custom Toast message"
        android:textSize="15dip" 
    	android:textColor="#00ff00"
    	android:textStyle="bold"
    	android:padding="5px"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

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

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

android:id="@+id/toast_layout_root"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#DAAA"

android:orientation="horizontal"

android:padding="10dp" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

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

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Your Custom Toast message"

android:textSize="15dip"

android:textColor="#00ff00"

android:textStyle="bold"

android:padding="5px"

android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

Now We need to inflate the custom_toast xml into Toast view in java code. Below code snippet does the job of creating and showing custom toast.

LayoutInflater inflater = getLayoutInflater();
        View layout = inflater.inflate(R.layout.custom_toast,
                (ViewGroup) findViewById(R.id.toast_layout_root));
        Toast toast = new Toast(getApplicationContext());
        toast.setGravity(Gravity.BOTTOM, 0, 0);
        toast.setDuration(Toast.LENGTH_LONG);
        toast.setView(layout);
        toast.show();

LayoutInflater inflater = getLayoutInflater();

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

(ViewGroup) findViewById(R.id.toast_layout_root));

Toast toast = new Toast(getApplicationContext());

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

toast.setDuration(Toast.LENGTH_LONG);

toast.setView(layout);

toast.show();

Now coming to Java code (CustomToastActivity.java)

Find entire java code snippet for showing the toast below. You can replace your CustomToastActivity.java file with below code snippet.

package com.techblogon.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.Button;
import android.widget.Toast;

public class CustomToastActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button btn = (Button) findViewById(R.id.button_show_toast);
        //Create onclick listener class
        btn.setOnClickListener(new View.OnClickListener() {
                //When button is clicked, toast will be showed
        public void onClick(View v) {
        LayoutInflater inflater = getLayoutInflater();
        View layout = inflater.inflate(R.layout.custom_toast,
                (ViewGroup) findViewById(R.id.toast_layout_root));
        Toast toast = new Toast(getApplicationContext());
        toast.setGravity(Gravity.BOTTOM, 0, 0);
        toast.setDuration(Toast.LENGTH_LONG);
        toast.setView(layout);
        toast.show();
    }
});

    }
}

package com.techblogon.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.Button;

import android.widget.Toast;

public class CustomToastActivity extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button btn = (Button) findViewById(R.id.button_show_toast);

//Create onclick listener class

btn.setOnClickListener(new View.OnClickListener() {

//When button is clicked, toast will be showed

public void onClick(View v) {

LayoutInflater inflater = getLayoutInflater();

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

(ViewGroup) findViewById(R.id.toast_layout_root));

Toast toast = new Toast(getApplicationContext());

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

toast.setDuration(Toast.LENGTH_LONG);

toast.setView(layout);

toast.show();

}

});

}

Then build the app and run it on emulator or device and enjoy your custom toast.

I hope this small tutorial will help you at it’s best. Please reply us if you will face any issue during development of custom toast. We will respond back you asap.

Android Tutorial Home Page

Post By SmrutiRanjan (46 Posts)

Working @ Samsung as a Project Lead for Android Smartphones. I have been blogging since 2008. Previously I was writing articles for other bloggers, but finally I have started my own blog-"Techblogon".I am also an active contributor for the blog-"Gadgets n Gizmos World". Job is my necessity, but blogging is my passion.

Website: → Techblogon

Connect

3 Responses to Custom Toast in Android Example with Source Code and Description

AndroidExample says:

March 5, 2013 at 6:18 pm

very good post, nice dude……….

Reply
Hengki says:

March 26, 2013 at 8:11 am

I really need your help for Toast,

I have a button in myToast it can click or clickable in ICS but in Jelly Beans listener for this button does not triggering can you solved my problem?

Reply
- SmrutiRanjan says:
  
  March 28, 2013 at 6:16 pm
  
  Dear Hengki,
  You can try below tricks, it might help you.
  add the click event in the xml file rather than in the java code.
  
  Then add the below button click code in your java file
  //this function will be called when you click on the button
  //This OnClick option has been set in the xlm file
  public void onClickButtonToast(View V){
  //add your stuff here
  }
  
  Reply