Android UI

Android How To Create Custom Toast Programmatically

Toast is a popup visible for a few seconds can be used to notify user with a message. Toast is being used to give feedback about an action has been performed in an application. Most noticeable factor that i noticed about the Toast is that it is independent from Activity. As a result of this Toast will be showing even after Activity has been destroyed/minimized. Because of this behavior Toast is being used in cases where message needs to be keep visible during the Activity switch.

It is a handy popup that can be shown with a single line of code. By default it is black popup which will be shown at the bottom of the screen. Customizing the toast includes changing position and view. Here in this article i will show how to create our own Toast popup.

Steps For Customization

  • 1. Create a layout for toast
  • 2. Instantiate Toast object with created layout
  • 3. Show it

Background Drawable For Toast View

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#060c5c" />
    <corners android:radius="5dp" />
</shape>

Let’s Add A Image To Toast View

toast_left_icon

Create Layout For Toast

toast_layout.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="5dp"
        android:background="@drawable/toast_bg"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_action_info_outline" />


        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is a custom toast!!"
            android:layout_gravity="center"
            android:textColor="#fff"

            />

    </LinearLayout>

</RelativeLayout>

In Activity Class

package customtoast.devdeeds.com.customtoast;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Button btnShowToast = (Button) findViewById(R.id.show_toast);

        btnShowToast.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                showToast();
            }
        });
    }


    public void showToast() {

        View toastLayout = getLayoutInflater().inflate(R.layout.toast_layout, null);

        Toast toast = new Toast(getApplicationContext());
        toast.setView(toastLayout);
        toast.setDuration(Toast.LENGTH_LONG);
        toast.show();

    }


}

Create Layout XML For Activity

<?xml version="1.0" encoding="utf-8"?>
<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="customtoast.devdeeds.com.customtoast.MainActivity">

    <Button
        android:id="@+id/show_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Show Custom Toast"
        android:layout_centerInParent="true" />

</RelativeLayout>

Output

screenshot_custom_toast

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *