Android Elevation and shadows

In order to focus object, Android Material Design has three-dimensional qualities that are reflected in use of z-axis and shadows.

The elevation value is the relative distance between two surfaces along the z-axis.

From the above picture, every menus and sub-menus has
respective elevation and shadow.

For different object, has respective elevation value as follow.

Elevation (dp) Component
24 Dialog, Picker
16 Nav drawer, Right drawer, Modal bottom Sheet
12 Floating action button (FAB - pressed)
9 Sub menu (+1dp for each sub menu)
8 Bottom navigation bar, Menu, Card (when picked up), Raised button (pressed state)
6 Floating action button (FAB - resting elevation), Snackbar
4 App Bar
3 Refresh indicator, Quick entry / Search bar (scrolled state)
2 Card (resting elevation) , Raised button (resting elevation), Quick entry / Search bar (resting elevation)
1 Switch

App bar : 4dp

Raised button

Resting state: 2dp
Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp

Floating action button (FAB)

Resting state: 6dp
Pressed state: 12dp

Card

Resting state: 2dp
Pressed state: 8dp

On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.

Menus and sub menus

Menus: 8dp
Sub menus: 9dp (+1 dp for each sub menu)

Dialogs : 24dp

Nav Drawer & Right drawer : 16dp

Modal bottom sheet : 16dp

Refresh indicator : 3dp

Quick entry/Search bar

Resting state: 2dp
Scrolled state: 3dp

Snackbar : 6dp

Switch : 1dp

Author

Nick Lin

Posted on

2016-05-25

Updated on

2023-01-18

Licensed under


Comments