Material Components in Jetpack Compose — Part 2

Satyam Gondhale
Nerd For Tech
Published in
3 min readFeb 3, 2024

--

Hello guys,😀 चलो आज कुछ नया सीखते हैं

Image from source https://www.mockplus.com/example/rp/58

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.😄

--

--