Material Design and Jetpack Compose
Material Design is a language tool to create UI. It was developed by Google in 2014. This was the first stage of Material Design also known as Material Design 1 (M1).
In 2018 Material Design also known as Material Design 2 (M2) was launched with some upgrades Material Theming and code for Material Components.
In 2021 Material Design also known as Material Design 3 (M3) or Material You was launched with great features Dynamic Colors animation, larger buttons, and the ability for custom UI themes to be generated from the user's wallpaper. It is open source so you can visit its official sites for more information.
Material Design Components are the building blocks for UI of our app which attract and engage the users to our apps.
Also Read Subscript and superscript in jetpack compose
If you want to use it in your app read the guidelines on its official sites.
For the tutorials we are using Android Studio Latest Jellyfish with the following dependencies.
Some Material Design components which can enhance the UI of our android app are available for Android, IOS, Flutter and Web with jetpack compose.Material Design Components
1. Bottom app bar - Bottom app bar is a component that is used to display navigation and key actions at the bottom of mobile screens.
2. Bottom sheet - Bottom sheet is a container containing supplementary content that’s anchored to the bottom of the screen. We can use standard or modal bottom sheet in our app.
3. Card - A useful material component containing content and actions that relate information about a subject. We can use elevated, filled or outlined card in our app.
4. Checkbox - This component can we used allowing users to select one or more items from a set. Checkbox can turn an option on or off also.
5. Chip - A useful component for helping users to show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts. There are four types of chips we can use in our app are assist, filter, input, and suggestion.
6. Date picker - A component that lets users select a date, or a range of dates.
7. Dialog - It is used as alert dialog on back pressed. This component providing important prompts in a user flow. They do an action, communicate information, or help users accomplish a task. We can use it on a basic or full-screen.
8. Divider - A useful component in material design which draw a thin line that groups content in lists and layouts.
9. Extended FAB - A component for helping people take primary actions. They're wider than FABs to accommodate a text label and larger target area.
10. Floating action button (FAB) - A component representing the most important action on a screen. They put key actions within reach.
11. List - A useful component of material design comprised of continuous, vertical indexes of text or images.
12. Menu - A stylish and widely used component that displays a list of choices on a temporary surface.
13. Navigation bar - An attractive component in material design offering a persistent and convenient way to switch between primary destinations in an app.
14. Navigation drawer - A good looking component providing ergonomic access to destinations in an app.
15. Navigation rail - A modern component specially used in large screen's devices providing access to primary destinations in apps when using tablet and desktop screens.
16. Progress indicator - A widely used component displaying an unspecified wait time or the length of a process.
17. Radio button - A material component allowing users to select one option from a set.
18. Slider - A material component that allows users to make selections from a range of values.
19. Snack bar - A component that provides brief messages about app processes at the bottom of the screen.
20. Switch - A material component that toggles the state of a single item on or off.
21. Tab - A material component used to organize content across different screens, data sets, and other interactions.
22. Text field - A component in material design that lets users enter and edit text.
23. Time picker - A material component that helps users select and set a specific time.
24. Top app bar - The most important component that displays information and actions at the top of a screen. We can use any one of four types of top app bars : top app bar, center-aligned, medium, and large.
Jetpack Compose for Android
A modern toolkit for creating UI in Kotlin programming language. It is simple and fast process to create UI using jetpack compose as now Android Studio has launched its AI which help developers to reduce development time by predefined code. In Jetpack Compose to add a composable function we need to add @composable annotation to the functions. It also support Material Design.
The following is an example of composable function to show text:
@Composable
fun TextExample() {
Text(text = "Hello Android!")
}
To see the preview of UI, We use @Preview annotation
.png)