In this short tutorial I'm going to show you how you can customize your Toast messages using Kotlin extension function.

Step 1: Create a new project

First of all, create a new Android Studio project.

Step 2: Create a layout

The second step is to create a very simple layout. In our case it will contain only an EditText and a Button.

Copy and paste the below code into the activity_main.xml file.

activity_main.xml

<?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: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_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>

Step 3: Create an icon

Our Toast message will have an icon as well. So, create a checkmark with the below detailes into the drawable folder.

Search for done to find the icon
Create a color in the colors.xml file with the name of green: #78C257

Step 4: Create a shape

The custom Toast message will have

a green border
a light green background
and rounded corners

So, create a new shape in the drawable folder and paste into it the below lines.

shape_roundedcorners

<?xml version="1.0" encoding="utf-8"?>
<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>

The Hex-code for the light_green color: #B9D7AC

Step 5: Create the layout

The next is to create the custom layout for the Toast message. So, create a new layout file in the res > layout folder with the name of custom_toast. Then paste into it the below lines.

custom_toast

<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>

Step 6: Create the extension function

In this step first, we have to create a new package and file.

New Package: util
New file: ViewExt.kt

Copy and paste the below code into the new ViewExt.kt file

Extension function of custom Toast 

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<TextView>(R.id.tv_message)
    textView.text = message

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

Notes

Using the LayoutInflater we gonna make instance about the layout
Set the text of the TextView
Then we can call the apply scope function to set the gravity, the duration and the view.

Step 7: Set the click listener

The last step is to show our custom Toast message when we click on the Button. So, open the MainActivity and paste the below code into the onCreate() method.


btn_customToast 

btn_customToast.setOnClickListener {_button ->
    Toast(this).showCustomToast (
        et_message.text.toString().trim(),
        this
    )
}

Run the app

Run and test the app. ;)

More detailes

The whole tutorial is available on my website

Custom Toast - Inspire Coding - Android development in Kotlin

And you can check the source code on GitHub as well.

GitHub

Blog

Android - Custom Toast with Kotlin extension function

Inspire Coding

Step 1: Create a new project

Step 2: Create a layout

Step 3: Create an icon

Step 4: Create a shape

Step 5: Create the layout

Step 6: Create the extension function

Step 7: Set the click listener

Run the app

More detailes

`Have a nice day :)`

More Android tutorials

Join Our Newsletter. No Spam, Only the good stuff.

Related