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.xmlfile 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
LayoutInflaterwe gonna make instance about the layout - Set the text of the
TextView - Then we can call the
applyscope 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)