Home How to create Image on a Toast

postheadericon How to create an image on a Toast

The Toast class is used to display a simple and not to big notifications to the user. The default layout is only capable of displaying text. This article will describe how you can alter the default layout into a layout with an image. The end result will be a Toast looking like this:

toast

We start with defining the new layout for the Toast. Create a file 'toast.xml' in the /res/layout folder and copy the following content into the file and save the file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toastLayout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dp"
android:background="@layout/roundborder">

<ImageView android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="1dp" />

<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="4dp"
android:textColor="#FFF" />
</LinearLayout>

In the same /res/layout folder you have to create a roundborder.xml file where the layout of the background is situated. In this case, a round border with some background transparancy.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="4dp" />
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<solid android:color="#CC4D404D" />
<stroke android:width="2dp" android:color="#CC8D808D" />
</shape>

The toast layout will be available via the R class. Now, we have to create a View with the toast layout. To do that, we have to inflate the xml file. The name of the xl file is used as the first argument R.layout.toast. As second argument the id of the LinearLayout is used.

View toastView = getLayoutInflater().inflate(R.layout.toast,
(ViewGroup)findViewById(R.id.toastLayout)));

Next, we have to assign an image to the ImageView and the message (to be displayed) to the TextView. You can use either a resource identifier or a bitmap drawable as image.

ImageView imageView = (ImageView)toastView.findViewById(R.id.image);

imageView.setImageResource(R.drawable.icon);
//    imageView.setBackgroundDrawable(bitmapDrawable);

TextView textView = (TextView)toastView.findViewById(R.id.text);

textView.setText("Yes, a Toast with an image!");

Finally, we a have to create and display the Toast and we are done.

Toast toast = new Toast(context);

toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(toastView);

toast.show();
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/overlayItemLayout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="4dp"
android:background="@layout/roundborder">


android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginRight="2dp" />


android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="4dp"
android:textColor="#FFF" />

</LinearLayout>

The Image on a Toast is used within the following apps:
VakantieparkChecker

Have fun and don't forget to like, plus or retweet if you like this blog!