Jetpack Compose Scaffold

Scaffold is a fundamental component in Jetpack Compose, providing a layout structure for building app screens. It acts as a container for various UI elements such as the app bar, floating action button, bottom navigation, and more. The Scaffold component helps organize and manage these elements, allowing developers to focus on the logic and behavior of their app, rather than dealing with low-level UI details.

Note: This post uses Material 3 libraries. See the implementation here.

Scaffold Function

Note: Scaffold API of jetpack compose is in the experimental phase in the Material 3 library so mark your function with @ExperimentalMaterial3Api annotation.

@ExperimentalMaterial3Api
@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
)

topBar – This parameter takes a composable function or component of the jetpack compose as the top app bar of the screen.

bottomBar – It defines the bottom bar of the app, typically a navigation bar.

snackbarHost – This parameter defines a component to host SnackBars.

floatingActionButton – FAB defines a main action button on the screen.

This post will use a scaffold to display the topbar, bottom bar and floating action button (FAB). And we will create a composable function for each component (top bar, bottom bar, FAB).

Top Bar

Let’s create a top app bar with a scaffold.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldShower() {
    Scaffold(
        topBar = { TopAppBarProvider() }
    ) { paddingValues ->
        AppBodyProvider(modifier = Modifier.padding(paddingValues))
    }
}

TopAppBarProvider() – This is a composable function that made the top app bar for the application.

AppBodyProvider() – This composable function shows a text as the body content of the application.

paddingValues – The scaffold includes a lambda slot that contains generic content. The lambda function receives a PaddingValues instance that can be used to apply padding to the content root. This padding is useful for adjusting the position of the top and bottom bars, in case they are present, using Modifier.padding.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarProvider() {
    TopAppBar(
        title = { Text(text = "Top Bar") },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription = null
                )
            }
        }
    )
}

TopAppBar API of the jetpack compose helps us to make up a top bar for the application. In the above code, it takes a title parameter of type composable and actions parameter of also type composable with Row.Scope. For more detail, I request you to check out my latest post on the top app bar. If you are not aware of the Image composable function then check out my post on the image.

@Composable
fun AppBodyProvider(modifier: Modifier) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Body Content")
    }
}

It is a simple composable function that takes a modifier as a parameter and shows the text “Body Content” in the middle of the app screen. If in the above code, some parameter is new to you then you can check out my post on the text and column.

Output:

Floating Action Button (FAB)

In Jetpack Compose, you can create a Floating Action Button (FAB) using the FloatingActionButton composable. The FloatingActionButton provides a prominent button that is typically used for primary actions in an app. Let’s extend our last code to show a FAB:

 Scaffold(
        topBar = { TopAppBarProvider() },
        floatingActionButton = { FABProvider() }
    )

FABProvider() – This function creates a FAB using the floating action button API of the jetpack compose.

@Composable
fun FABProvider() {
    FloatingActionButton(onClick = { /*TODO*/ }) {
        IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = null
                )
            }
    }
}

Output:

Bottom Bar

Note: We can use other libraries as well to implement bottom navigation in our app like Navigation Rail, Navigation Bar etc. but in this post, we will use BottomAppBar API.

 Scaffold(
        topBar = { TopAppBarProvider() },
        floatingActionButton = { FABProvider() },
        bottomBar = { BottomBarProvider() }
    )

BottomBarProvider() – This function creates a bottom bar using the BottomAppBar API of the jetpack compose.

@Composable
fun BottomBarProvider() {
    BottomAppBar() {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
             IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.Home,
                    contentDescription = null
                )
            }
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.AccountBox,
                    contentDescription = null
                )
            }
        }
    }
}

Output:

The above image shows an output of all the code written till now but wait a second our top app bar is not looking good because it doesn’t have a background so it’s hard to distinguish between the top bar and the main body of the app. Let’s give a different color to the top app bar by modifying TopAppBarProvider() function.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarProvider() {
    TopAppBar(
        title = { Text(text = "Top Bar") },
        actions = {
           IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription = null
                )
            }
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(Color.Yellow)
    )
}

Output:

Conclusion:

The Scaffold component in Jetpack Compose is a powerful tool that simplifies UI development by providing a predefined structure and handling essential UI elements. With Scaffold, you can quickly create consistent and visually appealing user interfaces while adhering to design guidelines. By abstracting away common UI patterns, Scaffold boosts developer productivity and promotes a streamlined development process. If you’re building an Android app with Jetpack Compose, make sure to leverage the power of Scaffold for a seamless and delightful user experience.

Some Important Links

Github gist link for the code used in this post.

Scaffold Official Documentation.

Happy Coding 🙂