Jetpack Compose - Buttons

All buttons: When choosing the right button for action, consider the level of emphasis each button type provides.

This Button Jetpack Compose component has two compulsory attributes. OnClick and text.


package
com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeExampleTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainContent()
}
}
}
}
}



@Composable
fun MainContent() {
Column(
modifier = Modifier
.padding(20.dp)
.verticalScroll(rememberScrollState())
) {

// * Button
Button(onClick = { /* Do something! */ }) { Text("Button") }

// * Elevated Button
ElevatedButton(onClick = { /* Do something! */ }) { Text("Elevated Button") }

// * Filled Tonal Button
FilledTonalButton(onClick = { /* Do something! */ }) { Text("Filled Tonal Button") }

// * Outlined Button
OutlinedButton(onClick = { /* Do something! */ }) { Text("Outlined Button") }

// * Text Button
TextButton(onClick = { /* Do something! */ }) { Text("Text Button") }

// * Button With Icon Sample
Button(onClick = { /* Do something! */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.IconSize))
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text("Like")
}

// * Icon Button Sample
IconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}

// * Icon Toggle Button Sample
var checked by remember { mutableStateOf(false) }
IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
val tint by animateColorAsState(if (checked) Color(0xFFEC407A) else Color(0xFFB0BEC5))
Icon(Icons.Filled.Favorite, contentDescription = "Localized description", tint = tint)
}

// * Button cut corner shape
Button(
onClick = { /*TODO*/ }
, shape = CutCornerShape(topStart = 12.dp, bottomEnd = 12.dp)
) {
Text(
text = "Button cut corner shape",
Modifier.padding(12.dp))
}

// * Rounded corners button
Button(
onClick = { /*TODO*/ }
, shape = RoundedCornerShape(20.dp)
) {
Text(
text = "Rounded corners button",
Modifier.padding(12.dp))
}

}
}



..

GET source code on Github:


Comments