Default colors and dimens per Material Design guidelines inside one library

by androidexample

Material Design Dimens

Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Dimens

Pattern:

R.dimen.material_[layout|component|typography]_[keylines|button|...]

R.color.material_[red|blue|...]_[500|800|...]

Usage

Just add the dependency to your build.gradle:

compile 'com.dmitrymalkovich.android:material-design-dimens:1.4'

Examples

Dialogs

Name Dimens Values
Padding around content area @dimen/material_component_dialogs_padding_around_content_area 24dp
Padding between title and body text @dimen/material_component_dialogs_padding_between_title_and_body_text 20dp
Padding around buttons @dimen/material_component_dialogs_padding_around_buttons 8dp
Action area height @dimen/material_component_dialogs_action_area_height 52dp
Dialog elevation @dimen/material_component_dialogs_elevation 24dp

Metrics & Keylines

Name Dimens Values
Screen edge left and right margins @dimen/material_layout_keylines_screen_edge_margin 16dp
Content associated with an icon or avatar left margin @dimen/material_layout_keylines_content_left_margin_from_screen_edge 72dp
Horizontal margins on mobile @dimen/material_layout_keylines_horizontal_mobile_margin 16dp

Cards

Name Dimens Values
Primary title top padding @dimen/material_component_cards_primary_title_top_padding 24dp
Primary title bottom padding @dimen/material_component_cards_primary_title_bottom_padding 16dp
Action button row padding @dimen/material_component_cards_action_button_row_padding 8dp
Supporting text top padding @dimen/material_component_cards_supporting_text_top_padding 16dp
Supporting text bottom padding @dimen/material_component_cards_supporting_text_bottom_padding 24dp

Floating Action Buttons

Dimens Values
@dimen/material_component_floating_action_button_margin 16dp
@dimen/material_component_button_height 36dp
@dimen/material_component_button_touchable_target_height 48dp

Color Palette

Colors Value
@color/material_indigo_100 #C5CAE9
@color/material_indigo_500 #3F51B5
@color/material_indigo_700 #303F9F

Layout

  • Keylines
  • Spacing
  • ... (More comming soon)

Components

  • Bottom sheets
  • Buttons
  • Floating Action Buttons
  • Cards
  • Dialogs
  • Grid lists
  • Lists
  • Text fields
  • Toolbars
  • ... (More comming soon)

Typography

  • Font sizes

Sample

GitHub