Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. Compose is built to support material design principles. Many of its UI elements implement material design out of the box. In this article, we will explain how you can create Material design buttons using Jetpack Compose. Below is the sample picture to show what we are going to build.
Step by Step Implementation
Step 1: Create a new project
To create a new project in Android Studio using Jetpack Compose please refer to How to Create a New Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with MainActivity.kt
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcomposepractice.ui.theme.JetpackComposePracticeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContent {
JetpackComposePracticeTheme {
// A surface container using the 'background' color from the theme
Surface(color = Color.White) {
Column {
// call the function which contains all the buttons
allButtons()
}
}
}
}
}
} // In order to use compose properties annotate with @Compose @Composable fun allButtons() { Text(text = "Buttons" , style = typography.h5, modifier = Modifier.padding( 8 .dp))
// Here we are using Row to add
// two buttons in single Column
// You can change it as per your need
Row {
// Create a Main Button or Normal Button
Button(onClick = {}, modifier = Modifier.padding( 8 .dp)) {
Text(text = "Main Button" )
}
// Create a Text Button
TextButton(onClick = { /*TODO*/ }, modifier = Modifier.padding( 8 .dp)) {
Text(text = "Text Button" )
}
}
Row {
// Elevated Button
Button(
onClick = { /*TODO*/ },
modifier = Modifier.padding( 8 .dp),
elevation = ButtonDefaults.elevation()
) {
Text(text = "Elevated Button" )
}
// Rounded Button
Button(
onClick = { /*TODO*/ },
modifier = Modifier.padding( 8 .dp),
shape = RoundedCornerShape( 20 .dp)
) {
Text(text = "Rounded" )
}
}
Row {
// Outlined Button
// add border field and set BorderStroke and its color
OutlinedButton(
onClick = { /*TODO*/ },
border = BorderStroke( 1 .dp, Color.Red),
modifier = Modifier.padding( 8 .dp)
) {
Text(text = "Outlined" )
}
// Outlined Button with icon
// add border field and set BorderStroke and its color
// add Icon field
OutlinedButton(
onClick = { /*TODO*/ },
border = BorderStroke( 1 .dp, Color.Red),
modifier = Modifier.padding( 8 .dp)
) {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null ,
modifier = Modifier.padding(end = 4 .dp)
)
Text(text = "Outlined Icon" )
}
}
Row {
// Icon Button
// Icon on the left of text
Button(onClick = {}, modifier = Modifier.padding( 8 .dp)) {
Row {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null ,
modifier = Modifier.padding(end = 4 .dp)
)
Text(text = "Icon Button" )
}
}
// Icon Button
// Icon on the Right of text
Button(onClick = {}, modifier = Modifier.padding( 8 .dp)) {
Text(text = "Icon Button" )
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null ,
modifier = Modifier.padding(start = 4 .dp)
)
}
}
//custom background buttons
// create a variable mainButtonColor and define background Color and content Color
val mainButtonColor = ButtonDefaults.buttonColors(
backgroundColor = Color.Magenta,
contentColor = MaterialTheme.colors.surface
)
Row {
Button(colors = mainButtonColor, onClick = {}, modifier = Modifier.padding( 8 .dp)) {
Text(text = "Custom colors" )
}
}
Row {
// Create variable horizontalGradient and inside color property define start and end color
val horizontalGradient = Brush.horizontalGradient(
colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),
0f,
250f
)
// Horizontal gradient Button
// Create a text and set its background to horizontalGradient that we created above
Text(
text = "Horizontal gradient" ,
style = typography.body2.copy(color = Color.White),
modifier = Modifier
.padding( 12 .dp)
.clickable(onClick = {})
.clip(RoundedCornerShape( 4 .dp))
.background(brush = horizontalGradient)
.padding( 12 .dp)
)
// Create variable verticalGradient and inside color property define top and bottom color
val verticalGradient = Brush.verticalGradient(
colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),
startY = 0f,
endY = 100f
)
// Vertical gradient Button
// Create a text and set its background to verticalGradient that we created above
Text(
text = "Vertical gradient" ,
style = typography.body1.copy(color = Color.White),
modifier = Modifier
.padding( 12 .dp)
.clickable(onClick = {})
.clip(RoundedCornerShape( 4 .dp))
.background(brush = verticalGradient)
.padding( 12 .dp)
)
}
} // To see the preview annotate with @Preview to the function @Preview @Composable fun DefaultPreview() { JetpackComposePracticeTheme {
Column {
allButtons()
}
}
} |
Output: