Instruction
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Exploring Built-in Components
Before looking at how you can clean up the GitHub repo app using components, it’s a good practice to explore some of the foundational components that Jetpack Compose ships with.
Exploring the Image Component
You can use the Image component to display a graphic on your screen. To load an image from the disk (JPEG, PNG or WEBP), use the painterResource by passing the image reference as a parameter.
Image(
painter = painterResource(id = R.drawable.ice_cream),
contentDescription = "Vanilla ice cream"
)
@Composable
fun Image(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
Displaying Vector Images
VectorDrawables is the standard API used when you want to display a vector asset in your app. These vectors are usually icons.
Image(
painter = painterResource(id = R.drawable.ic_add),
contentDescription = "Add button"
)
Exploring Buttons
You’ve already covered buttons a few times in the previous lessons, but it’s time you covered all the different types of buttons compose offers and where you should use them.
Filled Button
A filled button is the basic Button component that you’ve used so far. It’s filled with a solid color by default. Following is a simple example of a filled button:
@Composable
fun FilledButtonExample() {
Button(onClick = { onClick() }) {
Text("Filled button")
}
}
Filled Tonal Button
A filled tonal button is filled with a tonal color based on the material design spec by default. The following snippet shows an example of the FilledTonalButton component:
@Composable
fun FilledTonalButtonExample() {
FilledTonalButton(onClick = { onClick() }) {
Text("Filled tonal button")
}
}
Elevated Button
An elevated button has a shadow that represents the elevation effect by default. It’s an outlined button with a default shadow. Here’s an example of how the ElevatedButton component is used:
@Composable
fun ElevatedButtonExample() {
ElevatedButton(onClick = { onClick() }) {
Text("Elevated button")
}
}
Outlined Button
An outlined button has no color fill but comes with an outline by default. Here’s an example of the same:
@Composable
fun OutlinedButtonExample() {
OutlinedButton(onClick = { onClick() }) {
Text("Outlined button")
}
}
Text Button
Finally, the text button component appears only as text. By default, it has no fill, outline or elevation. However, it still has the necessary interaction indicators to differentiate it from a text component with a clickable modifier.
@Composable
fun TextButtonExample() {
TextButton(onClick = { onClick() }) {
Text("Text button")
}
}
Exploring the Switch Component
The Switch component allows users to toggle between a checked and unchecked state. You can use the switch to let users:
@Composable
fun Switch(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
thumbContent: (@Composable () -> Unit)? = null,
enabled: Boolean = true,
colors: SwitchColors = SwitchDefaults.colors(),
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource()
},
)
@Composable
fun SwitchExample() {
var checked by remember { mutableStateOf(true) }
Switch(
checked = checked,
onCheckedChange = {
checked = it
})
}
