Android - Custom Toast with Kotlin extension function
Tags: android, kotlin, toast, extensionfunction
Published: 2020-11-17 14:41:01

**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](https://inspirecoding.app/custom-toast/)

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

[GitHub](https://github.com/inspire-coding/CustomToastDemo)


# `Have a nice day :)`



## **More Android tutorials**
If you would like to do more Android tutorials like this, then visit my website:
[![Inspire Coding](https://secureservercdn.net/160.153.137.218/yv6.cb0.myftpupload.com/wp-content/uploads/2019/11/cropped-Header-of-the-website.png)](https://inspirecoding.app/ "Inspire Coding")