Member-only story
Exploring App Bars in Jetpack Compose
Customize the top and bottom bars in your Android applications
Takeaway From This Article
In this article, we’re going to learn how to design app bars in Jetpack Compose. We are going to cover the simple design of the top app bar and custom icon design along with the default setup and aligning the fab button with a cut-out from the bottom bar.
At the end of this article, you’ll find the GitHub gist of the entire flow, so feel free to play with the code.
Introduction
Jetpack Compose is one of the recent attempts by 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 has moved to beta for a while now, and it’ll be ready for a stable release most probably by the end of August. This means there will no longer be any drastic changes in 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”
- “Android Bottom Navigation Bar With Jetpack Compose”
- “Explore Android Bottom Sheets in Jetpack Compose”
What are App Bars?
The app bar, also known as the action bar, is one of the most important design elements in your app’s UI, because it provides a visual structure and interactive elements that are familiar to users. A TopAppBar displays a set of actions along with the title of the screen.
