Android Snippet – How to create a Custom Toast in Android

Android Snippet – How to create a Custom Toast in Android

In this android code snippet example, we are going to learn how to create a custom Toast in Android. It is important for use to understand what is a Toast in android and what it is used for.

According to android developers guide a Toast provides simple feedback about an operation in a small pop-up. It only fills the amount of space required for the message and the current activity remains visible and interactive. For example, navigating away from an email before you send it triggers a “Draft saved” toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.

With a better understanding of what Toast is all about in android we will focus now on how to make a custom Toast in android. The default Toast is very simple and not so appealing. When you want to create or use a Toast in your android application so that it matches the overall design of your app, you might need to develop a custom Toast.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCustomToast

Package: com.inducesmile.androidcustomtoast

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

We will first of all create a default android Toast and see how it looks. Thereafter we will go ahead and create a custom android Toast.

To start with the first task, open you activity_main.xml file and paste the following code snippet on it.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/android_toast"

android:id="@+id/button"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true" />

</RelativeLayout>

We have add a button View in our layout file. What we intent to achieve is when a user clicks on the button, a default android Toast will appear.

package inducesmile.com.androidcustomtoast;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button defaultAndroidToast = (Button)findViewById(R.id.button);

defaultAndroidToast.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "This is android default toast", Toast.LENGTH_LONG).show();

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

}

In your MainActivity.java file, copy and paste the following. In the code below, we get the instance of the Button view and attached an event listener to the Button object. When the button is clciked, you will see a Toast displayed as shown below

android default toast

For us to implement our custom android Toast, we are going to define our own layout for the Toast and use our new layout to replace the default layout of Toast class in android.

What we are going to do?

1. We will create a new layout in res/layout folder and we will name our layout custom_toast.xml

2. In the design view of (Android Studio) drag and drop an ImageView and a TextView in the layout (feel free to use the code view if you like)

Copy and paste the code for our custom_toast.xml below

<?xml version="1.0" encoding="utf-8"?>

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

android:layout_width="match_parent"

android:background="#f43131"

android:layout_height="match_parent">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:background="@drawable/mail"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/custom_toast"

android:id="@+id/textView"

android:layout_alignTop="@+id/imageView"

android:layout_marginTop="20dp"

android:layout_marginLeft="20dp"

android:textSize="20sp"

android:layout_toRightOf="@+id/imageView"

android:layout_toEndOf="@+id/imageView" />

</RelativeLayout>

Now we are going to inflate our custom layout and set the instance of our layout to Toast object by using the setView method of the Toast class.

package inducesmile.com.androidcustomtoast;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

private View customView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

LayoutInflater customInflate = getLayoutInflater();

customView = customInflate.inflate(R.layout.custom_toast, null);

Button defaultAndroidToast = (Button)findViewById(R.id.button);

defaultAndroidToast.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast appCustomToast = new Toast(getApplicationContext());

appCustomToast.setView(customView);

appCustomToast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL,0, 0);

appCustomToast.setDuration(Toast.LENGTH_LONG);

appCustomToast.show();

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}
return super.onOptionsItemSelected(item);
}
}

When the button is click, it will display our custom Toast as shown below. Now, you have seen how simple it is to create a custom Toast for your android application

Android custom toast

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

Add a Comment