Jetpack Compose Basics - Scaffold
Technology
4
 min read
September 8, 2021

Jetpack Compose Basics - Scaffold

Peter Šuly
Peter Šuly
Android developer

Jetpack Compose can be future of Android programming. Most of it’s features and composables are easy to use and really simple to understand, others can have huge number of attributes. In Jetpack Compose Basics some of them will be explained. Scaffold will be first of them.

What is Scaffold and how to use it?

Scaffold is a base composable function used in Material applications. This component provides simple way to put together several material components to construct application screen with correct layout behavior ensured. (e.g. correct position of snackbar on the top of floating action button, animations and state of drawer and more)

Scaffold contains slots for TopBar, BottomBar, Snackbar, FloatingActionButton and Drawer. It takes a lots of parameters to customize, but don't be afraid, most of them are pretty obvious and need only simple explanation.

  • modifier - optional parameter used for modifying properties of Scaffold root from outside
  • scaffoldState - remembered state of the screen. ScaffoldState contains informations about drawer (whether it is Opened or Closed) and snackbarHost (whether snackbar is showing). If you don't need to interact with state (e.g. showing snackbar or opening drawer) just leave it as is
  • floatingActionButtonPosition - position of floating action button, possible values are either Center or End
  • isFloatingActionButtonDocked - boolean parameter, if floating action button should overlap with bottom bar by half of it's height. This parameter is ignored if there is no bottom bar used
Jetpack Compose Scaffold Combination of floatingActionButtonPosition as Center and isFloatingActionButtonDocked as true
Combination of floatingActionButtonPosition as Center and isFloatingActionButtonDocked as true
  • drawerGestureEnabled - whether drawer can be interacted with via gestures
  • drawerShape - shape of drawer
  • drawerElevation - elevation of drawer
  • drawerBackgroundColor - background color to be used for the drawer sheet
  • drawerContentColor - color of the content to use inside the drawer sheet
  • drawerScrimColor - color of the scrim that obscures content when the drawer is open
  • backgroundColor - background color of Scaffold body, in most cases, you leave this parameter at the default value
  • contentColor - color of content in Scaffold body, in most cases, you leave this parameter at the default value

Now, it's time to discuss non-trivial but still fairly simple parameters.

TopBar

Optional parameter. As you can see in definition, you should provide composable function that will fill the slot at the top of the screen. Either predefined TopAppBar composable can be used or you can use your own implementation to match custom designs. Default value is empty lambda, in this case no topBar is used. This snippet of code implements TopAppBar passed to topBar parameter.

Jetpack Compose Usage of TopAppBar
Usage of TopAppBar

BottomBar

Optional parameter. In this case, composable function is needed that will fill the slot at the bottom of the screen. Predefined composables like BottomAppBar or BottomNavigation can be used, but these are really just recommendations. You can pass own custom composable. This snippet of code implements BottomAppBar passed to bottomBar parameter.

Jetpack Compose Usage of BottomAppBar
Usage of BottomAppBar

FloatingActionButton

Optional parameter. Floating action button (FAB) represents the primary action of a screen.It can be configured also by floatingActionButtonPosition (Center or End) and isFloatingActionButtonDocked (boolean, whether the FAB should overlap with BottomBar). Preferred composable for this slot is FloatingActionButton, but you can use any composable function. This snippet of code implements FloatingActionButton passed to floatingActionButton parameter.

Jetpack Compose Floating action button with position = Center
Floating action button with position = Center
Floating action button with position = End
Floating action button with position = End

Drawer

Optional parameter. Drawer sheet represents content that can be pulled from left (or right for RTL). Drawer can be also showed by using scaffoldState.drawerState.open() function in coroutine scope. Lambda which is needed here is already extension function of ColumnScope, so every composable which will be used in lambda will be placed like in Column (from top to bottom). Animation, scrim of background and swiping is all handled by Scaffold. This snippet of code implements 4 items passed to drawerContent parameter.

Jetpack Compose Drawer

SnackbarHost

Snackbar is a little more complicated. We can use snackbarHost parameter when we want custom look of Snackbar else the default design and behavior implemented in SnackbarHost is used. We can let SnackbarHost to do it's work for now.Snackbars provide brief messages about app processes at the bottom of the screen. In our example snippet, the Snackbar is shown when FAB is clicked.

Few things to mention. showSnackbar(...) is suspend function thus coroutine scope is needed. We can get composition bounded one simply by using rememberCoroutineScope(). SnackbarHost guarantees to show at most one snackbar at a time, others will be queued.

Content

Remaining area on the screen. You can use any composable function here. The lambda receives PaddingValues that should be applied to the content root via Modifier.padding to properly offset top and bottom bars.

Full Scaffold with all widgets can look like this

Jetpack Compose Scaffold with all widgets
Scaffold with all widgets

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.