Reading Time: 7 minutes
In this tutorial we are going to show you how you can create easily a Toast message with a custom layout like below.

Step 1 – Create new project
Our first step is to create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.
Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.
This tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.
From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.
If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉
When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.
Step 2 – Create a simple layout
So, open the activity_main.xml file from the res->layout folders and replace there the XML code with the below one.
<?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:text="Inspire Coding"
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_defaultToast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Default Toast"
app:layout_constraintTop_toBottomOf="@+id/et_message"
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>
The layout
You can close the layout file, because we won’t need it anymore in this tutorial.
Step 3 – Create a default Toast
First of all, before we gonna show you, how you can create a custom Toast, we should talk about, how you can create a deafult Toast message. It is very easy.
What you need, is only
-
-
- the context,
- the message
- and the duration of the Toast‘s visibility.
-
So, copy and paste the below code after the onCreate() method of the MainActivity.
private fun showDefaultToast(message: String)
{
Toast.makeText(
this,
message,
Toast.LENGTH_SHORT
).show()
}
Default Toast message
This method will take a String, what will be the message of the Toast. So, what we should do now, is to call this method inside of the click listener of the default Toast‘s Button. Paste the below few lines at the end of the onCreate() method.
btn_defaultToast.setOnClickListener {
showDefaultToast(et_message.text.toString().trim())
}
Click listener
Step 4 – Position the default Toast
In the next step, we are going to talk about how we can change the default position of a Toast message. As you saw in the very last step, the default position of a Toast is at the bottom of the screen with some margin.
We can change it using by setting its gravity attribute. For this we can use the Gravity::class. This class has many singleton integer variables, but now we gonna use only four
-
-
- TOP: It sets the Toast to the top of the screen
- BOTTOM: This sets to the bottom.
- LEFT: … to the left
- RIGHT: and to the right.
-
So, copy and paste the below method after the onCreate() method.
private fun showPositionedToast(message: String)
{
val toast = Toast.makeText(
this,
message,
Toast.LENGTH_SHORT
)
toast.apply {
setGravity(Gravity.TOP, 0, 300)
show()
}
}
Positioning the Toast
Note
-
-
- We created an instance about the Toast without showing it
- We set its gravity to the top of the screen with 300 pixels offset in vertical orientation.
-
More info: apply
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.In the click listener of the button, which is in the onCreate() method, change the fired method from showDefaultToast() to showPositionedToast().
Step 5 – Make a custom Toast
To create a custom Toast, we have to define a layout, set the message, the gravity and the duration. Looks easy, right? 😎

Create a new icon
Our custom Toast will have a green done mark. So, click with the right mouse button on the res->drawable file, select New and Vector Assets.
In the popup window, click on the Android icon in the row of “Clip Art” and search for the “done” icon. Then, name the icon as “ic_done_green”. Set the color of the icon: #78C257, then click on the “Next” and “Finish” buttons.
Shape of the Toast
As you can see, the Toast has rounded corners, a green border and a light green background. To achieve this effect, we have to create an xml file, where we can define them.
So, click again on the res->drawable folders with the right mouse button, select New and the Drawable resource file option. Name the file as “shape_roundedcorners”.
Next, replace there the code with the below one.
<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>
Shape of the background
Thenafter, define the below colors in the colors.xml file, what you can find in the res -> values folders.
-
-
- green: #78C257
- light_green: #B9D7AC
-
Create the layout
To create a new layout, click with the right mouse button on the layout folder, what you can find in the res directory. Then select New, and Layout Resource File. In the popup window name the new xml layout as “custom_toast”. Then, copy and paste the below lines into our new layout file.
<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>
Layout of the custom Toast
Show the custom Toast
Before we can test again the app, we have to do two more things.
Create the Toast
First, as we have done it before, we are going to define a new method, which needs a String message as the only argument. So, open the MainActivity::class and paste the below method after the onCreate() method.
private fun showCustomToast(message: String)
{
// 1
val layout = layoutInflater.inflate (
R.layout.custom_toast,
findViewById(R.id.cl_customToastContainer)
)
// 2
val textView = layout.findViewById(R.id.tv_message)
textView.text = message
// 3
Toast(this).apply {
setGravity(Gravity.BOTTOM, 0, 40)
duration = Toast.LENGTH_LONG
view = layout
show()
}
}
showCustomToast()
Note
-
-
- We have to inflate the previously created layout using the layoutInflater which is available because of the Activity::class.
- After, when we have already the inflated layout, we can find its view. In our case we will set the text of the TextView of the messsage.
- The last step is to create a new instance about the Toast::class. Then, using its apply extension function we set the gravity, the duration and the layout. Inside of apply, we can call the show() method as well.
-
Add the click listener
Next, we have to call the above method when we click on the “Custom Toast” Button. For this, we will implement its click listener inside of the onCreate() method.
btn_customToast.setOnClickListener {
showCustomToast(et_message.text.toString().trim())
}
Click listener of the button
Use extension function
After figuring out how we can create and show our custom Toast message, we are going to change the game a bit.
Kotlin has many features, which help the programmers’ life. One from them is extension functions. We can extend a class and create new functionality without having to inherit from the class. This is done via special declarations called extensions. Such functions are available for calling in the usual way as if they were methods of the original class.
Using extension function, we can use the same function everywhere in our application.
Create new package and file
Extend the Toast class
Next, we are going to extend the Toast::class. The body will be almost the same, what have defined in the showCustomToast() method above. The difference is, that we have to pass the context, and insteed of Toast(this), we can just use this and call on it the apply scope function.
So, the code looke like below.
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(R.id.tv_message)
textView.text = message
this.apply {
setGravity(Gravity.BOTTOM, 0, 40)
duration = Toast.LENGTH_LONG
view = layout
show()
}
}
The extension function
Usage of the extension function
Now, open the MainActivity and go to the click listener of the custom Toast Button. Comment out there the call of the showCustomToast() method and paste after that the below lines.
Toast(this).showCustomToast (
et_message.text.toString().trim(),
this
)
Usage of the extension function
Note how we can use our own extension function. We can call it on the Toast::class by passing in the message and the context.
The Toast::class class has 2 public constructor. From them we use here, which needs only the context.
Run the app
Finally, run again the app. It should work like before. The difference is, that we can use this extension funtion in other activities and fragments as well.
GitHub
The source code is available on GitHub.
Questions
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉 Have a nice a day! 🙂
Woow, great article 🙂
Thank you for the past, I was looking for this for a while 🙂