Material Components in Jetpack Compose — Part 1
Hello guys,😀 चलो आज कुछ नया सीखते हैं
Please proceed to the first day for Introduction to Compose & Setup 🏗️ if you have not yet setup a Basic Compose project.
We are already aware that Material Design act as a guide for visual, motion and interaction design across platform and devices. Compose offers a implementation of design system for creating a digital interfaces. You can use composable functions to implement Material Components.
Material Components in Compose primarily classified as
Scaffold and App Bars — Layouts
Buttons, Switch ,Chip, Sliders, Floating buttons — User input
Cards, Dialog, Indicators, Snackbars — Commonly used Components
Part 1 covers
Scaffold & App Bars, Buttons, Switch, Slider, ChipsPart 2 covers
Floating buttons, Cards, Dialog, Indicator, Snackbars
Scaffold
Imagine your app’s UI as a building under construction. Each floor of this building represents a part of your user interfaces, like buttons, text fields, image. Now, instead of starting from scratch every time you build a new floor, you use a scaffold- a framework that provides basic structure, just like scaffolding used in construction.
It accepts several composables as a parameter. The commonly used are topBar- The bar across top of the screens
bottomBar- The bar at bottom across all the screens
floatingActionButton- Button that hover at bottom right corner which can expose key actions
AppBars
AppBar also known as action bar is most important design element and provides a visual structure and interactive elements that are familiar to users.
It makes our app consistent with other apps letting users quickly understand how to quickly operate our app and had a great experience.
The App bar basically has a dedicated space for giving your app a identity and indicating user location in the app, also access to important actions like search and support for navigation and view switching.
Two types of app bars are supported as Top app bar & Bottom app bar
Top App Bar
To implement it, we can directly use a TopAppBar composable. It can fit based on our requirements into Small, Center Aligned, Medium, Large based on the use case.
We can control the 4 types of app bar content using this basic Api provided
title- Text that appears across across app bar
navigationIcon- Primary icon for navigation
actions- Icons provide user access to key actions
scrollBehaviour- Determine how app bar responds to scaffolds’s content
colors- Determine how app bar looks
Scrolling Behaviour
To respond to how app bar responds when user scrolls scaffold’s inner context, you can define scrolling behavior by setting this value
enterAlwaysScrollBehavior- Collapses when content scroll up and expands when scroll down
exitUntilCollapsedScrollBehavior- Same like above but additionally expands when user reaches end of scaffold inner content
pinnedScrollBehavior- Bar remain at place and does not react to scrolling
Bottom App Bar
It is also a is most important design element that contains actions that apply to the context of current screen. To create a bottom app bar, use the BottomAppBar composable.
We can control the bar using this basic Api provided
actions- Series of actions appear on left side bar
floatingActionButton- Action button that appears on the right of bar
containerColor- Color used for background of Bottom bar
contentColor- Color for content inside BottomAppBar
Buttons
The detailed explanation for this element is covered under this article.
Refer
Switch
This component allows user to toggle between the two states: checked & unchecked. It can help user do one thing like (toggle setting, enable/disable feature, select option)
Switch has 2 parts (thumb - draggable part & track - Background)
Tapping & Dragging the thumb changes the state of switch.
We can control the switch attributes using basic Api provided
checked - Initial state
onCheckedChange - Callback when state is changed
enabled - Tells whether switch is enabled or disabled
colors - Colour used for the switch
There may be a case where you want to customize the appearance of thumb when it is selected
thumbContent - Use to customize the appearance
Slider
It allows user to make selections from range of values. It can help user do one thing like adjust settings that use a range of values, setting some user input, filter data.
Switch has 3 parts (track- horizontal bar representing range of values, thumb- draggable control element on slider, tick marks- optional visual markers that appear along the track of slider)
We can control the slider using this basic Api provided
value- Current value of slider
onValueChange- lambda getting called when every time value is changed
enabled- Boolean value indicating whether user can interact with slider
There may be a case where you want to customize color, range, steps of slider.
colors- Instance of SliderColors can help you control color of slider
valueRange- Range of values slider can take
steps- number of notches on slider to which thumb rests
Chips
Chips act as a compact UI element that serve as a container for small pieces of information or actions. These chips are like bite-sized components that display a single item or a selection of related items.
Commonly used for tags, filters or interactive elements in app user interface.
There are 4 types of chips you can use based on your use case
Assist- Guides a user during task. Appear as a temporary UI element
Input- Allow user to refine content from set of options.
Filter- Represents user-provided information, such as selections in a menu. can contain an icon and text, and provide an ‘X’ for removal
Suggestion- Provides recommendations to the user based on their recent activity or input
We can control the chip using this basic Api provided
label- String that appears on chip
icon- Icon displayed at start of chip(leadingIcon & trailingIcon)
onClick- Lambda called when user presses it
That’s all about the basics of Material Components in Compose. Remaining part will be cover in next article as mentioned above.
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.😄
