Custom Toast

Welcome to "Android Super Nerds".

Today we are going to see what are the possible ways of using Custom Toast.
Note: Basically toast is kind of that component which just pops up with some information(message) and disappears. And believe me, we really need this kind of alert feature most of the time. 

Mostly toast is used to alert the user about some notification message and we can also use it for displaying error or success message while interacting with Rest API. It doesn't affect any view of the screen and that's why it is one of the outstanding features which Android had provided to us. (Really thank you Google)

But again a question arises why do we really require customized toast?
Here the answer is really simple. Just look at it.

So are you impressed?. I guess "NOT".😏😏😏😏

but now suppose just think once, if some custom layout is displayed here inside the toast, and we really didn't need to do anything with its default functionality it gonna be super cool.

Got it Right 😉😉😉😉

So let's see how to make it happen.

First, create a layout which you desire to display inside toast view. Something like this ↓

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/toast_layout_root"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:background="#DAAA" >
	<ImageView android:id="@+id/image"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginRight="10dp"/>
	<TextView android:id="@+id/text1"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:textColor="#FFF"
	android:gravity="center_vertical"/>
	<TextView android:id="@+id/text2"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:textColor="#FFF"
	android:gravity="center_vertical"
	android:layout_marginLeft="5dp"/>
	</LinearLayout>

view raw toast.xml hosted with ❤ by GitHub

Here we have just added one ImageView with TextView.

Now create an Activity Class and add its layout, I had just created one with a simple layout with two sets of a button with its clickable features.  ↓

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout 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"
	tools:context=".CustomToastActivity"
	android:orientation="vertical">
	<Button
	android:id="@+id/btn1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Custom Toast 1"
	android:layout_centerInParent="true"
	android:layout_above="@id/btn2" />
	<Button
	android:id="@+id/btn2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Custom Toast 2"
	android:layout_centerInParent="true" />
	</RelativeLayout>

view raw activity_customtoast.xml hosted with ❤ by GitHub

For displaying this Custom Toast, I had created a method which is going to be invoked via button's click functionality.  ↓

	//first method
	public void firstCustomToast(){
	LayoutInflater inflater = getLayoutInflater();
	View layout = inflater.inflate(R.layout.toast,(ViewGroup) findViewById(R.id.toast_layout_root));
	ImageView image = (ImageView) layout.findViewById(R.id.image);
	image.setImageResource(R.drawable.warning);
	TextView text1 = (TextView) layout.findViewById(R.id.text1);
	TextView text2 = (TextView) layout.findViewById(R.id.text2);
	text1.setText("Hello!");
	text2.setText("This is a first custom toast.");
	Toast firstToast = new Toast(getApplicationContext());
	firstToast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
	firstToast.setDuration(Toast.LENGTH_LONG);
	firstToast.setView(layout);
	firstToast.show();
	}

view raw FirstCustomToast.Java hosted with ❤ by GitHub

And in the end, Custom Toast is gonna look like this ↓

Here again, I had created and added background gradient XML file with Rounder Curve (please check out my Old Post on Rounder Curve via here).


Another alternative way of creating Custom Toast is by playing with its own class instance(object).
And for displaying this Custom Toast using its Class instance, I had created another method which is again going to be invoked via button's click functionality.  ↓

	// second method
	public void secondCustomToast(){
	Toast secondToast = Toast.makeText(this, "Hello! This is a second custom toast.", Toast.LENGTH_SHORT);
	// getView() method returns the default view of the initialized Toast.
	View toastView = secondToast.getView();
	// TextView can be accessed from default View of the Toast.
	TextView toastMessage = (TextView) toastView.findViewById(android.R.id.message);
	toastMessage.setTextSize(15);
	toastMessage.setTextColor(getResources().getColor(R.color.colorYellow));
	// With setCompoundDrawablesWithIntrinsicBounds() method drawable image can be aligned under the Toast View.
	toastMessage.setCompoundDrawablesWithIntrinsicBounds(R.drawable.warning,0,0,0);
	toastMessage.setGravity(Gravity.CENTER_VERTICAL);
	//toastView.setBackgroundColor(Color.WHITE);
	toastView.setBackgroundResource(R.drawable.toast_bg);
	toastView.setMinimumWidth(600);
	secondToast.show();
	}

