Member-only story
Build Android DropdownMenu in Jetpack Compose
Creating popups just got a whole lot simpler
In this article, we’re going to learn how to build the dropdown menu in Jetpack compose. We’ll build a generic composable that can be reused. What we’re going to build is similar to the traditional drop-down menu.
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 is stable version 1.0 is released recently, which means it’s production-ready. So it would be a great time to learn how to work with the next-generation UI kit for Android development.
You will need to install Android Studio — Arctic Fox (2020.3.1) version to use the Jetpack Compose.
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)”
- “Explore Android Bottom Sheets in Jetpack Compose”
- “Build Android Layouts in JetPack Compose”
- “Android Bottom Navigation Bar With Jetpack Compose”
Create a dropdown view
First, we need to create a dropdown view with a test to display the placeholder or the selected item, and then a drop-down icon at the right end which helps users recognize it as a dropdown view. Have a look at the code:
First, I’ve used Box compose function to draw a rectangular border. Inside it, we’ve ConstraintLayout with a padding of 16.dp to make it look appealing. The actual design starts now…
