Material Design Layout – Metrics & keylines for Android Mobile

Material Design Layout – Metrics & keylines for Android Mobile

Baseline grids

All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.

layout_metrics_baseline2

layout_metrics_baseline3

Type aligns to a 4dp baseline grid. See detailed information on typography.

Example of typography in a baseline grid
layout_metrics_baseline5

Keylines and spacing

The following templates and examples contain keylines, spacing guidance, and sample screens for elements on mobile, tablet, and desktop.

Mobile

List

A two-column, left-aligned list with a 56dp floating action button.
layout_metrics_keyline_mobile2
Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.

layout_metrics_keyline_mobile3

Vertical spacing

  1. 1. Status bar: 24dp
  2. 2. Toolbar: 56dp
  3. 3. Subtitle: 48dp
  4. 4. List item: 72dp

layout_metrics_keyline_mobile5
Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp

layout_metrics_keyline_mobile6
Vertical spacing

  1. 1. Status bar: 24dp
  2. 2. Toolbar: 56dp
  3. 3. Title and list items: 72dp
  4. 4. Subtitle: 48dp
  5. 5. Space between content areas: 8dp

Detail view

A detail card with a 56dp floating action button.
layout_metrics_keyline_mobile8
Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
layout_metrics_keyline_mobile9
Vertical spacing

  1. 1. Status bar: 24dp
  2. 2. Toolbar: 56dp
  3. 3. Space between content areas: 8dp
  4. 4. List item: 72dp

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
layout_metrics_keyline_mobile14
Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

layout_metrics_keyline_mobile15
Vertical spacing

  1. 1. Account menu and list items: 48dp
  2. 2. Space between content areas: 8dp
  3. 3. Navigation right margin: 56dp

Source by Google.com

About Brief Material Design Layout – Metrics & keylines for Android Mobile

PSD Name:Material Design Layout – Metrics & keylines for Android Mobile
PSD Description:Material Design Layout – Metrics & keylines for Android Mobile
PSD: Material Design Layout – Metrics & keylines for Android Mobile
Designed by: Redesign Case
Design: 1.0
PSD ID: SKU: Material Design Layout – Metrics & keylines for Android Mobile
Price: 0.00 New

Format: AI & JPG
Vector Shapes: Yes
Size: 2.57 MB

2,445 total views, 1 views today

Looking for full Custom UI Design? Get in touch now!

info@redesigncase.com