Member-only story
How to Show Date Picker in Jetpack Compose
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”
Design Date Picker View
Now we need to design a read only text field in the compose to act as an place holder and to display the picked date. This contains text field in the left and a date icon at the right-end. 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 look appealing. The actual design starts now with Text and Icon components which represents selected or placeholder text and a drop-down icon respectively. Have a look:
Show Date Picker
Once the user clicked on the placeholder we need to show the date picker dialog. Here we use MaterialDatePicker builder. Have a look:
