Jetpack Compose: Getting Started
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
Design systems are a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications with less time and effort.
Create a Card
Let us wrap our search TextField in a Card Composable.
@ExperimentalMaterial3Api
@Composable
fun SearchBar() {
Card(
modifier = Modifier
.fillMaxWidth()
.height(75.dp)
.padding(end = 16.dp, start = 16.dp, top = 10.dp),
shape = RoundedCornerShape(100.dp),
) {
TextField(
modifier = Modifier.fillMaxSize(),
value = "",
onValueChange = { "" },
leadingIcon = { Image(painter = painterResource(id = R.drawable.ic_search), contentDescription = "search bar") },
trailingIcon = { Image(painter = painterResource(id = R.drawable.ic_filter), contentDescription = "filter") },
placeholder = {
Text(
text = "Search for food ...",
modifier = Modifier
.fillMaxHeight(),
textAlign = TextAlign.Center,
)
},
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
),
)
}
}
Floating Action Button
A floating action button (FAB) is a circular button that triggers the primary action in your app’s UI. This button floats above the content of the screen and usually resides on one corner of the screen.
Add a Floating Action Button
Let us refactor our FoodItem Composable to use a FloatingActionButton instead of a Button.
@Composable
fun FoodItem(
food: Food,
id: Int = 0,
) {
Card(
modifier = Modifier
.width(200.dp)
.clickable {
}
.padding(end = 8.dp),
shape = RoundedCornerShape(corner = CornerSize(10.dp))) {
Column(modifier = Modifier
.padding(bottom = 5.dp)
.fillMaxWidth()) {
Image(
modifier = Modifier
.fillMaxWidth()
.height(150.dp),
painter = painterResource(id = food.banner),
contentDescription = "image",
contentScale = ContentScale.Crop
)
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(8.dp))
Column(
modifier = Modifier
.padding(horizontal = 5.dp)
.fillMaxWidth()) {
Text(
modifier = Modifier,
text = food.name,
style = MaterialTheme.typography.bodyLarge,
fontStyle = FontStyle.Normal,
fontWeight = FontWeight.ExtraBold)
Row(
modifier = Modifier
.padding(top = 5.dp),
verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.drawable.ic_clock),
contentDescription = "Clock",
colorFilter = ColorFilter.tint(
color = MaterialTheme.colorScheme.onBackground
)
)
Text(
modifier = Modifier.padding(start = 3.dp),
text = "${food.waitTime} mins",
style = MaterialTheme.typography.bodySmall)
}
Spacer(modifier = Modifier
.height(2.dp))
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically) {
Text(
text = "$${food.originalPrice}",
fontWeight = FontWeight.ExtraBold,
style = MaterialTheme.typography.bodyLarge
)
FloatingActionButton(
onClick = { /*TODO*/ },
shape = CircleShape,
containerColor = MaterialTheme.colorScheme.tertiary) {
Image(
painter = painterResource(id = R.drawable.ic_add),
contentDescription = "Add",
colorFilter = ColorFilter.tint(
color = contentColorFor(MaterialTheme.colorScheme.tertiary)))
}
}
}
}
}
}
Scaffold Layout
The Scaffold Composable is a layout component that implements the basic material design visual layout structure. It is used to implement the top-level structure of a screen in your app.
Add a Scaffold Layout
@Preview(showBackground = true)
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen() {
Scaffold(
modifier = Modifier.fillMaxSize(),
topBar = { ProfileBar() },
bottomBar = {
Text(text = "Bottom Bar")
}){ paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues = paddingValues),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
){
Text(text = "Home Screen")
}
}
}
Conclusion
In this lesson, we have looked at how to implement a few other Material 3 components into our application. We have also got a better understanding of how the Scaffold Layout works.