Android Material Design Components

Overview

Android-Material-Design-Components

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference. Material Design can be used in API Level 21 (Android 5.0) and newer via the v7 appcompat library, which is used on virtually all Android devices manufactured after 2009.

Material Design will gradually be extended throughout Google’s array of web and mobile products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.

Already I have created a post for the different material components in android. In this guide, I am putting all the posts together and it will be easy to learn android material components in one place.

Let see all the material components in detail with an example,

Android Chips

material chips Chip is a component that can represent the input, filter, choice, or action of a user. This post will be on the implementation of different chip types and various attributes of chips.

A Material Chip represents a complex entity in a small block, such as a contact. It is a rounded button that consists of a label, an optional chip icon, and an optional close icon. A chip can either be clicked or toggled if it is checkable.

Types Of Material Chip

There are four types of chips:

  • Entry (Input) Chips
  • Filter Chips
  • Choice Chips
  • Action Chips

Chips are generally used with ChipGroup which is to hold a number of chips.

Android Chips Example

Android Chips – Material Component For Android

Material Menus

menus

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Types of menus

  • Dropdown menus
  • Exposed dropdown menus

Material Menus Example

Material Menus – Material Component For Android

Navigation Rail

navigation rail

The Navigation rail acts as a side navigation component or sidebar and can hold from three, up to seven destination views. Each view consists of an icon and a respective label, just as we know it from the Bottom view. In contrast to the Bottom view, it is aligned vertically and can also be used in combination with a NavigationDrawer.

Navigation rails should be used for:

  • Top-level destinations that need to be accessible anywhere in an app
  • Three to seven main destinations in a product
  • Tablet or desktop layouts

Navigation rails shouldn’t be used for:

  • Small screen sizes
  • Single tasks, such as viewing a single email
  • Secondary navigation destinations

Navigation Rail Example

Navigation rail – Material Component For Android

Navigation Drawer

navigation drawer

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

  • Apps with five or more top-level destinations
  • Apps with two or more levels of navigation hierarchy
  • Quick navigation between unrelated destinations

Navigation Drawer Example

Android Navigation Drawer Explained [Step By Step]

Snackbar

snackbar-android-example-1024x512 Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Frequency

Only one snackbar may be displayed at a time.

Actions

A snackbar can contain a single action. “Dismiss” or “cancel” actions are optional.

Snackbar Example

Android Snackbar Example

Bottom Sheets

bottom sheet Bottom Sheets are surface components that hold supplementary screen content. They are anchored to the bottom of a screen (making them ergonomic on mobile/tablet devices) and, similar to Dialogs, are elevated over main screen content. In most cases, they can be expanded/dismissed via a drag up/down gesture.

From a design perspective, there are two types of Bottom Sheets:

  • Standard Bottom Sheet: They operate independently to (and allow for simultaneous interaction with) primary screen content. They can be in an expanded, collapsed or hidden state.
  • Modal Bottom Sheet: They block primary screen content and must be interacted with or dismissed. A semi-transparent scrim, which can be tapped to dismiss, is displayed behind them to indicate the underlying UI is temporarily inaccessible.

Bottomsheet Example

Bottom Sheets – Material Components for Android

Sliders

A Slider is a useful control for allowing the user to specify values without having to use the keyboard. The basic use case for it is vey similar to the Android Framework SeekBar or the AppCompatSeekBar widgets.

Types of sliders

There are two types of sliders.

  • Continuous Slider
  • Discrete Slider

Also, We have a another slider called range slider.

Sliders Example

Sliders – Material Component For Android

ShapeableImageView

Shapeable-Imageview-poster-rect

By using ShapeableImageView, you can change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your image view.

The Material Components Library introduced with the 1.2.0-alpha03 the new ShapeableImageView.

ShapeableImageView Example

ShapeableImageView – Material components for android [Example]

Progress Indicators

type-of-progress-indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. Types

Material Design offers two visually distinct types of progress indicators:

  • LInear
  • Circlular

Progress Indicators Example

Progress Indicators – Material Components For Android

You might also like...
Floating Action Button for Android based on Material Design specification
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

A library support form with material design, construct same with Android UI Framework

SwingUI A slight Java Swing library support form with material design, construct same with Android UI Framework writen in Kotlin Supported: 1. Screen:

Easy creation and management of toggle buttons on Android from the Material Design spec.
Easy creation and management of toggle buttons on Android from the Material Design spec.

ToggleButtonLayout Easy creation and management of toggle buttons from the Material Design spec. Read more about ToggleButtonLayout in our blog post.

A gradle plugin that generates Material Design 3 theme for Android projects.

Same as Google's Material Theme Builder, but as a gradle plugin.

Material Design icons by Google

Material design icons Material design icons is the official icon set from Google. The icons are designed under the material design guidelines. 4.0.0 U

A Material Design ViewPager easy to use library
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

EditText in Material Design
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Material Design ProgressBar with consistent appearance
Material Design ProgressBar with consistent appearance

MaterialProgressBar Material Design ProgressBar with consistent appearance on Android 4.0+. Why MaterialProgressBar? Consistent appearance on Android

Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Owner
Velmurugan Murugesan
Lead Android Engineer @htcindia | Blog Writer @howtodoandroid.com | active on medium @medium/velmurugan-murugesan
Velmurugan Murugesan
Modular and customizable Material Design UI components for Android

Material Components for Android Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of eng

Material Components 14.4k Dec 31, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Jan 3, 2023
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included ?? • Setup ??️ • Migration Guide ??

Mike Penz 11.6k Dec 27, 2022
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Jan 9, 2023
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
[] Android Library that implements Snackbars from Google's Material Design documentation.

DEPRECATED This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for a

null 1.5k Dec 16, 2022
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022