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
Android Elevation and shadows
https://nickcarter9.github.io/2016/05/25/2016/2016_05_25-android-elevation_shadows/