Scaffold in Android using Jetpack Compose
There are a lot of apps that contain TopAppBar, Drawer, Floating Action Button, BottomAppBar (in the form of bottom navigation), Snackbar. While you can individually set up all of these in an app but takes a lot of setups. Jetpack Compose provides Scaffold Composable which can save a lot of time. It’s like a prebuilt template. In this article, we will see how to set up Scaffold in android with Jetpack Compose. We will be building a basic app that will demonstrate the Scaffold composable, here is a video showing the app.
Step by Step Implementation
Step 1: Creating TopAppBar
Open MainActivity.kt and create a TopBar Composable function, It will be a wrapper for our TopAppBar in Scaffold.
Step 2: Create BottomAppBar
Open MainActivity.kt and create a BottomBar Composable. It will be a simple straight forward in our app.
Step 3: Create Drawer content
Open MainActivity.kt and create a composable Drawer, It will be the drawer in our Scaffold.
Step 4: Creating Body part of Scaffold
Create another composable function Body. It will be a simple Text composable in our app. Be sure to customize it when implementing it in other apps.
Since all the components we need are done, let’s work on the Scaffold Part.
Step 5: Working with Scaffold
Since we have already created all the components, the Scaffold code will be pretty simple and self-explanatory.
Now call this composable from setContent in Mainactivity class
Now run the app and see it working.
Get the complete project from GitHub.