Create custom Toast view

Toast provides simple feedback about an action performed by user in form of small popup. Toast automatically disappears from the screen after specific timeout.

But some clients are very demanding they can ask you, BRO! can you please replace that boring Toast with some fancy popup for the feedback.? So don't be worried about that, here comes Custom Toast View to rescue you 👨‍🚒

Get Junaid Ahmad’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Step1: Create a new shape drawable with name shape_rounded_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp"/>
    <solid android:color="@color/colorAccent"/>
</shape>

Step2: Create a custom layout with name custom_toast.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutCustomToast"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="@drawable/shape_rounded_corners"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageViewIcon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:src="@drawable/camera" />

    <TextView
        android:id="@+id/textViewMessage"
        android:layout_width="wrap_content"
        android:textColor="@android:color/white"
        android:layout_centerVertical="true"
        android:layout_marginStart="10dp"
        android:textSize="16sp"
        android:layout_toEndOf="@+id/imageViewIcon"
        android:layout_height="wrap_content"/>


</RelativeLayout>

Step 3: Create a function with name showCustomToast

private fun showCustomToast(message: String) {

    val layoutInflater = LayoutInflater.from(this)
    val customLayout = layoutInflater.
        inflate(R.layout.custom_toast,layoutCustomToast)
    val textViewMessage = customLayout.
        findViewById<TextView>(R.id.textViewMessage)

    textViewMessage.text = message

    val toast = Toast(applicationContext)
    toast.duration = Toast.LENGTH_LONG
    toast.view = customLayout
    toast.show()
}

Please note that layoutCustomToast is the id of RelativeLayout of layout custom_toast.

Last Step: Call your function showCustomToast when a button is clicked

buttonShowCustomToast.setOnClickListener {
    showCustomToast("Taking picture...")
}

Here is the sweet output of your efforts ✌️