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
And you can check the source code on GitHub as well.
Have a nice day :)
More Android tutorials
If you would like to do more Android tutorials like this, then visit my website:
Top comments (0)