Material Components in Jetpack Compose — Part 2
Hello guys,😀 चलो आज कुछ नया सीखते हैं
Please proceed to the first day for Introduction to Compose & Setup 🏗️ if you have not yet setup a Basic Compose project.
We have already covered a Part 1 which consist of primary components of Material Design 3
Let’s cover the remaining components
Cards, Dialog, Indicators, Snackbars
Cards
Card act as a Material Design Container for the UI. Cards present a single individual piece of content. The card content can be arranged as a Single Row or Column inside a whole screen.
Based on the requirements the card can be simple, filled, elevated or outlined.
We can control the card display using 4 Api provided as
elevation- This is responsible for adding a shadow to component that make it appear elevated above the background
colors- Use CardColors type to set default color of both container & children
enabled- This is responsible to control the card appear enable/disable and respond to user input
onClick- To respond to user touch, you need to overload this parameter to respond to presses from the user
Dialogs
Many of the times we want to display some information to the user in between his app journey. We also want user to interrupt at some time to capture his attention. During this time Dialogs plays an important role in creating this user experience.
Different cases where dialog can be used are
- Confirm user action before something important
- Requesting some user input
- Present information in form of options for selection etc
NOTE : Two variations of Dialogs you can use based on use cases.
Case 1 (AlertDialog)- Can be used where your requirement is just to display some information and receive confirm/cancel actions from user
Case 2 (Dialog Composable)- Can be used where your dialog need more complex set of buttons and populate a dialog in more free form manner
We can control the Dialog using 6 Api provided as
title- Title to be displayed for Dialog
text- Text to be displayed in center of the dialog
icon- The graphic icon to be displayed at top of dialog
onDismissRequest- Function called when user dismisses dialog tapping outside
dismissButton- Composable that serves as a dismiss button
confirmButton- Composable that serves as a confirm button
Indicators
Many of the times you keep peforming some operations in the app. During this operation it is necessary to display user the status of the operation. This helps user in understanding progress of operation.
There may be different cases when progress need to be shown but primarily it is used while Loading content, File upload, Long processing
Indicator can be of two types
Determinate- Displays how much progress is done/remaining
Indeterminate- Only animates irrespective of showing progress
Indicator can take 2 forms
Linear- Horizontal bar filling progress from left to right
Circular- Circular progress whose stroke growth in length during progress
Determinate Indicator
Snackbars
Many of the time user performs many action while using your app. There may arise a need where you want to show some feedback to user after a action without interrupting a user experience.
In this cases, snackbars are best choice. They appears as a brief notification at the bottom of screen. They disappear after seconds.
To display snackbar it needs help of some components to display on screen those are
SnackbarHost- This host holds state called SnackbarHostState, that provides showSnackbar() function which can be used to display
That’s all about the basics of Material Components in Compose.
This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch MaterialComponentsInCompose) for this implementation.
https://github.com/SatyamGondhale/LearnCompose
If you think this has helped you, feel free to give 👏🏻 (claps) & share. Thanks.😄
