Reading Time: 7 minutes

In this tutorial we are going to show you how you can create easily a Toast message with a custom layout like below.

Step 1 – Create new project

Our first step is to create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.

This tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.

Step 2 – Create a simple layout

For this simple demo application we will create also a simple layout. It will contain only an EditText and two Buttons. One for the default Toast message, and one for the Toast message with our custom layout.

So, open the activity_main.xml file from the res->layout folders and replace there the XML code with the below one.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/et_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Inspire Coding"
        android:textAlignment="center"
        android:layout_margin="24dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn_defaultToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Default Toast"
        app:layout_constraintTop_toBottomOf="@+id/et_message"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/btn_customToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Custom Toast"
        app:layout_constraintTop_toBottomOf="@+id/btn_defaultToast"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The layout

You can close the layout file, because we won’t need it anymore in this tutorial.

Step 3 – Create a default Toast

First of all, before we gonna show you, how you can create a custom Toast, we should talk about, how you can create a deafult Toast message. It is very easy.

What you need, is only

- - the context,
  - the message
  - and the duration of the Toast‘s visibility.

So, copy and paste the below code after the onCreate() method of the MainActivity.

private fun showDefaultToast(message: String)
{
    Toast.makeText(
        this,
        message,
        Toast.LENGTH_SHORT
    ).show()
}

Default Toast message

This method will take a String, what will be the message of the Toast. So, what we should do now, is to call this method inside of the click listener of the default Toast‘s Button. Paste the below few lines at the end of the onCreate() method.

btn_defaultToast.setOnClickListener {
    showDefaultToast(et_message.text.toString().trim())
}

Click listener

Run the app

Run the app, enter a message into the EditText, then click on the “Default Toast” Button. At the bottom of the screen you should have the Toast message with the text from the EditText.

Step 4 – Position the default Toast

In the next step, we are going to talk about how we can change the default position of a Toast message. As you saw in the very last step, the default position of a Toast is at the bottom of the screen with some margin.

We can change it using by setting its gravity attribute. For this we can use the Gravity::class. This class has many singleton integer variables, but now we gonna use only four

- - TOP: It sets the Toast to the top of the screen
  - BOTTOM: This sets to the bottom.
  - LEFT: … to the left
  - RIGHT: and to the right.

So, copy and paste the below method after the onCreate() method.

private fun showPositionedToast(message: String)
{
    val toast = Toast.makeText(
        this,
        message,
        Toast.LENGTH_SHORT
    )
    toast.apply {
        setGravity(Gravity.TOP, 0, 300)
        show()
    }
}

Positioning the Toast

Note

1. 1. We created an instance about the Toast without showing it
  2. We set its gravity to the top of the screen with 300 pixels offset in vertical orientation.

Note also, that we are using apply extension function on the toast variable. With it we can reach its attributes in one code block.

More info: apply

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.In the click listener of the button, which is in the onCreate() method, change the fired method from showDefaultToast() to showPositionedToast().

Run the app

Run again the app, enter a text into the EditText and press the Button. The result should look like as on this picture at the right side.

Step 5 – Make a custom Toast

To create a custom Toast, we have to define a layout, set the message, the gravity and the duration. Looks easy, right? 😎

Create a new icon

Our custom Toast will have a green done mark. So, click with the right mouse button on the res->drawable file, select New and Vector Assets.

In the popup window, click on the Android icon in the row of “Clip Art” and search for the “done” icon. Then, name the icon as “ic_done_green”. Set the color of the icon: #78C257, then click on the “Next” and “Finish” buttons.

Shape of the Toast

As you can see, the Toast has rounded corners, a green border and a light green background. To achieve this effect, we have to create an xml file, where we can define them.

So, click again on the res->drawable folders with the right mouse button, select New and the Drawable resource file option. Name the file as “shape_roundedcorners”.

Next, replace there the code with the below one.

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid
        android:color="@color/light_green"/>
    <corners
        android:radius="18dp"/>
    <stroke
        android:color="@color/green"
        android:width="3dp"/>

</shape>

Shape of the background

Thenafter, define the below colors in the colors.xml file, what you can find in the res -> values folders.

- - green: #78C257
  - light_green: #B9D7AC

Create the layout

To create a new layout, click with the right mouse button on the layout folder, what you can find in the res directory. Then select New, and Layout Resource File. In the popup window name the new xml layout as “custom_toast”. Then, copy and paste the below lines into our new layout file.

