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.

Explore each items

All the items are optional unless you need it. Let’s look into each of the items we customize and set.

Remove existing default Activity Action Bar

To have a customize Top App Bar, first, we’ll need to remove the existing Action Bar of the Activity. Not doing so will make it look like below.

Additional Action Bar at the top

To remove that ActionBar, we’ll need to introduce a new Theme in themes.xml.

<style name="Theme.Scaffold.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>