Jetpack Compose: Getting Started
Heads up... You've reached locked video content where the transcript will be shown as text.
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.