Inspire Coding

Posted on Nov 17, 2020 • Edited on Nov 19, 2020 • Originally published at inspirecoding.app

Android - Custom Toast with Kotlin extension function

#android #kotlin #toast #extensionfunction

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