How to Create a button using Kotlin

Today, you’ll learn how to create a button or add a button in a mobile application using Kotlin. Besides this, we will add a small event so that you can have a better understanding.

In the example, we are also going to intend to transfer the control from one activity to another seamlessly.

More like this:

• Android: How to Create Progress Bar in Kotlin

Before diving into the example, let me tell you that there are a few attributes that you can modify or set in the button to make it more responsive. Those aren’t discussed here because it’s better if you learn about those throughout the process.

How to Add a button using Kotlin

Below are the steps to create our button in Kotlin.

Step 1. Create a new Android Project in Android Studio with your desired name.

Step 2. In the activity_main.xml, copy the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">
    <Button
android:id="@+id/Button"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Click Here"
android:layout_centerInParent="true"
android:visibility="visible" tools:visibility="visible"/>
</RelativeLayout>

This code will create a prototype of a button. To make it functional, you need to follow the rest of the steps.

Step 3. Now, open the MainActivity.kt file and copy the following code

package com.example.AddButton

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast

class MainActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle ? ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val Button = findViewById < Button > (R.id.Button)

        Button ? .setOnClickListener() {
            Toast.makeText(this, "Button is clicked ",Toast.LENGTH_LONG).show()
val intent: Intent = Intent(this, Second::class.java)
startActivity(intent)
finish()
}
}
}"

In this piece of code, we have connected the button of the XML file to the button object of the Kotlin file. It is done by using the statement:

val Button = findViewById<Button>(R.id.Button)

Here id is connecting both the files and  findViewById() is the method to do so. Whenever you want to connect, Kotlin code with the XML prototype, you have to use this function.

Apart from this, a setOnClickListner() method is used so that whenever a click is detected, the setOnClickListner() block will be executed.
[adinserter block=”2″] In this block, we are showing a message “Button is clicked” using the Toast method. Later, with intent, the activity is changed.

Step 4. Create another empty activity and name it “Second.”

Step 5. Copy the following code and past it in acitivity_Second.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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=".first">
    <Button
android:id="@+id/Button"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Click Here to Go Back"
android:layout_centerInParent="true"
android:visibility="visible" tools:visibility="visible"/>
</RelativeLayout>

Step 6. Open its respective kotlin file and copy the following code:

package com.example.AddButton

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast

class MainActivity: AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle ? ) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val Button = findViewById < Button > (R.id.Button)

    Button ? .setOnClickListener() {
      Toast.makeText(this, "Button is clicked ",Toast.Lpackage com.example.AddButton)

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast

class Second : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_Second)
val Button = findViewById<Button>(R.id.Button)

Button?.setOnClickListener(){
Toast.makeText(this,"
      ProgressBar is gone ", Toast.LENGTH_LONG).show()
val intent: Intent = Intent(this, MainActivity::class.java)
startActivity(intent)
finish()
}
}

}ENGTH_LONG).show()
val intent: Intent = Intent(this, Second::class.java)
startActivity(intent)
finish()
}
}
}"

In this code, we have applied the same methods that we had implemented in the MainAcitivity.kt.

Step 7. Build the App. You will see the following interface on your Application.

Note: Each Activity is activated with a click.

First Activity:

Second Activity:

Third Activity:

Final Notes

After this, I hope you won’t face any problems related to buttons. Now you can easily add buttons to your mobile Application using Kotlin. Besides this, you can change events as per your requirements.

The Mobile App development process is prone to errors, and its debugging process is also quite hectic, so you should keep eliminating the errors the moment you get them. If you can’t find any solution to any of the errors, you can drop down your problem with the error message. We will look into it and will provide the solution.

CodingPanel Editor

Blog Hero