
In this article, we’ll learn how to implement OutlinedButton in Jetpack Compose.
Prerequisites:
This article talks about Material 2 Outlined Button. If you want the latest Material 3 version, follow this link.
For this article, create an empty Jetpack Compose project and open MainActivity. Create a composable called MyUI() and call it from the onCreate() method.
// add the following imports
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}
We will write our code in the MyUI().
Jetpack Compose provides OutlinedButton API:
@Composable
@NonRestartableComposable
fun OutlinedButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
elevation: ButtonElevation? = null,
shape: Shape = MaterialTheme.shapes.small,
border: BorderStroke? = ButtonDefaults.outlinedBorder,
colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
onClick – A lambda that is called when the user taps on the button.
modifier – The modifier for changing the button layout.
enabled – If the button is enabled or not. If false, the button will not be clickable.
interactionSource – It is used to observe and customize the interactions. For example, we can disable the ripple effect.
elevation – The shadow below the button. An outlined button typically has no elevation.
shape – The shape of the button.
border – The border around the button.
colors – Button background color.
contentPadding – The space between the button’s container and the content.
content – The content of the button, typically a Text() composable. This is a row scope. So, if you add multiple items, they are placed horizontally.
Let us understand the parameters with use cases.
Simple OutlinedButton Example:
For a simple outlined button, onClick is mandatory.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
}
) {
Text(text = "Click Me")
}
}
Output:

OutlinedButton Size:
We can change the button size using size modifiers like size(), height(), etc.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
modifier = Modifier.size(width = 160.dp, height = 48.dp),
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
}
) {
Text(text = "Click Me")
}
}
Output:

OutlinedButton Colors:
It is easy to change outlined button colors.
Background Color:
We can change the background color using the ButtonDefaults.outlinedButtonColors() method.
@Composable
fun outlinedButtonColors(
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = MaterialTheme.colors.primary,
disabledContentColor: Color = MaterialTheme.colors.onSurface
.copy(alpha = ContentAlpha.disabled)
)
Example:
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
},
colors = ButtonDefaults.outlinedButtonColors(
backgroundColor = Color.Green
)
) {
Text(text = "Click Me")
}
}
Output:

Border Color:
Use the border parameter to change the border color.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
},
border = BorderStroke(
width = 1.dp,
color = Color.Red
)
) {
Text(text = "Click Me")
}
}
Output:

Related: How to Use Colors in Jetpack Compose?
OutlinedButton Text Size and Color:
The Text() composable provides various parameters (like fontSize and color) to customize the text.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
}
) {
Text(
text = "Click Me",
fontSize = 20.sp,
color = Color.Green
)
}
}
Output:

OutlinedButton Shape:
Jetpack Compose provides various shape APIs. We can set the shape using the shape parameter.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
OutlinedButton(
onClick = {
Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
},
shape = RoundedCornerShape(percent = 25),
border = BorderStroke(width = 2.dp, color = Color.Red)
) {
Text(
text = "Click Me",
fontSize = 20.sp,
color = Color.Green
)
}
}
Output:

This is all about OutlinedButton in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.
Related Articles:
- How to Create a FREE WordPress Site (No Hosting & Domain)
- Animations in Jetpack Compose (with Examples)
- How to Check Internet Connection in Android Programmatically?
- 2 Ways to Get the Screen Size in Jetpack Compose
References: