DEV Community

Cover image for Android - Custom Toast with Kotlin extension function
Inspire Coding
Inspire Coding

Posted on • Edited on • 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>
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

Top comments (0)