Material Design Time Picker in Android
Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android application. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. If you like the way how the UI elements from Google Material Design Components for android which are designed by Google are pretty awesome, then here are some steps that need to be followed to get them, and one of them is Time Picker. It is not the same as that of the regular time picker in android and allows a lot of customization to improve User Experience. It gives an immense experience for the user. So in this article, it’s been discussed how to implement the Material Design Time Picker in android. Have a look at the following image on what all the perspectives the Material Design Time Picker can appear.
Steps to implement the Material Design Time Picker
Step 1: Create an empty activity project
Create an empty activity android studio project. Refer to How to Create/Start a New Project in Android Studio.
Step 2: Add the required dependencies
There is a need for Material Design dependencies. To the app-level Gradle file add the following dependency.
// The version 1.3.0-alpha04 may vary
Step 3: Working with activity_main.xml file
- The main layout of the application contains a button and one TextView. The Button opens the Material Design Time Picker and TextView previews the picked time.
- To implement the same UI invoke the following code inside the activity_main.xml file.
Before heading to interact with the dialog interface understanding the anatomy of dialog is important
- Anatomy of the MDC Time Picker (immersive dialog).
- Anatomy of the MDC Time Picker (compact).
Step 4: Working with MainActivity.kt file
- In the MainActivity.kt file, handle the button click to open the Material Design Timer Picker dialog, and check for a single-digit hour and minute and update the preview text.
- To implement the same invoke the following code inside the MainAactivity.kt file.