Android Custom Toast

Introduction

In Android development, a Toast is a small message that pops up on the screen to inform the user without interrupting their current activity. Customizing a toast allows developers to enhance the user experience by displaying richer content, such as images and styled text.

This tutorial will guide you through creating a custom toast in Kotlin, which can be particularly useful for displaying notifications or messages that require more context than what a standard toast can provide. You will learn how to create a layout for your custom toast, how to programmatically display it, and how to customize its appearance.

When to Use Custom Toasts

Custom toasts are beneficial in situations like:

• ✅ Displaying messages that require a visual element (e.g., an icon).
• ✅ Providing feedback after user actions (e.g., after submitting a form).
• ✅ Enhancing the aesthetic appeal of your app.

Concept Explanation

What is a Custom Toast?

A custom toast is a tailored version of the standard toast message that allows you to define your layout. Think of it as a personalized note you send someone, rather than a generic text message. You can include images, colors, and specific formatting to make your message stand out.

Why Use Custom Toasts?

Using custom toasts provides the following advantages:

• ✅ Visual Appeal: Custom layouts can make your app more attractive.
• ✅ Informative: You can convey more complex information than a standard text message.
• ✅ User Engagement: Engaging visuals can capture user attention more effectively.

Comparison to Standard Toasts

Syntax Section

To create a custom toast in Kotlin, you need to follow these basic steps:

1. Create a layout file for the custom toast.
2. Inflate the layout in your activity or fragment.
3. Set the view of the Toast to the inflated layout.
4. Display the Toast with desired configurations.

Here’s the basic syntax structure you will follow in your Kotlin code:

val customToast = Toast(applicationContext)
customToast.duration = Toast.LENGTH_LONG // Set duration
customToast.setGravity(Gravity.CENTER, 0, 0) // Set position
customToast.view = layout // Set custom layout
customToast.show() // Show the toast

Examples

Let’s walk through several complete examples of creating custom toasts in Kotlin.

Example 1: Basic Custom Toast with Text

Step 1: Create Layout for Custom Toast

Create a new XML layout file called custom_toast.xml in the res/layout folder:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:background="@drawable/toast_background">

    <TextView
        android:id="@+id/toast_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />
</LinearLayout>

Step 2: MainActivity.kt

Now, implement the toast in your MainActivity.kt:

package com.example.customtoast

import android.graphics.Color
import android.os.Bundle
import android.view.Gravity
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button: Button = findViewById(R.id.showToastButton)
        button.setOnClickListener {
            showCustomToast("Hello, this is a custom toast!")
        }
    }

    private fun showCustomToast(message: String) {
        val layoutInflater = layoutInflater
        val view = layoutInflater.inflate(R.layout.custom_toast, null)
        val toastMessage = view.findViewById<TextView>(R.id.toast_message)
        toastMessage.text = message

        val toast = Toast(applicationContext)
        toast.duration = Toast.LENGTH_LONG
        toast.setGravity(Gravity.CENTER, 0, 0)
        toast.view = view
        toast.show()
    }
}

Output:

[Custom Toast displayed in the center with the message "Hello, this is a custom toast!"]

Example 2: Custom Toast with Image

Step 1: Update Layout

Modify the custom_toast.xml to include an ImageView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:background="@drawable/toast_background">

    <ImageView
        android:id="@+id/toast_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/sample_image" />

    <TextView
        android:id="@+id/toast_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />
</LinearLayout>

Step 2: Update MainActivity.kt

Update the showCustomToast method to set the image:

private fun showCustomToast(message: String) {
    val layoutInflater = layoutInflater
    val view = layoutInflater.inflate(R.layout.custom_toast, null)
    val toastMessage = view.findViewById<TextView>(R.id.toast_message)
    toastMessage.text = message
    val toastImage = view.findViewById<ImageView>(R.id.toast_image)
    toastImage.setImageResource(R.drawable.sample_image) // set your image resource

    val toast = Toast(applicationContext)
    toast.duration = Toast.LENGTH_LONG
    toast.setGravity(Gravity.CENTER, 0, 0)
    toast.view = view
    toast.show()
}

Output:

[Custom Toast displayed with an image and the specified message]

Example 3: Customizing Toast Position and Style

You can further customize the position and style of your toast by using different gravity settings and background styles.

private fun showCustomToast(message: String) {
    val layoutInflater = layoutInflater
    val view = layoutInflater.inflate(R.layout.custom_toast, null)
    val toastMessage = view.findViewById<TextView>(R.id.toast_message)
    toastMessage.text = message

    val toast = Toast(applicationContext)
    toast.duration = Toast.LENGTH_SHORT
    toast.setGravity(Gravity.TOP or Gravity.CENTER_HORIZONTAL, 0, 100) // Position at the top
    toast.view = view
    toast.show()
}

Output:

[Custom Toast displayed at the top of the screen with the message]

Common Mistakes

1. Not Inflating the Layout: Beginners often forget to inflate the custom layout using layoutInflater.inflate. Always ensure you inflate your layout before setting it to the toast.

Wrong:

   toast.view = R.layout.custom_toast // Incorrect usage

Correct:

   val view = layoutInflater.inflate(R.layout.custom_toast, null)
   toast.view = view // Correct usage

1. Forgetting to Set Gravity: If you do not set the gravity, the toast will default to the bottom of the screen, which might not be your desired position.
2. Using Incorrect References: Ensure that you reference the correct IDs when accessing views in your custom layout. Mismatching IDs will lead to NullPointerException.

Best Practices

• ✅ Limit Toast Duration: Use Toast.LENGTH_SHORT when possible to avoid overwhelming users.
• ✅ Design for Accessibility: Ensure that your messages are readable and that the toast is displayed long enough for users to read.
• ✅ Use Consistent Styling: Maintain a consistent visual style for your toasts throughout your app to enhance user experience.

Practice Exercises

1. Create a Custom Toast with a Countdown Timer: Display a custom toast that counts down from 5 seconds to 1 second, updating the message each second.
2. Add a Button to Change the Toast Background Color: Implement functionality to change the background color of the custom toast each time the button is clicked.
3. Display a Custom Toast with Multiple Lines: Modify the toast to include more than one line of text with line breaks.

By following these exercises, you will solidify your understanding of creating and customizing toasts in Kotlin for Android. Happy coding!