Member-only story
Using the Scaffold and Slot APIs in Jetpack Compose
Build awesome Android applications
In this article, we’re going to learn about the Scaffold and Slot APIs and how to use them to design a fully functional screen in an Android application. You’ll learn how to create a top bar, a bottom navigation view, a drawer, and the main content of the screen. Most importantly, you’ll learn how Scaffold holds all of them together.
At the end of this article, you’ll find the Github project. Feel free to explore the code.
Introduction
Jetpack Compose is one of the recent attempts from Google to make it easy for Android developers to build UI.
“Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.” — Android Developers
Jetpack Compose recently moved to beta. This means there will no longer be any drastic changes to the API structure, so it would be a great time to learn how to work with this next-generation UI kit for Android development.
You will need to install Android Studio Canary, Arctic Fox (2020.3.1) version to use the Jetpack Compose beta.
Prerequisites
Before going any further, you must have basic knowledge of how to work with Jetpack Compose. If you’re new to Compose, I highly recommend going through the following articles:
- “Jetpack Compose Components (Part 1)”
- “Build Android Layouts in JetPack Compose”
- “Theming in Jetpack Compose for Android”
- “Bottom Navigation Bar With Jetpack Compose”
What Is Scaffold?
Scaffold is a Material Design layout structure that provides a way to hold different material components like an app bar, bottom navigation view, drawer, floating action button, etc. together by implementing a layout structure strategy to make sure all these components work together seamlessly. All these subcomponents are known as slots — metaphorically.