<LinearLayout
    android:id="@+id/cl_customToastContainer"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@drawable/shape_roundedcorners">

    <ImageView
        android:id="@+id/iv_done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_done_green" />

    <TextView
        android:id="@+id/tv_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mission Completed"
        android:textColor="@color/green"
        android:layout_marginStart="6dp" />

</LinearLayout>

Layout of the custom Toast

Show the custom Toast

Before we can test again the app, we have to do two more things.

Create the Toast

First, as we have done it before, we are going to define a new method, which needs a String message as the only argument. So, open the MainActivity::class and paste the below method after the onCreate() method.

private fun showCustomToast(message: String)
{
    // 1
    val layout = layoutInflater.inflate (
        R.layout.custom_toast,
        findViewById(R.id.cl_customToastContainer)
    )

    // 2
    val textView = layout.findViewById(R.id.tv_message)
    textView.text = message

    // 3
    Toast(this).apply {
        setGravity(Gravity.BOTTOM, 0, 40)
        duration = Toast.LENGTH_LONG
        view = layout
        show()
    }
}

showCustomToast()

Note

1. 1. We have to inflate the previously created layout using the layoutInflater which is available because of the Activity::class.
  2. After, when we have already the inflated layout, we can find its view. In our case we will set the text of the TextView of the messsage.
  3. The last step is to create a new instance about the Toast::class. Then, using its apply extension function we set the gravity, the duration and the layout. Inside of apply, we can call the show() method as well.

Add the click listener

Next, we have to call the above method when we click on the “Custom Toast” Button. For this, we will implement its click listener inside of the onCreate() method.

btn_customToast.setOnClickListener {
    showCustomToast(et_message.text.toString().trim())
}

Click listener of the button

Run the app

Run again the app, enter a text into the EditText and click on the “Custom Toast” Button. The result should look like on this picture.

Use extension function

After figuring out how we can create and show our custom Toast message, we are going to change the game a bit.

Kotlin has many features, which help the programmers’ life. One from them is extension functions. We can extend a class and create new functionality without having to inherit from the class. This is done via special declarations called extensions. Such functions are available for calling in the usual way as if they were methods of the original class.

Using extension function, we can use the same function everywhere in our application.

Create new package and file

Our first task is to create a new package. So click with the right mouse button on the name of the project’s package, then select New and the Package option. In the popup window name it as util.

Then in the same way, create a new file, called ViewExt.kt.

Extend the Toast class

Next, we are going to extend the Toast::class. The body will be almost the same, what have defined in the showCustomToast() method above. The difference is, that we have to pass the context, and insteed of Toast(this), we can just use this and call on it the apply scope function.

So, the code looke like below.

fun Toast.showCustomToast(message: String, activity: Activity)
{
    val layout = activity.layoutInflater.inflate (
        R.layout.custom_toast,
        activity.findViewById(R.id.cl_customToastContainer)
    )

    val textView = layout.findViewById(R.id.tv_message)
    textView.text = message

    this.apply {
        setGravity(Gravity.BOTTOM, 0, 40)
        duration = Toast.LENGTH_LONG
        view = layout
        show()
    }
}

The extension function

Usage of the extension function

Now, open the MainActivity and go to the click listener of the custom Toast Button. Comment out there the call of the showCustomToast() method and paste after that the below lines.

Toast(this).showCustomToast (
    et_message.text.toString().trim(),
    this
)

Usage of the extension function

Note how we can use our own extension function. We can call it on the Toast::class by passing in the message and the context.

The Toast::class class has 2 public constructor. From them we use here, which needs only the context.

Run the app

Finally, run again the app. It should work like before. The difference is, that we can use this extension funtion in other activities and fragments as well.

GitHub

The source code is available on GitHub.

GitHub

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉 Have a nice a day! 🙂

Follow and like us:

Click to rate this post!

[Total: 2 Average: 5]

Custom Toast

Step 1 – Create new project

Step 2 – Create a simple layout

Step 3 – Create a default Toast

Run the app

Step 4 – Position the default Toast

Run the app

Step 5 – Make a custom Toast

Create a new icon

Shape of the Toast

Create the layout

Show the custom Toast

Create the Toast

Add the click listener

Run the app

Use extension function

Create new package and file

Extend the Toast class

Usage of the extension function

Run the app

GitHub

Questions

2 thoughts on “Custom Toast”

Leave a comment Cancel reply

Custom Toast