Scaffold - Jetpack Compose Tutorial
A scaffold is an API which give a structure of App's UI according to Material Design guidelines. Top App bar, bottom App bar and floating action button can be combined together under scaffold.
What is a scaffold?
A scaffold is an API that provides a layout where top app bar, bottom app bar and floating action button all together can we used without any complexity. If you are a beginner for jetpack compose it is necessary to know about scaffold that provides a structure for UI and organise the consistency between navigation.
There is no need to use any dependency for it if you are using Android Studio jetpack Compose project as it is a part of material design
Top App bar - It displays its elements on top of the screen. We can use it to show app's name, logo and search box. A top app bar can show action, navigation, action and text at the top of App's screen. The latest Material Design Support four types of top app bar center-aligned, small, medium, and large.
Bottom App bar - It is displayed at the bottom of the app's screen. A bottom app bar can be used to display navigation action.
Floating Action Button - A Floating action button is a type of button floating on screen can be used to perform an action. Material Design 3 supports four types of FAB.
- FAB: A floating action button of ordinary size.
- Small FAB: A smaller floating action button.
- Large FAB: A larger floating action button.
- Extended FAB: A floating action button that contains more than just an icon.
A simple code implementing scaffold which contains a top app bar, bottom app bar, and a floating action button is below
@Composable
fun ScaffoldExample() {
var presses by remember { mutableIntStateOf(0) }
Scaffold(
topBar = {
TopAppBar(
colors = topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text("Top app bar")
}
)
},
bottomBar = {
BottomAppBar(
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.primary,
) {
Text(
modifier = Modifier
.fillMaxWidth(),
textAlign = TextAlign.Center,
text = "Bottom app bar",
)
}
},
floatingActionButton = {
FloatingActionButton(onClick = { presses++ }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
}
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text(
modifier = Modifier.padding(8.dp),
text = "This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button. It also contains some basic inner content, such as this text.\n\nYou have pressed the floating action button $presses times."
)
}
}
}For better understanding let's build an Android App in which we create a top app bar, a bottom app bar and a floating action button by implementing scaffold.
.png)