Hi Guys, Welcome to Proto Coders Point, In this android tutorial we will create our own custom toast message in android studio.

What is Toast Message?

Some TImes Toast Messages are also called as Toast Notification.

It’s a small message that pop up at the bottom of the device screen and immediately disappears on it’s own after a delay of few seconds.

This are mostly used to show a feedback on the operation that is preformed by the user.

So, Let’s Begin Implementing of Custom Toast Message into our android project.

Step 1: Create a new project in android studio

File > New > New Project

Give a name to your project as “android custom toast” and hit the next,next finish so that android studio can build a project for you.

Step 2: Create 2 vector image in Drawable folder

As we gonna show 2 toast message i.e Smiling face icon when success toast message and a Error icon when unsuccessful message. So that we need to create 2 vector image in drawable folder

Right Click ( drawable folder ) > New > Vector Image ( select vector image and color and save it )

how to create vector image in android studio

Step 3: Create a layout design for custom toast message

create a new layout file under res > layout and name it as custom_toast_design.xml and paste the below xml design code.

custom toast message android layout design code

 

custom_toast_design.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:drawable/dialog_holo_light_frame">

    <LinearLayout
        android:id="@+id/linearColor"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="#00cc00">

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="15dp"
            android:background="@drawable/success"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">
        <TextView
            android:id="@+id/toast_message"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Toast message Here"
            android:layout_margin="10dp"
            android:textSize="15sp"
            android:textColor="@android:color/black"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"/>
    </LinearLayout>


</LinearLayout>

Step 4: activitymain.xml ui code

In activitymain.xml we simple have 2 button that perform some events on click

1 button will display success toast message and 2nd button will displpay error toast message.

activitymain.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="@android:color/holo_blue_dark"
            android:text="Custom Toast message" />

    <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Show Success Toast"
            android:id="@+id/B_Success"/>

    <Button
            android:layout_width="wrap_content"
          android:layout_height="wrap_content"
         android:text="Show Error Toast"
         android:id="@+id/B_Error"/>


</LinearLayout>

Step 5: Show the custom Toast message in MainActivity

MainActivity.java

package com.example.custom_toast;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button success_toast,error_toast;

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

        success_toast=(Button)findViewById(R.id.B_Success);
        error_toast=(Button)findViewById(R.id.B_Error);

        success_toast.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //on success
                //here i m manually passing string and icon to the function
                showCustomToast("Success, Stored Successfully","#00cc00",R.drawable.success);
            }
        });

        error_toast.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //on success
                //here i m manually passing string and icon to the function
                    showCustomToast("Error, Something went wrong","#ffff00",R.drawable.error);
            }
        });
    }

    //once function that show 2 different kind of toast message
    public void showCustomToast(String text,String color,int icon){
        View toast = LayoutInflater.from(this).inflate(R.layout.custom_toast_deisgn,null);
        Toast custom = new Toast(this);

        custom.setView(toast);

        TextView message = toast.findViewById(R.id.toast_message);
        //setting the color to linear layout
        LinearLayout linearLayoutcolor = toast.findViewById(R.id.linearColor);
        ImageView imageview = toast.findViewById(R.id.imageview);

        //setting the image icon
        imageview.setBackground(this.getResources().getDrawable(icon));

        linearLayoutcolor.setBackgroundColor(Color.parseColor(color));
        
        message.setText(text);
        custom.setDuration(Toast.LENGTH_SHORT);
        custom.show();
    }
}

 

Conclusion

This tutorial was on building your own custom toast message in android studio.

 

Related Post

Flutter toast

Flutter Bot Toast Library