[Android] Custom Toast style with image

The Android SDK has some default or standard toasts. In this Android tutorial I show you how you can make your own personal customized pop-up. Part of this example is creating a customized shape of the toast including an image in the toast (ImageView).

- We first create the shape of the toast through the XML.
- Then we create the layout XML of the toast.
- Finally we make the references and initiation via the Java.

At the result we got something like this...

So now open your project file in Eclipse and create a new XML file in your resources folder and name it: shape.xml. In this XML file we define a stroke (a border around the toast) we set a solid background color of the toast, and finally set some small curved corners in the toast.

shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
       <stroke 
           android:width="2dp" 
           android:color="#FF6700" />
       <solid 
           android:color="#FF9000" />
       
      <corners
          android:bottomRightRadius="5dp"
          android:bottomLeftRadius="5dp"
          android:topLeftRadius="5dp"
          android:topRightRadius="5dp"/>
</shape>

Now that we have set the shape of the custom toast we need to make the actual layout. Create in your layout folder a XML file called toastcustom.xml. In this layout we will have multiple LinearLayouts. One defining the overall layout, one for creating the layout which retrieves the ImageView, and lastly a LinearLayout referring to the TextView. Note that I have added some additional parameters to make things a bit nicer.

toastcustom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/toastcustom"
       android:background="@layout/shape">
       <LinearLayout 
              android:layout_margin="5dip"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">
         <ImageView
                  android:layout_width="40dp"
                  android:layout_height="40dp"
                  android:src="@drawable/icon"/>
       <LinearLayout
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:gravity="center">
             <TextView
                  android:id="@+id/texttoast"
                  android:paddingLeft="10dip"
                  android:paddingRight="10dip"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
                  android:textColor="#ffffff"
                  android:textSize="12sp"
                  android:gravity="center"/>
            </LinearLayout>
      </LinearLayout>
</LinearLayout>

So now we have created the shape and the layout of the toast. We need something in our tutorial which initiate the toast message. For this I just made a simple button in our Activity_Main.xml.

Activity_Main.xml

<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" >
 
    <Button
        android:id="@+id/btn_showToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Show Custom Toast" />
 
</RelativeLayout>

As far as this Tutorial can be excited :) The fun part starts now (hehe). Open your MainActivity.java file.

First create reference to your Button (btnCustomToast) and set the onClickListener.

In the onClickListener we inflate the custom toast. Create a new initiation of LayoutInflater(Android SDK) and make the reference to your Layout (toastcustom) and to your TextView and set the text which you want in the toast to appear.

Now that we have inflated the Layout and TextView we need to create the actual toast. Create an new instance of Toast (Android SDK) mytoast and set it to the layout (layouttoast).

package christianpeeters.customtoast;
 
import android.os.Bundle;
import android.app.Activity;
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 Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
     Button btnCustomToast = (Button)findViewById(R.id.btn_showToast); 
     btnCustomToast.setOnClickListener(new View.OnClickListener() {
  
  @Override
  public void onClick(View v) {
   
   
   LayoutInflater inflater = getLayoutInflater();
   View layouttoast = inflater.inflate(R.layout.toastcustom, (ViewGroup)findViewById(R.id.toastcustom));
   ((TextView) layouttoast.findViewById(R.id.texttoast)).setText("Yippie, a custom toast");
   
   Toast mytoast = new Toast(getBaseContext());
         mytoast.setView(layouttoast);
         mytoast.setDuration(Toast.LENGTH_LONG);
         mytoast.show();
   
  }
 });
        
    }
 
}
 

Now you have made a custom toast :)