Learning Android Development

Using Jetpack Compose Scaffold as Template

Making Initial Setup of Android App Easier

Elye
Elye
Dec 16, 2020 · 5 min read
Image for post
Image for post
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 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.

Image for post
Image for post

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.

Image for post
Image for post
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>

Then change the in the AndroidManifest.xml as below.

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Scaffold.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

Top AppBar

Now let’s look at the Top App Bar. It has a Menu Icon on the left, followed by the title.

Image for post
Image for post
@Composable
fun MyTopAppBar(scaffoldState: ScaffoldState) {
TopAppBar(title = { Text("Top AppBar") },
backgroundColor = Color(0xFF008800),
navigationIcon = {
Icon(
Icons.Default.Menu,
modifier = Modifier.clickable(onClick = {
scaffoldState.drawerState.open()
})
)
})
}

The Menu Icon is there to trigger and open the Drawer.

Bottom App Bar

The Bottom App Bar is the same as the Top AppBar, just that it is at the bottom.

Image for post
Image for post
@Composable
fun MyBottomAppBar() {
BottomAppBar(backgroundColor = Color(0xFF008800)) {
Text("BottomAppBar")
}
}

Do note that the will take up the body spaces. To avoid the body space being covered by the , we’ll need to set padding on the Body as shown in the next section.

The Body Content

Just to make the Body Content more interesting, I put a within

@Composable
fun MyBodyContent(body: String) {
ScrollableColumn(
modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 58.dp)) {
Text(text = body, fontSize = 32.sp) }
}

Do notice the bottom padding. That is to ensure it doesn’t get drawn on behind the .

The Drawer Content

The Navigation Drawer Content can be easily provided.

Image for post
Image for post

In my case, I use (similar to RecyclerView) to draw each Drawer Item

@Composable
fun MyDrawerConten(drawers: List<String>) {
LazyColumnFor(
items = drawers,
contentPadding = PaddingValues(16.dp, 16.dp, 16.dp)
) { itemText ->
Text(
text = itemText,
style = TextStyle(fontSize = 24.sp,
color = Color(0xFF5555FF)),
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.fillMaxWidth().height(16.dp))
}
}

You can find out more about in

Note: I cannot find a way to customize the width of the Drawer Content. As reported in the StackOverflow.

Floating Action Button

By default when provided, the Floating Action Bar when given is set on the Right slightly higher than the Bottom App Bar position.

Image for post
Image for post

However, there’re settings which we can dock it and set it to the center as below.

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) }
)
Image for post
Image for post

Then you can set up your Floating Button as below. In my case, I use the Floating Button to open the Snackbar

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyFloatingButton(scaffoldState: ScaffoldState) {
val scope = rememberCoroutineScope()
FloatingActionButton(onClick = {
scope.launch {
when (scaffoldState.snackbarHostState.showSnackbar(
message = "Snackbar",
actionLabel = "Ok"
)) {
SnackbarResult.Dismissed ->
Log.d("Track", "Dismissed")
SnackbarResult.ActionPerformed ->
Log.d("Track", "Action!")
}
}

}
) {
Text("X")
}
}

Notes

  1. In order to open the , we’ll can only launch it in Coroutine scope, hence I need to set up the scope there.
  2. The is still experimental, hence we need to annotate the Composable function with

The Snackbar

By default, is provided, and we can just call it to show without setting it up. However, if we want to customize it, we can still set it up and customize it as below.

Image for post
Image for post
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MySnackHost(state: SnackbarHostState) {
SnackbarHost(
state,
snackbar = { data ->
Snackbar(
data,
backgroundColor = Color(0x99000000),
elevation = 1.dp
)
})
}

Note that is also Experiment, hence needed to be annotated with

That’s it. Hopes the helps you set up what you basically need easily. You can get my code above from here. Have fun scaffolding!

Mobile App Development Publication

Sharing Mobile App Development and Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store