KOTLIN-Create a Clickable Toast

KOTLIN-Create a Clickable Toast

In my Last post I explained how to create a custom toast. In this post I will explaining how to make a the toast clickable. I will be creating a brand new toast, so lets begin.

GET STARTED

Open your android studio and create a normal project, make sure you use an empty Activity, and your activity should be name MainActivity, your layout should also be named activity_main.xml.

DESIGN YOUR activity_main.xml

Open your activity_main.xml layout file and add this piece of code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/id_btn_show_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/show_toast"
        android:layout_gravity="center"/>
</FrameLayout>

In the activity_main.xml layout file we just added a button view to so that, when the user click the button, it display will display the toast. I also gave it an id of "id_btn_show_toast"

DESIGN YOUR toast_popup.xml

Create another layout and name it toast_popup, this will be the design of the toast, make sure it looks like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:paddingHorizontal="10dp"
    android:id="@+id/id_ll_toast_layout"
    android:background="@color/cardview_dark_background">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:id="@+id/id_tv_toast_message"
        android:text="@string/app_name"
        android:gravity="center_vertical"
        app:drawableStartCompat="@drawable/ic_toast"
        android:textColor="@color/white"/>
</LinearLayout>

You will notice that we gave the TextView and id of id_tv_toast_message and the LinearLayout an id of id_ll_toast_layout.

CREATE THE Todo object class

In this next stage I will be creating a todo object class. We will be using an object class because it will make using the toast more flexible. To create the Todo class, create an object class and name it Todo, then add this piece of code to it.

object Tool {
    fun showToast(
        activity: Activity,
        message: String,
        sec:Long=2,
        gravity: Int = Gravity.BOTTOM,
        lambda:((tv:TextView, view: View)->Unit)? = null
    ) {
        val toastlayout = LayoutInflater.from(activity).inflate(R.layout.toast_popup, activity.findViewById(R.id.id_ll_toast_layout))
        val id_tv_toast_message: TextView = toastlayout.findViewById(R.id.id_tv_toast_message)
        id_tv_toast_message.text = message
        val pw = PopupWindow(
            toastlayout,
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT, true
        )
        pw.showAtLocation(toastlayout, gravity, 0, 200)
        Handler(Looper.getMainLooper())
            .postDelayed(
                {
                    pw.dismiss()
                }, sec*1000)
        lambda?.invoke(id_tv_toast_message, toastlayout)
    }
}

Step1

Inside the Todo class I created a method called showToast which has a activity that will help the toast display inside the right activity, and a message that will be the message to display inside the toast, and a sec that will tell the toast the number of seconds it will be visible on the screen, and a gravity that will display toast at a particular spot at the screen, and finally a lambda function that will enable us customize the toast and make it clickable, These parameters will be use by the showToast method

Step2

I created a toastlayout with the toast_popup.xml layout file that was created earlier. The LinearLayout that was inside the toast_popup.xml layout file has an id of id_ll_toast_layout. And the I initialize the TextView that was also created inside the toast_popup.xml, and set the message to display in the TextView

Step3

This time I did not use the "Toast" to create the toast but a "PopupWindow". Normally Toast are not clickable so a PopupWindow was use to create the toast. The toastlayout that initialize earlier was added to the PopupWindow and the layout width and layout height was set to WRAP_CONTENT because I what the PopupWindow to be as small as possible and it should also wrap around the message. By default a PopupWindow will display at the middle of the screen, and I don't want that, so with the "pw.showAtLocation(toastlayout, gravity, 0, 200)" I gave it a gravity.

Step4

This is pretty straight forward, The Handler that was created is a simple thread that will make the PopupWindow display for the number of seconds that was provided in the parameters, which it's default is 2.

Step5

The lambda was by default in the parameters set to null, that is why we are using it like this. This also helps to prevent a null error when we try to use or not use the lambda function.

USING THE Clickable Toast

We are done with the Todo object class. Now open your MainActivity class and add this piece of code, your MainActivity class should look something like this.

class MainActivity : AppCompatActivity() {
    private lateinit var id_btn_show_toast: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        id_btn_show_toast = findViewById(R.id.id_btn_show_toast)
        clickButtonListener()
    }

    private fun clickButtonListener() {
        id_btn_show_toast.setOnClickListener{
            Tool.showToast(this, "Click me", lambda = {_,view ->
                view.setOnClickListener {
                    Tool.showToast(this, "Stop Clicking me", gravity = Gravity.TOP)
                    Log.e("Click me", "clickButtonListener: Stop Clicking me")
                }
            })
        }

    }
}

We created a global instance of the button view that was created in the activity_main.xml layout file, and then initialize it inside the onCreate 'if you are on a Activity class' or on a onCreateView 'if you are on an Fragment class'. Then create a clickButtonListener method that will house the toast clicking. Inside the clickButtonListener method we checked if the button is been click, and if so we display the toast that says "Click me". We also checked if the toast is been click and if the toast is been clicked we display another toast that says "Stop Clicking me" and we set the gravity to "TOP" because we want the toast to appear at the top of the screen.

SUMMARY

So that is it. That is how you create your own clickable toast for your app. check my git repository if you may github.com/Ohior/Clickable-toast