DEV Community

loading...
Cover image for Android - Custom Toast with Kotlin extension function

Android - Custom Toast with Kotlin extension function

inspire_coding profile image Inspire Coding Originally published at inspirecoding.app Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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()
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    )
}
Enter fullscreen mode Exit fullscreen mode

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

Have a nice day :)

More Android tutorials

If you would like to do more Android tutorials like this, then visit my website:
Inspire Coding

Discussion

pic
Editor guide