August 31, 2020

Custom Toast in Android

By Mohit Agrawal

Let’s see how to design Custom Toast in Android

Introduction

Recently I have written an android tutorial on Toast notification. But then I got bored because of the default black and white design of it. So can’t we design our own custom toast in android 🤔?

In today’s tutorial, I will show you how to design custom toast in android. In fact, at the end of this tutorial, you will be able to design your own custom toast not only the one which I am going to show you now.

What we will build?

Let me show you first that what we going to build in this tutorial. It will make sure that you are reading the article which you were looking for 😬.

As you can see in the below image, our custom toast will have a small icon with the color background.

Implementation

Let’s start with the coding part. There is nothing complex here. We will be designing a new separate XML layout and then I will show you how to set this new layout design in a native Toast notification.

1 STEP: Open your android studio and create a new android project and if you have the existing project then also it is fine.

2 STEP: First of all, we need to create a custom shape that looks like a Toast. You can play with the below code and create a new shape that looks better for your project.

Create a new drawable resource and name it toastshape.xml. Copy-paste the below code.

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "http://schemas.android.com/apk/res/android" android:shape = "rectangle" >
    <corners
        android:radius = "14dp"
        />
    <gradient
        android:angle = "45"
        android:startColor = "#fc8c03"
        android:endColor = "#cfa169"
        android:type = "linear"/>
    <padding
        android:left = "0dp"
        android:top = "0dp"
        android:right = "0dp"
        android:bottom = "0dp"/>
    <size
        android:width = "270dp"
        android:height = "60dp"/>
    <stroke
        android:width = "3dp"
        android:color = "#878787"/>
</shape>

I strongly recommend you to play with corner radius, size, and stroke color. You can also create a different shape altogether. Just make sure that it should look good as mine 😛.

3 STEP: Now it is a time to create a custom layout for our toast and to use the shape which we have already created in the last step.

Create a new layout file and name it custom_toast.xml. Copy-paste the below code.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:id = "@+id/custom_toast_layout_id"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:gravity = "center">
    <LinearLayout
        android:layout_width = "wrap_content"
        android:layout_height = "62dp"
        android:gravity = "center"
        android:background = "@drawable/toastshape"
        android:orientation = "horizontal">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:scaleType="center"
            android:src="@android:drawable/ic_dialog_info" />
        <TextView
            android:id = "@id/text"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:layout_marginLeft = "10dp"
            android:layout_marginRight = "20dp"
            android:text = "This is custom toast"
            android:textColor = "#FFF"
            android:textSize = "15sp"
            android:textStyle = "bold" />
    </LinearLayout>
</LinearLayout>

It will give you something like this.

4 STEP: This is going to be the final step. We need some kind of event action that can trigger our brand new custom notification. For this purpose, let’s create a simple button on MainActivity.kt.

Here is code for MainActivity.kt guys 🤩.

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            val li = layoutInflater
            val layout: View = li.inflate(
                R.layout.custom_toast,
                findViewById<ViewGroup>(R.id.custom_toast_layout_id)
            )
            val toast = Toast(applicationContext)
            toast.duration = Toast.LENGTH_SHORT
            toast.view = layout //setting the view of custom toast layout

            toast.show()
        }
    }
}

Let me explain to you the above code. The main part of the above code is this.

val layout: View = li.inflate(
                R.layout.custom_toast,
                findViewById<ViewGroup>(R.id.custom_toast_layout_id)
            )

Do you remember in the 3rd STEP we have created a layout? Here I am creating a reference for the same layout and storing it in layout variable.

After that, I am setting the custom layout for the toast using this toast.view = layout.

DEMO

Conclusion

Now you can run your project and enjoy the brand new custom notification in android. By any chance If your code is not working then please share the issue with me in the comment section. I will definitely help you out.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

Tagsandroid android beginners tutorial android tutorial