Android How to add Button on Click Listener using Kotlin

Android How to add Button on Click Listener using Kotlin

Introduction Button Click Listener with Kotlin

In this article, we will learn How to handle on Click listener for the Buttons in our Android App using Kotlin Programming Language.

For our demo app, we have Four Buttons and a TextView to display a message. We will display different messages on click of each button. Following is the demo what will create in this article.

If you need to download the Project file, the download link is available at the bottom of this article.

Following is the development environment details

  • Coding Language: Kotlin

We will start with an empty activity. The main container for our empty activity is the constraint layout. As we mentioned above for our demo app, we need to add four buttons. Let’s add four buttons with left constraint with the parent. For the first button, add the top constraint with the parent. For the next button, add a top constraint with the first one and so on. Finally, add a TextView with right and top constraint with the parent and the left constraint with any of the buttons.

Following is the final code for our activity_main.xml file.

Code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="Need Help ?"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="Hello vLemon!"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="Free Android Tutorial"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="Ask Question"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

</android.support.constraint.ConstraintLayout>

We are done with the activity_main.xml or the related layout changes. Next, we need to edit the MainActivity.kt file. In our MainActivity.kt file we need to first define 4 variables. One for TextView and reaming is for the three buttons. In the onCreate method, we will first initialize the TextView and all the buttons. Next, we are ready to set an on Click Listener. We are sharing three different ways to set the on click listener in the Kotlin Programming language. In all the methods we are calling a function. In function, we are displaying a message and then we are changing the button color. Following is the code for MainActivity.kt file.

Code

package com.vlemonn.demo.kotlinbuttonclicklistener

import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    lateinit var textView: TextView
    lateinit var button1: Button
    lateinit var button2: Button
    lateinit var button3: Button

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

        /* Assign */
        textView=findViewById(R.id.textView)
        button1=findViewById(R.id.button1)
        button2=findViewById(R.id.button2)
        button3=findViewById(R.id.button3)

        /* Add Listener Method 1 */
        button1.setOnClickListener{
            buttonClickOne()
        }

        /* Method 2 to define set on click listener */
        button2.setOnClickListener(object: View.OnClickListener{
            override fun onClick(v: View?)
            {
                buttonClickTwo()
            }
        })

        /* Method 3 to define set on click listener */
        button3.setOnClickListener { _-> buttonClickThree() }

    }

    fun buttonClickOne()
    {
        textView.text="Visit our Contact us Page: https://vlemon.com/ContactUs"
        button1.setBackgroundColor(Color.RED)
    }

    fun buttonClickTwo()
    {
        textView.text="Check Tutorial Index: https://vlemon.com/Tutorial/Android"
        button2.setBackgroundColor(Color.GREEN)
    }
    fun buttonClickThree()
    {
        textView.text="Ask Question at : https://vlemon.com/AskQuestion"
        button3.setBackgroundColor(Color.BLUE)
    }
}
0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share