Android Button Example [OnClick|Color|Design] in Kotlin

Android Button widget is the most important UI element in the Android app. You can perform Operations by button click like send Email, Message, WhatsApp, etc all this want action where Button is doing same. The button widget comes with default design and color schema but you can change its color, design, size, etc according to your requirements. It also has some attribute which already implemented on Android SDK API, so you have to just configure it, nothing else. In this Android button Example, we will learn the basics of the Button widget.

A button can have text or an icon or both text and an icon. When a user touches or a click on the button, that time action makes that communicate with other component or do something.

Text Button 

Simple button with text only. Code for text button is below –

<?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/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>

Text + Image Button 

Text and an icon – use the Button with the android:drawableLeft attribute, don’t forget add images “baseline_star_black.png” mipmap image resource.

<?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/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:drawableLeft="@mipmap/baseline_star_black"
        android:text=" LIKE "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>

Button ON Clicks 

If user click on a Button then Button object receive on-click event.

To perform a event , add the android:onClick attribute to the <Button> element in your XML layout.

The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

For example – layout with a button using android:onClick:

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:drawableLeft="@mipmap/baseline_star_black"
        android:text=" LIKE "
        android:onClick="likeMe"/>

 The Activity which hosts that layout have following method to handles the click event (code in Kotlin)

fun likeMe(view : View){
        Toast.makeText(this,"ONclick Like",Toast.LENGTH_LONG).show()
    }

Button – OnClickListener

You can also declare the click event handler programmatically rather than in an XML layout.

To declare the event handler programmatically by calling setOnClickListener(View.OnClickListener). For example: you need button id and set Listener.

button2.setOnClickListener(View.OnClickListener {
            Toast.makeText(this,"OnClickListener",Toast.LENGTH_LONG).show()
        })

Button Color attribute – android:background

You can change button color by using android:background attribute.

<Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#73bf70"
        android:text="Button" />

Let’s Build a Complete Example of Android Button :

Step 1. Create new project “Build Your First Android App in Kotlin“

Step 2. Add the following code in “activity_main.xml” resource file

Don’t forget add image file “baseline_star_black.png“

<?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/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:drawableLeft="@mipmap/baseline_star_black"
        android:onClick="likeMe"
        android:text=" LIKE ON Click "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="44dp"
        android:text="Button - OnClickListener"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:background="#73bf70"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
</android.support.constraint.ConstraintLayout>

Step 3. Open“MainActivity.kt” and add following code 

package `in`.eyehunt.androidbutton

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        //OnClickListener button
        button2.setOnClickListener(View.OnClickListener {
            Toast.makeText(this,"OnClickListener",Toast.LENGTH_LONG).show()
        })
    }

    // OnClick method button
    fun likeMe(view : View){
        Toast.makeText(this,"ONclick Like",Toast.LENGTH_LONG).show()
    }
}

Step 4. Now Run the application, in emulator or On you android device

Output screenshot Android Button example :

Download source code Android Button in kotlin

https://github.com/EyeHunts/AndroidButton

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin