Learning Android Development

Using Jetpack Compose Scaffold as Template

Making Initial Setup of Android App Easier

Photo by Xiong Yan on Unsplash

Imagine if you want to build an App that has a customize AppBar, BottomBar, Floating Action Button, Snackbar, and Navigation Drawer, it sure needs lots of setup.

The good news is, in Jetpack Compose, a Scafffold composable function is provided so that you can have that all in place easily.

Look at the code below…

setContent {
    val scaffoldState = rememberScaffoldState(
        rememberDrawerState(DrawerValue.Closed)
    )

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { MyTopAppBar(scaffoldState) },
        bottomBar = { MyBottomAppBar() },
        snackbarHost = { state -> MySnackHost(state) },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,
        floatingActionButton = { MyFloatingButton(scaffoldState) },
        drawerContent = { MyDrawerConten(drawers) },
        bodyContent = { MyBodyContent(body) }
    )
}

By providing it with some customize composable functions, you can have them all as below.