Android Compose – Button Shape
In this tutorial, we will learn how to set the shape of a Button in Android Compose.
To set the shape of a Button in Android Jetpack Compose, set shape parameter of the Button with the required Shape object.
Button(
shape = CircleShape,
onClick = {},
) {
Text("Submit")
}
Example
In this example, we have UI with a Button. The button has the text Submit
. And we set the shape of this Button to CircularShape.
Create a Project in Android Studio with empty compose activity template, and modify MainActivity.kt file as shown in the following.
MainActivity.kt
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
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 : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(20.dp)
.fillMaxWidth()) {
Button(
shape = CircleShape,
onClick = {},
) {
Text("Submit")
}
}
}
}
}
}
Screenshot
Button – Rectangle Shape
Now, let us change the shape of the button to rectangle by assigning shape parameter with RectangleShape.
Code for Button
Button(
shape = RectangleShape,
onClick = {},
) {
Text("Submit")
}
Screenshot
Button – Cut Corner Shape
To change the shape of the button to “Cut Corner”, assign shape parameter with CutCornerShape object with a specific percent of cut from the corners.
Code for Button
Button(
shape = CutCornerShape(percent = 25),
onClick = {},
) {
Text("Submit")
}
Screenshot
Button – Rounded Corner Shape
Now, let us change the shape of the button to rounded corners by assigning shape parameter with RoundedCornerShape object with corners rounded to specified length.
Code for Button
Button(
shape = RoundedCornerShape(10.dp),
onClick = {},
) {
Text("Submit")
}
Screenshot
Conclusion
In this Android Jetpack Compose Tutorial, we learned how to set shape of a Button using its shape parameter.