Chapter 6.1: Custom Toast

Custom Toast In Android

In this tutorial we will learn how to build a Custom Toast in Android with an example. we will use a custom layout that we will inflate it in a Toast by hitting the Custom Toast button.

Example:

Create a new project
Create a new layout resource file, right click on layout -> New -> layout resource file -> name it as custom_toast.
Do the following design in the custom_toast.xml, as following.

File: custom_layout.xml:

<LinearLayout    
xmlns:android="http://schemas.android.com/apk/res/android"    
android:id="@+id/custom_layout"
android:layout_width="match_parent"    
android:layout_height="match_parent"    
android:orientation="vertical">

<LinearLayout        
android:layout_width="match_parent"        
android:layout_height="50dp"        
android:padding="10dp"        
android:gravity="center_vertical"        
android:background="@color/colorPrimary"        
android:orientation="horizontal">


<ImageView            
android:id="@+id/image_custom"            
android:layout_width="wrap_content"            
android:layout_height="match_parent"            
android:src="@drawable/ic_launcher"/>

<TextView            
android:id="@+id/text_custom"            
android:textColor="#FFFFFF"            
android:layout_width="wrap_content"            
android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

Design a Button in activity_main.xml, as follows.

File: activity_main.xml:

<LinearLayout 
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:orientation="vertical"    
android:gravity="center"    
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="com.example.hss_24.toastinandroid.MainActivity">

<Button       
android:id="@+id/button"       
android:text="Click to show Toast"       
android:layout_gravity="center_vertical"       
android:layout_width="match_parent"       
android:layout_height="wrap_content" />

<Button        
android:id="@+id/custom_button"        
android:text="Click to show custom Toast"        
android:layout_gravity="center_vertical"        
android:layout_width="match_parent"        
android:layout_height="wrap_content" />

</LinearLayout>


Now, do the following in MainActivity.java file
Create a String to store the text which we will display in a TextView.
Create button instance and set the Onclick Listener to it and inflate the custom_layout in Toast.

File: MainActivity.java:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override            
                public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "You clicked a Button", Toast.LENGTH_LONG).show();
            }
        });


        Button custom_button = (Button) findViewById(R.id.custom_button);
        custom_button.setOnClickListener(new View.OnClickListener() {
            @Override            
                public void onClick(View v) {
                String str = ("You have clicked a custom Button");
                //  inflating the layout                
LayoutInflater inflater = getLayoutInflater();
                View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.custom_layout));

                //  Display text in Textview                
TextView textView = (TextView) layout.findViewById(R.id.text_custom);
                textView.setText(str);

                //  Displaying the inflated layout in toast 
               Toast custom_toast = new Toast(getApplicationContext());
                custom_toast.setDuration(Toast.LENGTH_LONG);
                custom_toast.setView(layout);
                custom_toast.show();


            }
        });
    }
}