view raw SecondCustomToast.Java hosted with ❤ by GitHub

Here the method, setCompoundDrawablesWithIntrinsicBounds is used for aligning Image Icon.
This method had four parameters.
The first Parameter is for aligning icon to the left of TextView.
The second Parameter is for aligning the icon to the top of TextView.
The third Parameter is for aligning icon to the right of TextView.
Forth Parameter is for aligning icon to the bottom of TextView. 

The outcome from this method ↓

Final full Code for Custom Toast Activity ↓

	package customtoast.android.com.customtoast;
	import android.support.v7.app.AppCompatActivity;
	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.ImageView;
	import android.widget.TextView;
	import android.widget.Toast;
	public class CustomToastActivity extends AppCompatActivity implements View.OnClickListener {
	Button btn1, btn2;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	btn1 = (Button)findViewById(R.id.btn1);
	btn2 = (Button)findViewById(R.id.btn2);
	btn1.setOnClickListener(this);
	btn2.setOnClickListener(this);
	}
	@Override
	public void onClick(View v) {
	switch (v.getId()) {
	case R.id.btn1:
	firstCustomToast();
	break;
	case R.id.btn2:
	secondCustomToast();
	break;
	}
	}
	//first method
	public void firstCustomToast(){
	LayoutInflater inflater = getLayoutInflater();
	View layout = inflater.inflate(R.layout.toast,(ViewGroup) findViewById(R.id.toast_layout_root));
	ImageView image = (ImageView) layout.findViewById(R.id.image);
	image.setImageResource(R.drawable.warning);
	TextView text1 = (TextView) layout.findViewById(R.id.text1);
	TextView text2 = (TextView) layout.findViewById(R.id.text2);
	text1.setText("Hello!");
	text2.setText("This is a first custom toast.");
	Toast firstToast = new Toast(getApplicationContext());
	firstToast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
	firstToast.setDuration(Toast.LENGTH_LONG);
	firstToast.setView(layout);
	firstToast.show();
	}
	// second method
	public void secondCustomToast(){
	Toast secondToast = Toast.makeText(this, "Hello! This is a second custom toast.", Toast.LENGTH_SHORT);
	// getView() method returns the default view of the initialized Toast.
	View toastView = secondToast.getView();
	// TextView can be accessed from default View of the Toast.
	TextView toastMessage = (TextView) toastView.findViewById(android.R.id.message);
	toastMessage.setTextSize(15);
	toastMessage.setTextColor(getResources().getColor(R.color.colorWhite));
	// With setCompoundDrawablesWithIntrinsicBounds() method drawable image can be aligned under the Toast View.
	toastMessage.setCompoundDrawablesWithIntrinsicBounds(R.drawable.warning,0,0,0);
	toastMessage.setGravity(Gravity.CENTER_VERTICAL);
	//toastView.setBackgroundColor(Color.WHITE);
	toastView.setBackgroundResource(R.drawable.bg_with_circular_border);
	toastView.setMinimumWidth(650);
	secondToast.show();
	}
	}

view raw CustomToastActivity.java hosted with ❤ by GitHub

After adding the above-given code in your Activity Class. the final outcome would be ↓

What have we covered today?

1. Creating the Custom Toast is possible via inflating the android layout.
2. Without inflating the android layout also we can add icon inside the Toast View.
3. Using method "setCompoundDrawablesWithIntrinsicBounds", image icon can be aligned anywhere inside the toast view.

AND THAT'S IT....!!

If you have any questions about Custom Toast or any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.

Till then "Happy coding".