Android Custom Toast

How will you manage the positioning of toast message?

Toast notification, By default appears near the bottom of the screen, But you can change this position by using setGravity (int,int,int) method.

Here is a setGravity() example:
toast.setGravity(Gravity.CENTER, 0, 0);

The first parameter of the setGravity() method specifies the overall position of the Toast.

Gravity class provides the following constant. You can use these constants to specify the overall position:
  • TOP
  • BOTTOM
  • LEFT
  • RIGHT
  • CENTER
  • CENTER_HORIZONTAL
  • CENTER_VERTICAL
The other two constant are x-position offset, and a y-position offset.

For example: If you want notification at the top-left corner, but 20 pixels down from the top position, you can set the gravity like this:
toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 20);

How will you create custom toast? Explain with example.

For creating custom toast you have to createyour own view. For creating view follow these steps.

App → res → layout → right click and select new → layout resource file

A dialog box will appear → Provide a name for XML file (I have given file name as custom_toast). You can customize this file according to your need. In this file I have taken an imageView control. In drawable folder put a png image and reference it with imageView control. In drawable folder I put an image name logo1.png

android:src = "@drawable/logo1"

Following will be the content of res/layout/custom_toast.xml file:
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayoutxmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:id = "@+id/rootView" This id will be used in LayoutInflaterclass
android:weightSum = "1">

<ImageView
android:layout_width = "361dp"
android:layout_height = "wrap_content"
android:id = "@+id/imageView"
android:src = "@drawable/logo1"
android:layout_weight = "0.04" />
</LinearLayout>

Following will be the content of res/layout/content_main.xml file:

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayoutxmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:app = "http://schemas.android.com/apk/res-auto"
xmlns:tools = "http://schemas.android.com/tools"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
app:layout_behavior = "@string/appbar_scrolling_view_behavior"
tools:context = "com.example.custom.customtoast.MainActivity"
tools:showIn = "@layout/activity_main" >

<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Show custom toast"
android:id = "@+id/button"
android:layout_gravity = "center_horizontal"
android:textSize = "20dp"
android:textColor = "#f51010"
android:onClick = "showCustomToast"
android:layout_centerHorizontal = "true" />
</RelativeLayout>

Following is the content of the modified MainActivity.java file
package com.example.custom.customtoast;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.Toast;
public class MainActivityextends AppCompatActivity
{
     @Override
     protected void onCreate(Bundle savedInstanceState)
     {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
     }
     public void showCustomToast(View v)
     {
          Toast toast = new Toast(this);
          toast.setDuration(Toast.LENGTH_LONG);
          toast.setGravity(Gravity.CENTER, 0, 0);
          LayoutInflater inflator = getLayoutInflater();
          View display = inflator.inflat (R.layout.custom_toast, ViewGroup) findViewById(R.id.rootView));
          toast.setView(display);
          toast.show();
     }
}

When you click on show custom toast button, a popup message will appear that have custom logo as CareerRide.com.

custom toast

In the above code the most important is LayoutInflaterclass. It reads the XML description appearance and convert into java based view objects.

Let us summarize the steps to create custom toast message.

Step 1:
  • Create a layout file that defines what your toast will display.
Step 2:
  • Create a toast object.
  • Set properties of toast like gravity and duration.
Toast toast = new Toast(this);
toast.setDuration(Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER, 0, 0);

Step 3:
  • Construct the view from XML that will be used as the toast view with the help of LayoutInflaterclass.
LayoutInflater inflator = getLayoutInflater();
View display = inflator.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.rootView));

Related Content

▲