Introduction to Material Design in Android

27 Oct, 2020
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. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been introduced to the basic things that need to be considered before designing or developing any Materialistic Android Application.
The topics covered in these articles are
Color and themingTypography (Choosing the right font)Material design componentsShaping the material design components
Color and theming
Typography (Choosing the right font)
Material design components
Shaping the material design components
By choosing the right kind of color combination reflects the application’s brand and style. For example, the application’s main or primary color is the Green, then in the whole application, the green color will be frequently shown. Choosing the color for the application, there are three types of colors to be chosen for developing the android application.
Primary Color: This color should be chosen very cautiously because this color is frequently visible in the application components like high emphasis buttons or the button ripple color, and also the top and bottom navigation bar.
Secondary Color: This color should be chosen only when there is a low complexity level of the application. This color will be applied to those elements which need a little color accent like the background color for the Floating Action Buttons (FAB), sliders, toggle buttons, chips (Active State), progress bars, etc.
Light and Dark variants: These colors are the variants of the primary color. The dark variant of the primary color is set for the status bar and the light variant of the primary color is set for the Floating action button, outline for the edit texts, and where the elements need some color accents the light variant of the primary colors will be set for them. Have a look at the following image when only the primary color is set for the application theme looks like.
But according to the complexity of the application, there are various types of color can be chosen.
Have a look at the following image, having selected the primary color, with that the Complementary color can be chosen or Analogous color can be chosen or Triadic color can be chosen or Secondary color can be chosen to meet the required style.
To make color swatches of their own can visit here.
In android, however, the Roboto font meets all the requirements. But too, if the developer wants to customize the application more with the font, the font needs to be chosen where it has all its variants. The variants are the light face, regular face, medium face, and sometimes the dark face.
Choosing the font from Google Font is recommended. As it offers a variety of font families, and almost all the fonts have contained all the variants.
There are some guidelines that need to be followed by having the font chosen. In this case, the Roboto is chosen for demonstration purposes only. Looking at the following image which is the type scale chart for applying the styles of the fonts for various contexts.
The various contexts include captions, Body, Subtitles, Button, captions, etc.
In the below image left side column contains the font is chosen, font style, and the font size. The second column contains the preview of the selected context of the font.
To select the right kind of font for the application can visit this.
Material design components are the components that allow a lot of features for the users and easy to implement for the developers.
Have a look at the following image on how material design components stand out in terms of the customization, styling, and look, from the normal UI components.
The features offered by the material design components can be implemented in various contexts. One can notice in the above image how the normal button and edit text has adapted to the application’s theme and how the material design button has adapted to the application’s theme.
These components can even adapt to the dark theme and change their styles when it is toggled by the user. Have look at the following image to differentiate the behaviors between the material design components and normal UI components.
For step-by-step implementations of some of the material design components and their theming can be found in the following articles.
Material Design Buttons in Android with ExampleTheming Material Design Buttons in Android with ExamplesFloating Action Button (FAB) in Android with ExampleExtended Floating Action Button in Android with ExampleTheming Floating Action Buttons in Android with ExampleMaterial Design Date Picker in AndroidMore Functionalities of Material Design Date Picker in AndroidMaterial Design EditText in Android with Examples
Material Design Buttons in Android with Example
Theming Material Design Buttons in Android with Examples
Floating Action Button (FAB) in Android with Example
Extended Floating Action Button in Android with Example
Theming Floating Action Buttons in Android with Example
Material Design Date Picker in Android
More Functionalities of Material Design Date Picker in Android
Material Design EditText in Android with Examples
For various material design components can be found here.
In material design, there are three types of shaping methods.
Cut cornerRounded cornerTriangle edge
Cut corner
Rounded corner
Triangle edge
These methods are also can be applied for the material design buttons, text fields, chips, floating action buttons, cards, navigation bars, bottom sheets, etc.
These features are available with the Material design components out of the proverbial box. Just need to add the dependency of the material design components and start implementing the styling for material design components.
For more of the hard coding, customization refers to this.
android
Technical Scripter 2020
Android
GBlog
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.