Android Jetpack Compose – Button

Android Jetpack Button composable is used to display a button UI element, and execute code when user clicks on it.

Android Jetpack Compose - Button

Example

In this example, we shall display a Button composable with text Submit Request.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

</>
Copy
package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(20.dp)) {
                    Button(onClick = { }) {
                        Text("Submit Request")
                    }
                }
            }
        }
    }
}

Screenshot

Android Jetpack Compose - Button

When we click on this button, nothing happens, because we have not written any code in it.

Let us display a Toast message when user clicks the button.

MainActivity.kt

</>
Copy
package com.example.myapplication

import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(20.dp)) {
                    Button(onClick = {
                        Toast.makeText(applicationContext, "You clicked the Button.", Toast.LENGTH_LONG).show()
                    }) {
                        Text("Submit Request")
                    }
                }
            }
        }
    }
}

Screenshot

Android Jetpack Compose - Execute code on Button Click

Instead of Toast, you may write your own code to execute when user clicks the button.

Conclusion

In this Android Jetpack Compose Tutorial, we learned what Button composable is, and how to style the Button composable, with the help of individual tutorials for each concept.