├── .gitignore ├── LICENSE ├── README.md ├── build.gradle ├── docs ├── README.md ├── about │ ├── changelog.md │ └── old_documentation.md ├── component │ ├── bottom_navigation.md │ ├── bottom_sheet.md │ ├── buttons-fab.md │ ├── buttons.md │ ├── card.md │ ├── chips.md │ ├── dialogs.md │ ├── dividers.md │ ├── expansion_panels.md │ ├── grid_lists.md │ ├── lists.md │ ├── menus.md │ ├── steppers.md │ ├── subheaders.md │ └── tooltips.md ├── css │ └── extra.css ├── images │ ├── components_bottomnavigation_spec_fixed1.png │ ├── components_bottomnavigation_spec_fixed2.png │ ├── components_bottomnavigation_spec_shifting1.png │ ├── components_bottomnavigation_spec_shifting2.png │ ├── components_bottomnavigation_spec_shifting3.png │ ├── components_bottomsheets_grid_specs.png │ ├── components_bottomsheets_list_header_specs.png │ ├── components_bottomsheets_list_headerless_specs.png │ ├── components_buttons_flat_color.png │ ├── components_buttons_raised_color.png │ ├── components_buttons_size.png │ ├── components_buttons_toggle_icons_color.png │ ├── components_card_actions_horizontal.png │ ├── components_card_actions_icons.png │ ├── components_card_actions_vertical.png │ ├── components_card_layout.png │ ├── components_card_media_in_title.png │ ├── components_card_media_shrunk.png │ ├── components_card_supporting_text.png │ ├── components_card_title_large.png │ ├── components_card_title_small.png │ ├── components_chip_basic.png │ ├── components_chip_contact_open.png │ ├── components_chip_deletable.png │ ├── components_chips_contact_closed.png │ ├── components_dialogs_actions_side.png │ ├── components_dialogs_actions_stacked.png │ ├── components_dialogs_content.png │ ├── components_expansionpanel.png │ ├── components_fab_edge_margin.png │ ├── components_fab_size.png │ ├── components_grid_list_footer_header.png │ ├── components_lists_avatar.png │ ├── components_lists_icon.png │ ├── components_lists_text.png │ ├── components_lists_types.png │ ├── components_menu_simple_dimension.png │ ├── components_menu_simple_edge.png │ ├── components_stepper.png │ ├── components_tooltip.png │ ├── components_tooltip_edge.png │ ├── layout_metrics_baseline.png │ ├── layout_metrics_incremental.png │ ├── layout_metrics_keyline_list.png │ ├── layout_responsive_content_hierarchy.png │ ├── layout_structure_appbar_common_values.png │ ├── layout_structure_appbar_phone_default.png │ ├── layout_structure_appbar_phone_extended.png │ ├── logo-title.png │ └── logo.png ├── index.md ├── layout │ ├── elevation.md │ ├── keylines.md │ ├── responsive_ui.md │ └── structure.md └── style │ ├── colors.md │ ├── icons.md │ └── typography.md ├── feedback.md ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── material-values ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── main │ ├── AndroidManifest.xml │ ├── res-component │ │ ├── values-w1280dp │ │ │ └── bottom_sheet.xml │ │ ├── values-w1440dp │ │ │ └── bottom_sheet.xml │ │ ├── values-w960dp │ │ │ └── bottom_sheet.xml │ │ └── values │ │ │ ├── bottom_navigation.xml │ │ │ ├── bottom_sheet.xml │ │ │ ├── button.xml │ │ │ ├── card.xml │ │ │ ├── chip.xml │ │ │ ├── dialog.xml │ │ │ ├── divider.xml │ │ │ ├── expansion_panel.xml │ │ │ ├── grid_list.xml │ │ │ ├── list.xml │ │ │ ├── menu.xml │ │ │ ├── public.xml │ │ │ ├── selection_control.xml │ │ │ ├── slider.xml │ │ │ ├── snackbar.xml │ │ │ ├── stepper.xml │ │ │ ├── subheader.xml │ │ │ ├── tab.xml │ │ │ ├── text_field.xml │ │ │ └── tooltip.xml │ ├── res-layout │ │ ├── values-land │ │ │ ├── keylines.xml │ │ │ └── structure.xml │ │ ├── values-sw600dp │ │ │ ├── keylines.xml │ │ │ ├── responsive.xml │ │ │ └── structure.xml │ │ ├── values-v23 │ │ │ └── structure.xml │ │ ├── values-w600dp │ │ │ └── responsive.xml │ │ ├── values-w840dp │ │ │ └── responsive.xml │ │ └── values │ │ │ ├── elevation.xml │ │ │ ├── keylines.xml │ │ │ ├── public.xml │ │ │ ├── responsive.xml │ │ │ └── structure.xml │ └── res-style │ │ ├── color │ │ ├── material_icon_color_dark_theme.xml │ │ └── material_icon_color_light_theme.xml │ │ ├── values-ar │ │ └── typography.xml │ │ ├── values-bn │ │ └── typography.xml │ │ ├── values-fa │ │ └── typography.xml │ │ ├── values-gu │ │ └── typography.xml │ │ ├── values-hi │ │ └── typography.xml │ │ ├── values-ja │ │ └── typography.xml │ │ ├── values-km │ │ └── typography.xml │ │ ├── values-kn │ │ └── typography.xml │ │ ├── values-ko │ │ └── typography.xml │ │ ├── values-lo │ │ └── typography.xml │ │ ├── values-ml │ │ └── typography.xml │ │ ├── values-mr │ │ └── typography.xml │ │ ├── values-my │ │ └── typography.xml │ │ ├── values-ne │ │ └── typography.xml │ │ ├── values-pa │ │ └── typography.xml │ │ ├── values-si │ │ └── typography.xml │ │ ├── values-ta │ │ └── typography.xml │ │ ├── values-te │ │ └── typography.xml │ │ ├── values-th │ │ └── typography.xml │ │ ├── values-ur │ │ └── typography.xml │ │ ├── values-vi │ │ └── typography.xml │ │ ├── values-zh │ │ └── typography.xml │ │ └── values │ │ ├── colors.xml │ │ ├── icons.xml │ │ ├── public.xml │ │ └── typography.xml │ └── template │ └── res │ ├── layout │ ├── material_template_list_single_line_avatar_text_dense.xml │ ├── material_template_list_single_line_avatar_text_icon_dense.xml │ ├── material_template_list_single_line_avatar_text_icon_normal.xml │ ├── material_template_list_single_line_avatar_text_normal.xml │ ├── material_template_list_single_line_icon_text_dense.xml │ ├── material_template_list_single_line_icon_text_normal.xml │ ├── material_template_list_single_line_text_only_dense.xml │ ├── material_template_list_single_line_text_only_normal.xml │ ├── material_template_list_three_line_three_text_avatar_text_dense.xml │ ├── material_template_list_three_line_three_text_avatar_text_icon_dense.xml │ ├── material_template_list_three_line_three_text_avatar_text_icon_normal.xml │ ├── material_template_list_three_line_three_text_avatar_text_normal.xml │ ├── material_template_list_three_line_three_text_icon_text_dense.xml │ ├── material_template_list_three_line_three_text_icon_text_normal.xml │ ├── material_template_list_three_line_three_text_text_only_dense.xml │ ├── material_template_list_three_line_three_text_text_only_normal.xml │ ├── material_template_list_three_line_two_text_avatar_text_dense.xml │ ├── material_template_list_three_line_two_text_avatar_text_icon_dense.xml │ ├── material_template_list_three_line_two_text_avatar_text_icon_normal.xml │ ├── material_template_list_three_line_two_text_avatar_text_normal.xml │ ├── material_template_list_three_line_two_text_icon_text_dense.xml │ ├── material_template_list_three_line_two_text_icon_text_normal.xml │ ├── material_template_list_three_line_two_text_text_only_dense.xml │ ├── material_template_list_three_line_two_text_text_only_normal.xml │ ├── material_template_list_two_line_avatar_text_dense.xml │ ├── material_template_list_two_line_avatar_text_icon_dense.xml │ ├── material_template_list_two_line_avatar_text_icon_normal.xml │ ├── material_template_list_two_line_avatar_text_normal.xml │ ├── material_template_list_two_line_icon_text_dense.xml │ ├── material_template_list_two_line_icon_text_normal.xml │ ├── material_template_list_two_line_text_only_dense.xml │ └── material_template_list_two_line_text_only_normal.xml │ └── values │ └── strings.xml ├── mkdocs.yml └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/ 5 | .DS_Store 6 | /build 7 | /captures 8 | .externalNativeBuild 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Archived 2 | -------- 3 | 4 | This repository has been archived. 5 | 6 | You can use [Material Components Android](https://github.com/material-components/material-components-android) directly, or other libraries ([Material Dialogs](https://github.com/afollestad/material-dialogs), [TapTargetView](https://github.com/KeepSafe/TapTargetView), etc.) for drop-in components. 7 | 8 | ---------------- 9 | 10 | ![MinSdk](https://img.shields.io/badge/minSdk-16-green.svg) 11 | [![jCenter](https://img.shields.io/badge/jCenter-1.1.1-green.svg)](https://bintray.com/aohayou/maven/material-values/_latestVersion) 12 | [![License](https://img.shields.io/badge/License-Apache--2.0%20-blue.svg)](./LICENSE) 13 | 14 | ![Logo](docs/images/logo-title.png) 15 | 16 | All the values from the [Material Design guidelines](https://material.google.com) defined in resources for Android. 17 | 18 | Use the [documentation](https://esnaultdev.github.io/MaterialValues/) for more information. 19 | 20 | 21 | Values 22 | ------ 23 | 24 | Here is an overview of the values covered by this library: 25 | 26 | **Style** 27 | 28 | - [Color](https://esnaultdev.github.io/MaterialValues/style/colors/) 29 | - [Icons](https://esnaultdev.github.io/MaterialValues/style/icons/) 30 | - [Typography](https://esnaultdev.github.io/MaterialValues/style/typography/) 31 | 32 | **Layout** 33 | 34 | - [Metrics & keylines](https://esnaultdev.github.io/MaterialValues/layout/keylines/) 35 | - [Responsive UI](https://esnaultdev.github.io/MaterialValues/layout/responsive_ui/) 36 | - [Elevation](https://esnaultdev.github.io/MaterialValues/layout/elevation/) 37 | - [Structure](https://esnaultdev.github.io/MaterialValues/layout/structure/) 38 | 39 | **Components** 40 | 41 | - [Bottom navigation](https://esnaultdev.github.io/MaterialValues/component/bottom_navigation/) 42 | - [Bottom sheet](https://esnaultdev.github.io/MaterialValues/component/bottom_sheet/) 43 | - [Buttons](https://esnaultdev.github.io/MaterialValues/component/buttons/) 44 | - [Cards](https://esnaultdev.github.io/MaterialValues/component/card/) 45 | - [Chips](https://esnaultdev.github.io/MaterialValues/component/chips/) 46 | - [Dialogs](https://esnaultdev.github.io/MaterialValues/component/dialogs/) 47 | - [Dividers](https://esnaultdev.github.io/MaterialValues/component/dividers/) 48 | - [Expansion panels](https://esnaultdev.github.io/MaterialValues/component/expansion_panels/) 49 | - [Grid lists](https://esnaultdev.github.io/MaterialValues/component/grid_lists/) 50 | - [Lists](https://esnaultdev.github.io/MaterialValues/component/lists/) 51 | - [Menus](https://esnaultdev.github.io/MaterialValues/component/menus/) 52 | - [Steppers](https://esnaultdev.github.io/MaterialValues/component/steppers/) 53 | - [Subheaders](https://esnaultdev.github.io/MaterialValues/component/subheaders/) 54 | - [Tooltips](https://esnaultdev.github.io/MaterialValues/component/tooltips/) 55 | 56 | 57 | Usage 58 | ----- 59 | 60 | Just add this dependency to your build.gradle: 61 | ``` 62 | compile 'blue.aodev:material-values:1.1.1' 63 | ``` 64 | 65 | The artifact is currently only available on jCenter, not mavenCentral. 66 | Make sure that your buildscript repositories include jCenter. 67 | 68 | 69 | Changelog 70 | --------- 71 | 72 | A changelog is available [here](https://esnaultdev.github.io/MaterialValues/about/changelog/). 73 | 74 | ----- 75 | 76 | Inspired by DmitryMalkovich's [material-design-dimens](https://github.com/DmitryMalkovich/material-design-dimens). 77 | 78 | © 2016 Ao (Matthieu Esnault) - Released under [Apache-2.0 License](https://raw.githubusercontent.com/AoDevBlue/MaterialValues/master/LICENSE) 79 | 80 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.2.0' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | jcenter() 18 | } 19 | } 20 | 21 | task clean(type: Delete) { 22 | delete rootProject.buildDir 23 | } 24 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | [Documentation website](https://aodevblue.github.io/MaterialValues/) 2 | 3 | The .md files in these folders are only used to generate the documentation. 4 | 5 | -------------------------------------------------------------------------------- /docs/about/old_documentation.md: -------------------------------------------------------------------------------- 1 | # Old documentation 2 | 3 | The documentation hosted on this website matches the latest release. 4 | Check the footer to see what version is currently displayed. 5 | 6 | While it's better to keep your dependencies up-to-date, you can display an old version of the documentation. To do so: 7 | 8 | 1. Install [MkDocs](http://www.mkdocs.org/) 9 | 2. Clone the MaterialValues [repository](https://github.com/AoDevBlue/MaterialValues) 10 | 3. Checkout one of the version tags 11 | 4. Serve the documentation locally with `mkdocs serve` 12 | 5. Connect to it with your browser 13 | -------------------------------------------------------------------------------- /docs/component/bottom_navigation.md: -------------------------------------------------------------------------------- 1 | # Bottom navigation 2 | 3 | ## Elevation 4 | 5 | Defined as `@dimen/material_elevation_bottom_nav_bar`. 6 | 7 | 8 | ## Fixed bottom navigation bar 9 | 10 | ### Action size 11 | 12 | Fixed nav bar: action size 13 | 14 | 1. `@dimen/material_bottom_nav_bar_fixed_action_minimum_width` 15 | 2. `@dimen/material_bottom_nav_bar_fixed_action_maximum_width` 16 | 3. `@dimen/material_bottom_nav_bar_action_padding_horizontal` 17 | 18 | ### Bar specs 19 | 20 | Fixed nav bar: specs 21 | 22 | 1. `@dimen/material_bottom_nav_bar_height` 23 | 2. `@dimen/material_bottom_nav_bar_action_icon_size` 24 | 3. `@dimen/material_bottom_nav_bar_action_label_padding_bottom` 25 | 4. `@dimen/material_bottom_nav_bar_fixed_action_active_icon_padding_top` 26 | 5. `@dimen/material_bottom_nav_bar_fixed_action_inactive_icon_padding_top` 27 | 6. `@dimen/material_bottom_nav_bar_fixed_action_active_label_text_size` 28 | 7. `@dimen/material_bottom_nav_bar_fixed_action_inactive_label_text_size` 29 | 30 | 31 | ## Shifting bottom navigation bar 32 | 33 | ### Action size 34 | 35 | Shifting nav bar: active action size 36 | 37 | 1. `@dimen/material_bottom_nav_bar_shifting_action_active_maximum_width` 38 | 2. `@dimen/material_bottom_nav_bar_shifting_action_active_minimum_width` 39 | 40 | Shifting nav bar: inactive action size 41 | 42 | 1. `@dimen/material_bottom_nav_bar_shifting_action_inactive_maximum_width` 43 | 2. `@dimen/material_bottom_nav_bar_shifting_action_inactive_minimum_width` 44 | 45 | ### Bar specs 46 | 47 | Shifting nav bar specs 48 | 49 | 1. `@dimen/material_bottom_nav_bar_height` 50 | 2. `@dimen/material_bottom_nav_bar_action_icon_size` 51 | 3. `@dimen/material_bottom_nav_bar_shifting_action_active_icon_padding_top` 52 | 4. `@dimen/material_bottom_nav_bar_action_label_padding_bottom` 53 | 5. `@dimen/material_bottom_nav_bar_shifting_action_inactive_icon_padding_vertical` 54 | 6. `@dimen/material_bottom_nav_bar_shifting_action_active_label_text_size` 55 | 56 | 57 | --- 58 | 59 | #### See also 60 | 61 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/bottom_navigation.xml) 62 | 63 | - [Bottom navigation (Material design)](https://material.google.com/components/bottom-navigation.html) 64 | 65 | -------------------------------------------------------------------------------- /docs/component/bottom_sheet.md: -------------------------------------------------------------------------------- 1 | # Bottom sheet 2 | 3 | ## Elevation 4 | 5 | Defined as `@dimen/material_bottom_sheet_elevation`. 6 | 7 | 8 | ## Font and color 9 | 10 | | Name | Resource | 11 | | ---- | -------- | 12 | | Contents text size | `@dimen/material_bottom_sheet_contents_text_size` | 13 | | Contents text color | `@color/material_bottom_sheet_contents_text_color` | 14 | | Title text size | `@dimen/material_bottom_sheet_title_text_size` | 15 | | Title text color | `@color/material_bottom_sheet_title_text_color` | 16 | 17 | | Color | Resource | 18 | | ----- | -------- | 19 | | Sheet background | `@color/material_bottom_sheet_background_fill` | 20 | | Transparent overlay | `@color/material_bottom_sheet_transparent_overlay_fill` | 21 | 22 | 23 | ## List style 24 | 25 | Bottom sheet list headerless 26 | 27 | 1. `@dimen/material_bottom_sheet_list_padding_horizontal` 28 | 2. `@dimen/material_bottom_sheet_list_item_label_padding_start` 29 | 3. `@dimen/material_bottom_sheet_list_item_icon_size` 30 | 4. `@dimen/material_bottom_sheet_list_item_height` 31 | 5. `@dimen/material_bottom_sheet_list_headerless_padding_top` 32 | 6. `@dimen/material_bottom_sheet_list_padding_bottom` 33 | 34 | Bottom sheet list headerless 35 | 36 | 1. `@dimen/material_bottom_sheet_list_padding_horizontal` 37 | 2. `@dimen/material_bottom_sheet_list_item_label_padding_start` 38 | 3. `@dimen/material_bottom_sheet_list_item_icon_size` 39 | 4. `@dimen/material_bottom_sheet_list_item_height` 40 | 5. `@dimen/material_bottom_sheet_list_header_height` 41 | 6. `@dimen/material_bottom_sheet_list_padding_bottom` 42 | 7. `@dimen/material_bottom_sheet_list_divider_margin_top` 43 | 8. `@dimen/material_divider_height` 44 | 9. `@dimen/material_bottom_sheet_list_divider_margin_bottom` 45 | 46 | 47 | ## Grid style 48 | 49 | Bottom sheet grid 50 | 51 | 1. `@dimen/material_bottom_sheet_grid_row_padding_top` 52 | 2. `@dimen/material_bottom_sheet_grid_item_icon_size` 53 | 3. `@dimen/material_bottom_sheet_grid_row_height` 54 | 4. `@dimen/material_bottom_sheet_grid_item_label_height` 55 | 5. `@dimen/material_bottom_sheet_grid_padding_horizontal` 56 | 6. `@dimen/material_bottom_sheet_grid_padding_bottom` 57 | 58 | The text size for labels in a grid style is `@dimen/material_bottom_sheet_grid_item_label_text_size`. 59 | 60 | ---- 61 | 62 | ## Width (Tablet only) 63 | 64 | | Name | Resource | 65 | | ---- | -------- | 66 | | Minimum horizontal margin (increment) | `@integer/material_bottom_sheet_margin_horizontal_minimum_increment` | 67 | | Minimum horizontal margin | `@dimen/material_bottom_sheet_margin_horizontal_minimum` | 68 | | Minimum width (increment) | `@integer/material_bottom_sheet_width_minimum_increment` | 69 | | Minimum width | `@dimen/material_bottom_sheet_width_minimum` | 70 | 71 | 72 | --- 73 | 74 | #### See also 75 | 76 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/bottom_sheet.xml) 77 | 78 | - [Bottom sheets (Material design)](https://material.google.com/components/bottom-sheets.html) 79 | 80 | -------------------------------------------------------------------------------- /docs/component/buttons-fab.md: -------------------------------------------------------------------------------- 1 | # Buttons: Floating action button 2 | 3 | ## Size 4 | 5 | FAB size 6 | 7 | 1. `@dimen/material_button_fab_size` 8 | 2. `@dimen/material_button_fab_mini_size` 9 | 3. `@dimen/material_button_fab_icon_size` 10 | 11 | 12 | ## Edge margin 13 | 14 | FAB edge margin 15 | 16 | 1. `@dimen/material_button_fab_edge_margin` 17 | 18 | --- 19 | 20 | #### See also 21 | 22 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/button.xml) 23 | 24 | - [Buttons: FAB (Material design)](https://material.google.com/components/buttons-floating-action-button.html) 25 | 26 | -------------------------------------------------------------------------------- /docs/component/buttons.md: -------------------------------------------------------------------------------- 1 | # Buttons 2 | 3 | ## Size and padding 4 | 5 | Button size 6 | 7 | 1. `@dimen/material_button_height_minimum` 8 | 2. `@dimen/material_button_touch_target_height_minimum` 9 | 3. `@dimen/material_button_width_minimum` 10 | 4. `@dimen/material_button_gutter_horizontal` 11 | 5. `@dimen/material_button_padding_horizontal` 12 | 6. `@dimen/material_button_corner_radius` 13 | 14 | 15 | ## Flat button 16 | 17 | ### Elevation 18 | 19 | Defined as `@dimen/material_button_flat_elevation` 20 | 21 | 22 | ### Font and colors 23 | 24 | Flat button color 25 | 26 | 1. `@dimen/material_typography_regular_button_text_size`, the color depends on the button color (default `@dimen/material_typography_primary_text_color_dark`). 27 | 2. `@dimen/material_typography_regular_button_text_size`, the color depends on the button color (default `@dimen/material_typography_primary_text_color_light`). 28 | 3. Same text size as 1), `@color/material_button_text_color_disabled_light_theme` 29 | 4. Same text size as 1), `@color/material_button_text_color_disabled_dark_theme` 30 | 5. `@color/material_button_flat_background_color_pressed_light_theme` 31 | 6. `@color/material_button_flat_background_color_pressed_dark_theme` 32 | 33 | 34 | ## Raised button 35 | 36 | ### Elevation 37 | 38 | | Elevation | Resource | 39 | | --------- | -------- | 40 | | Resting | `@dimen/material_button_raised_elevation_resting` | 41 | | Pressed | `@dimen/material_button_raised_elevation_pressed` | 42 | 43 | ### Font and colors 44 | 45 | Raised button color 46 | 47 | 1. `@dimen/material_typography_regular_button_text_size`, the color depends on the button color (default `@dimen/material_typography_primary_text_color_dark`). 48 | 2. `@dimen/material_typography_regular_button_text_size`, the color depends on the button color (default `@dimen/material_typography_primary_text_color_light`). 49 | 3. Same text size as 1), `@color/material_button_text_color_disabled_light_theme` 50 | 4. Same text size as 1), `@color/material_button_text_color_disabled_dark_theme` 51 | 5. Color shade 500 52 | 6. Color shade 700 53 | 7. `@color/material_button_raised_background_color_disabled_light_theme` 54 | 8. `@color/material_button_raised_background_color_disabled_dark_theme` 55 | 56 | 57 | ## Icon toggles 58 | 59 | Icon toggles color 60 | 61 | 1. `@color/material_button_icon_light_theme_light_icon_ripple_color` 62 | 2. `@color/material_button_icon_light_theme_dark_icon_ripple_color` 63 | 3. Same color with 26% opacity 64 | 4. `@color/material_button_icon_dark_theme_light_icon_ripple_color` 65 | 66 | 67 | --- 68 | 69 | #### See also 70 | 71 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/button.xml) 72 | 73 | - [Buttons (Material design)](https://material.google.com/components/buttons.html) 74 | 75 | -------------------------------------------------------------------------------- /docs/component/chips.md: -------------------------------------------------------------------------------- 1 | # Chips 2 | 3 | ## Elevation 4 | 5 | | Name | Resource | 6 | | ---- | -------- | 7 | | Simple chip | `@dimen/material_chip_simple_elevation` | 8 | | Contact chip (closed) | `@dimen/material_chip_contact_closed_elevation` | 9 | | Contact chip (open) | `@dimen/material_chip_contact_open_elevation` | 10 | 11 | ## Simple chip 12 | 13 | Basic chip 14 | 15 | 1. `@dimen/material_chip_height` 16 | 2. `@dimen/material_chip_simple_label_padding_start` 17 | 3. `@dimen/material_chip_simple_label_padding_start_after_icon` 18 | 4. `@dimen/material_chip_simple_label_padding_end` 19 | 5. `@dimen/material_chip_simple_label_text_size` 20 | 6. *Unspecified* 21 | 22 | 23 | ## Deletable chip 24 | 25 | Both simple and contact chips can be deletable. 26 | 27 | Deletable chip 28 | 29 | 1. `@dimen/material_chip_simple_remove_icon_size` 30 | 2. `@dimen/material_chip_simple_remove_icon_margin` 31 | 3. `@color/material_chip_simple_remove_icon_color` 32 | 33 | 34 | ## Contact chip 35 | 36 | ### Closed 37 | 38 | Closed contact chip 39 | 40 | 1. `@dimen/material_chip_height` 41 | 2. `@dimen/material_chip_contact_closed_label_padding_vertical` 42 | 3. `@dimen/material_chip_contact_closed_label_padding_start` 43 | 4. `@dimen/material_chip_contact_closed_label_padding_end` 44 | 5. `@dimen/material_chip_contact_closed_label_text_size` 45 | 46 | ### Open 47 | 48 | Open contact chip 49 | 50 | 1. `@dimen/material_chip_contact_open_focused_height` 51 | 2. `@dimen/material_chip_contact_open_unfocused_height` 52 | 3. `@dimen/material_chip_contact_open_avatar_size` 53 | 4. `@dimen/material_chip_contact_open_padding_horizontal` 54 | 5. `@dimen/material_chip_contact_open_focused_padding_vertical` 55 | 6. `@dimen/material_chip_contact_open_name_text_size` 56 | 7. `@dimen/material_chip_contact_open_address_text_size` 57 | 58 | 59 | --- 60 | 61 | #### See also 62 | 63 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/chip.xml) 64 | 65 | - [Chips (Material design)](https://material.google.com/components/chips.html) 66 | 67 | -------------------------------------------------------------------------------- /docs/component/dialogs.md: -------------------------------------------------------------------------------- 1 | # Dialogs 2 | 3 | ## Elevation 4 | 5 | Defined as `@material_dialog_elevation`. 6 | 7 | 8 | ## Size and edge margins 9 | 10 | | Value | Resource | 11 | | ----- | -------- | 12 | | Minimum width (increment) | `@dimen/material_dialog_width_minimum_increment` | 13 | | Minimum width | `@dimen/material_dialog_width_minimum` | 14 | | Minimum vertical edge margin | `@dimen/material_dialog_screen_edge_margin_minimum_vertical` | 15 | | Minimum horizontal edge margin | `@dimen/material_dialog_screen_edge_margin_minimum_horizontal` | 16 | 17 | 18 | ## Title and content 19 | 20 | Dialog content 21 | 22 | 1. `@dimen/material_dialog_content_area_padding_horizontal` 23 | 2. `@dimen/material_dialog_content_area_padding_vertical` 24 | 3. `@dimen/material_dialog_content_area_title_content_margin` 25 | 4. Action area 26 | 27 | ## Actions 28 | 29 | ### Side by side 30 | 31 | Dialog actions side by side 32 | 33 | 1. Non scrollable content 34 | 2. Scrollable content 35 | 3. `@dimen/material_dialog_actions_side_by_side_height` 36 | 4. `@dimen/material_dialog_actions_side_by_side_button_height` 37 | 5. `@dimen/material_dialog_actions_side_by_side_padding_end` 38 | 6. `@dimen/material_dialog_actions_side_by_side_padding_bottom` 39 | 7. `@dimen/material_dialog_actions_side_by_side_padding_top` 40 | 8. `@dimen/material_dialog_actions_side_by_side_padding_top_with_divider` 41 | 9. `@dimen/material_divider_height` 42 | 43 | ### Stacked 44 | 45 | Dialog actions stacked 46 | 47 | 1. `@dimen/material_dialog_actions_stacked_button_height` 48 | 2. `@dimen/material_dialog_actions_stacked_padding_bottom` 49 | 3. `@dimen/material_dialog_actions_stacked_button_padding_end` 50 | 4. Dialog content 51 | 52 | 53 | ## Fullscreen dialog 54 | 55 | Documentation not yet available, check the raw values. 56 | 57 | 58 | --- 59 | 60 | #### See also 61 | 62 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/dialog.xml) 63 | 64 | - [Dialogs (Material design)](https://material.google.com/components/dialogs.html) 65 | 66 | -------------------------------------------------------------------------------- /docs/component/dividers.md: -------------------------------------------------------------------------------- 1 | # Dividers 2 | 3 | ## Size 4 | 5 | | | | 6 | | ------ | ------ | 7 | | Height | `@dimen/material_divider_height` | 8 | 9 | ## Color 10 | 11 | | Theme | Resource | 12 | | ----- | -------- | 13 | | Light theme | `@color/material_divider_color_light_theme` | 14 | | Dark theme | `@color/material_divider_color_dark_theme` | 15 | 16 | 17 | --- 18 | 19 | #### See also 20 | 21 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/divider.xml) 22 | 23 | - [Dividers (Material design)](https://material.google.com/components/dividers.html) 24 | 25 | -------------------------------------------------------------------------------- /docs/component/expansion_panels.md: -------------------------------------------------------------------------------- 1 | # Expansion panels 2 | 3 | ## Elevation 4 | 5 | The elevation is the same as the elements the expansion panel can connect with (typically, a card). 6 | 7 | 8 | ## Dimensions 9 | 10 | Expansion panel dimensions 11 | 12 | 1. `@dimen/material_expansion_panel_padding_horizontal` 13 | 2. `@dimen/material_expansion_panel_expand_icon_size` 14 | 3. `@dimen/material_expansion_panel_expand_icon_margin_start` 15 | 4. `@dimen/material_expansion_list_collapsed_height` 16 | 5. `@dimen/material_expansion_panel_expanded_margin_vertical` 17 | 6. `@dimen/material_expansion_panel_expanded_header_height` 18 | 7. `@dimen/material_expansion_panel_expanded_content_area_padding_bottom` 19 | 8. `@dimen/material_expansion_panel_expanded_action_area_padding_top` 20 | 9. `@dimen/material_expansion_panel_expanded_action_area_button_height` 21 | 10. `@dimen/material_expansion_panel_expanded_action_area_padding_bottom` 22 | 11. `@dimen/material_expansion_panel_expanded_action_area_button_margin_end` 23 | 12. `@dimen/material_expansion_panel_label_text_size` and `@color/material_expansion_panel_label_text_color` 24 | 13. `@dimen/material_expansion_panel_label_secondary_content_text_size` and `@color/material_expansion_panel_label_secondary_content_text_color` 25 | 26 | Note that action vertical padding (8. & 10.) is splitted because the top padding takes the divider height into account. 27 | It seems that a divider is always present in expansion panels, if it's not the case, use the bottom padding two times. 28 | 29 | 30 | ## Divider 31 | 32 | See [Dividers](dividers.md). 33 | 34 | 35 | --- 36 | 37 | #### See also 38 | 39 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/expansion_panel.xml) 40 | 41 | - [Expansion panels (Material design)](https://material.google.com/components/expansion-panels.html) 42 | 43 | -------------------------------------------------------------------------------- /docs/component/grid_lists.md: -------------------------------------------------------------------------------- 1 | # Grid lists 2 | 3 | ## Spacing 4 | 5 | | Spacing | Resource | 6 | | ------- | -------- | 7 | | Small | `@dimen/material_grid_list_tile_spacing_small` | 8 | | Medium | `@dimen/material_grid_list_tile_spacing_medium` | 9 | 10 | 11 | ## Headers and footers 12 | 13 | ### Height 14 | 15 | | Type | Resource | 16 | | ---- | -------- | 17 | | Single line | `@dimen/material_grid_list_header_footer_single_line_height` | 18 | | Two-line | `@dimen/material_grid_list_header_footer_two_line_height` | 19 | 20 | ### Text size 21 | 22 | Two styles exist for headers and footers. 23 | 24 | In the material design guidelines, they are referred to as the 16/12 and 14/14 styles. 25 | In the following values, the 16/12 style is called "standard" and the 14/14 "alternative". 26 | 27 | | Value | Resource | 28 | | ----- | -------- | 29 | | Title (Standard) | `@dimen/material_grid_list_header_footer_title_text_size_standard` | 30 | | Title (Alternative) | `@dimen/material_grid_list_header_footer_title_text_size_alternative` | 31 | | Subtitle (Standard) | `@dimen/material_grid_list_header_footer_subtitle_text_size_standard` | 32 | | Subtitle (Alternative) | `@dimen/material_grid_list_header_footer_subtitle_text_size_alternative` | 33 | 34 | ## Dimensions 35 | 36 | Grid headers footers dimensions 37 | 38 | 1. `@dimen/material_grid_list_header_footer_text_area_margin_start` 39 | 2. `@dimen/material_grid_list_header_footer_text_area_margin_vertical` 40 | 3. `@dimen/material_grid_list_header_footer_icon_padding_horizontal` 41 | 4. `@dimen/material_grid_list_header_footer_icon_size` 42 | 5. `@dimen/material_grid_list_header_footer_text_area_margin_end_after_icon` 43 | 6. `@dimen/material_grid_list_header_footer_text_area_margin_end_alone` 44 | 45 | 46 | --- 47 | 48 | #### See also 49 | 50 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/grid_list.xml) 51 | 52 | - [Grid lists (Material design)](https://material.google.com/components/grid-lists.html) 53 | 54 | -------------------------------------------------------------------------------- /docs/component/lists.md: -------------------------------------------------------------------------------- 1 | # Lists 2 | 3 | The "normal" prefix is added to the guidelines name for non-dense lists values. 4 | 5 | 6 | ## List padding 7 | 8 | The padding at the top of the list, before the first element, has the following values. 9 | 10 | | Value | Resource | 11 | | ----- | -------- | 12 | | Padding vertical (Normal) | `@dimen/material_list_normal_padding_vertical` | 13 | | Padding vertical (Dense) | `@dimen/material_list_dense_padding_vertical` | 14 | 15 | 16 | ## Block position 17 | 18 | The values for the text and the icon are based on their relative position in the list item. 19 | 20 | List types 21 | 22 | | Figure label | List item type | Text position | Icon position | 23 | | ------------ | -------------- | ------------- | ------------- | 24 | | 1 | Text only | first & last | - | 25 | | 2 | Icon with text | second & last | first | 26 | | 3 | Avatar with text | second & last | - | 27 | | 4 | Avatar with text and icon | second | last | 28 | 29 | Since the avatar is always first when present, its related values don't depend on its position. 30 | 31 | 32 | ## Icon 33 | 34 | List icon 35 | 36 | 1. `@dimen/material_list_icon_size` 37 | 2. `@dimen/material_list_icon_first_position_margin_start` 38 | 3. `@dimen/material_list_icon_last_position_margin_horizontal` 39 | 40 | 41 | ## Avatar 42 | 43 | List avatar 44 | 45 | 1. `@dimen/material_list_avatar_size` 46 | 2. `@dimen/material_list_avatar_margin_start` 47 | 48 | 49 | ## Text 50 | 51 | ### Size 52 | 53 | | Value | Resource | 54 | | ------ | -------- | 55 | | Primary text size (Normal) | `@dimen/material_list_normal_primary_text_size` | 56 | | Primary text size (Dense) | `@dimen/material_list_dense_primary_text_size` | 57 | | Secondary text size (Normal) | `@dimen/material_list_normal_secondary_text_size` | 58 | | Secondary text size (Dense) | `@dimen/material_list_dense_secondary_text_size` | 59 | 60 | 61 | ### Margin 62 | 63 | List text 64 | 65 | 1. `@dimen/material_list_text_first_position_margin_start` 66 | 2. `@dimen/material_list_text_second_position_edge_margin_start` 67 | 3. `@dimen/material_list_text_last_position_margin_end` 68 | 69 | 1) and 3) can be replaced by `@dimen/material_list_text_only_margin_horizontal` for text only items. 70 | 71 | 72 | ## Item height 73 | 74 | | Value | Resource | 75 | | ----- | -------- | 76 | | Single line without avatar (Normal) | `@dimen/material_list_single_line_without_avatar_normal_height` | 77 | | Single line without avatar (Dense) | `@dimen/material_list_single_line_without_avatar_dense_height` | 78 | | Single line with avatar (Normal) | `@dimen/material_list_single_line_with_avatar_normal_height` | 79 | | Single line with avatar (Dense) | `@dimen/material_list_single_line_with_avatar_dense_height` | 80 | | Two-line (Normal) | `@dimen/material_list_two_line_normal_height` | 81 | | Two-line (Dense) | `@dimen/material_list_two_line_dense_height` | 82 | | Three-line (Normal) | `@dimen/material_list_three_line_normal_height` | 83 | | Three-line (Dense) | `@dimen/material_list_three_line_dense_height` | 84 | 85 | 86 | 87 | --- 88 | 89 | #### See also 90 | 91 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/list.xml) 92 | 93 | - [Lists (Material design)](https://material.google.com/components/lists.html) 94 | 95 | -------------------------------------------------------------------------------- /docs/component/menus.md: -------------------------------------------------------------------------------- 1 | # Menus 2 | 3 | ## Elevation 4 | 5 | | Component | Resource | 6 | | --------- | -------- | 7 | | Menu | `@dimen/material_menu_elevation` | 8 | | Submenu (elevation increment per level) | `@dimen/material_menu_submenu_elevation_increment` | 9 | 10 | 11 | ## Width 12 | 13 | | Name | Resource | 14 | | ---- | -------- | 15 | | Minimum width (increment) | `@integer/material_menu_simple_width_minimum_increment` | 16 | | Minimum width | `@dimen/material_menu_simple_width_minimum` | 17 | | Maximum width (increment) | `@integer/material_menu_simple_width_maximum_increment` | 18 | | Maximum width | `@dimen/material_menu_simple_width_maximum` | 19 | 20 | 21 | ## Dimensions 22 | 23 | Simple menu dimensions 24 | 25 | 1. `@dimen/material_menu_simple_padding_vertical` 26 | 2. `@dimen/material_menu_simple_item_padding_horizontal` 27 | 3. `@dimen/material_menu_simple_text_padding_bottom` 28 | 4. `@dimen/material_menu_simple_item_height` 29 | 5. `@dimen/material_menu_simple_item_text_size` 30 | 31 | Simple menu edge 32 | 33 | 1. `@dimen/material_menu_simple_edge_margin_horizontal_minimum` 34 | 35 | 36 | ## Divider 37 | 38 | | Name | Resource | 39 | | ---- | -------- | 40 | | Height | `@dimen/material_divider_height` | 41 | | Margin top | `@dimen/material_menu_simple_divider_margin_top` | 42 | | Margin bottom | `@dimen/material_menu_simple_divider_margin_bottom` | 43 | 44 | 45 | --- 46 | 47 | #### See also 48 | 49 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/menu.xml) 50 | 51 | - [Menus (Material design)](https://material.google.com/components/menus.html) 52 | 53 | -------------------------------------------------------------------------------- /docs/component/steppers.md: -------------------------------------------------------------------------------- 1 | # Steppers 2 | 3 | Stepper 4 | 5 | 1. `@dimen/material_stepper_padding_top` 6 | 2. `@dimen/material_stepper_step_inactive_margin_bottom` 7 | 3. `@dimen/material_stepper_step_active_title_margin_bottom` 8 | 4. `@dimen/material_stepper_button_area_margin_top` 9 | 5. `@dimen/material_stepper_step_active_margin_bottom` 10 | 6. `@dimen/material_stepper_padding_horizontal` 11 | 7. `@dimen/material_stepper_overview_step_margin` 12 | 8. `@dimen/material_stepper_button_area_height` 13 | 9. `@dimen/material_stepper_button_gutter` 14 | 10. `@dimen/material_stepper_connector_margin` 15 | 11. `@dimen/material_stepper_step_circle_size` 16 | 12. `@dimen/material_stepper_connector_size` 17 | 13. `@dimen/material_stepper_step_title_text_size` and `@color/material_stepper_step_title_text_color` 18 | 14. `@dimen/material_stepper_step_subtitle_text_size` and `@color/material_stepper_step_subtitle_text_color` 19 | 15. `@dimen/material_stepper_step_circle_text_size` and `@color/material_stepper_step_circle_text_color` 20 | 16. App primary color or `@color/material_stepper_step_active_circle_color_default` 21 | 17. `@color/material_stepper_connector_color` 22 | 18. `@color/material_stepper_step_inactive_circle_color` 23 | 24 | 25 | --- 26 | 27 | #### See also 28 | 29 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/stepper.xml) 30 | 31 | - [Steppers (Material design)](https://material.google.com/components/steppers.html) 32 | 33 | -------------------------------------------------------------------------------- /docs/component/subheaders.md: -------------------------------------------------------------------------------- 1 | # Subheaders 2 | 3 | ## Text style 4 | 5 | | Name | Resource | 6 | | ---- | -------- | 7 | | Text size | `@dimen/material_subheader_text_size` | 8 | | Default text color | `@color/material_subheader_text_color_default` | 9 | 10 | Text color can also be the primary color of the app. 11 | 12 | 13 | ## Size and alignment 14 | 15 | | Name | Resource | 16 | | ---- | -------- | 17 | | Height | `@dimen/material_subheader_height` | 18 | | Padding start | `@dimen/material_subheader_padding_start` | 19 | 20 | For lists, use the same alignment values as the list item text. 21 | 22 | 23 | --- 24 | 25 | #### See also 26 | 27 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/subheader.xml) 28 | 29 | - [Buttons (Material design)](https://material.google.com/components/subheaders.html) 30 | 31 | -------------------------------------------------------------------------------- /docs/component/tooltips.md: -------------------------------------------------------------------------------- 1 | # Tooltips 2 | 3 | ## Elevation 4 | 5 | The elevation is defined as `@dimen/material_tooltip_elevation`. 6 | 7 | ## General values 8 | 9 | Tooltip 10 | 11 | 1. `@dimen/material_tooltip_height` 12 | 2. `@dimen/material_tooltip_padding_horizontal` 13 | 3. `@dimen/material_tooltip_margin_top` 14 | 4. `@dimen/material_tooltip_text_size` 15 | 5. `@dimen/material_tooltip_color` 16 | 17 | 18 | ## Edge margin 19 | 20 | Tooltip edge 21 | 22 | 1. `@dimen/material_tooltip_edge_margin_minimum` 23 | 24 | 25 | --- 26 | 27 | #### See also 28 | 29 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-component/values/tooltip.xml) 30 | 31 | - [Tooltips (Material design)](https://material.google.com/components/tooltips.html) 32 | 33 | -------------------------------------------------------------------------------- /docs/css/extra.css: -------------------------------------------------------------------------------- 1 | 2 | .logo { 3 | display: block; 4 | margin: 0 auto; 5 | } 6 | 7 | .project-desc { 8 | text-align: center; 9 | } 10 | 11 | .figure { 12 | width: 360px; 13 | } 14 | 15 | .figure-large { 16 | width: 720px; 17 | } 18 | 19 | .color-preview { 20 | width: 100%; 21 | height: 20px; 22 | } 23 | 24 | a { 25 | color: #2196F3; 26 | } 27 | 28 | a:hover { 29 | color: #2979FF; 30 | } 31 | 32 | body { 33 | color: #000; /* Fallback for older browsers */ 34 | color: rgba(0, 0, 0, 0.87); 35 | 36 | background-color: #FAFAFA; 37 | } 38 | 39 | .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { 40 | background-color: #EEEEEE; 41 | } 42 | 43 | .navbar-default { 44 | background-color: #1976D2; 45 | border-color: #1565C0; 46 | } 47 | 48 | .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { 49 | color: #FFF; 50 | background-color: #1E88E5; 51 | } 52 | 53 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { 54 | color: #FFF; 55 | background-color: #1E88E5; 56 | } 57 | 58 | .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { 59 | background-color: #1E88E5; 60 | } 61 | 62 | .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus { 63 | background-color: #1E88E5; 64 | } 65 | 66 | -------------------------------------------------------------------------------- /docs/images/components_bottomnavigation_spec_fixed1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomnavigation_spec_fixed1.png -------------------------------------------------------------------------------- /docs/images/components_bottomnavigation_spec_fixed2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomnavigation_spec_fixed2.png -------------------------------------------------------------------------------- /docs/images/components_bottomnavigation_spec_shifting1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomnavigation_spec_shifting1.png -------------------------------------------------------------------------------- /docs/images/components_bottomnavigation_spec_shifting2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomnavigation_spec_shifting2.png -------------------------------------------------------------------------------- /docs/images/components_bottomnavigation_spec_shifting3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomnavigation_spec_shifting3.png -------------------------------------------------------------------------------- /docs/images/components_bottomsheets_grid_specs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomsheets_grid_specs.png -------------------------------------------------------------------------------- /docs/images/components_bottomsheets_list_header_specs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomsheets_list_header_specs.png -------------------------------------------------------------------------------- /docs/images/components_bottomsheets_list_headerless_specs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_bottomsheets_list_headerless_specs.png -------------------------------------------------------------------------------- /docs/images/components_buttons_flat_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_buttons_flat_color.png -------------------------------------------------------------------------------- /docs/images/components_buttons_raised_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_buttons_raised_color.png -------------------------------------------------------------------------------- /docs/images/components_buttons_size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_buttons_size.png -------------------------------------------------------------------------------- /docs/images/components_buttons_toggle_icons_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_buttons_toggle_icons_color.png -------------------------------------------------------------------------------- /docs/images/components_card_actions_horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_actions_horizontal.png -------------------------------------------------------------------------------- /docs/images/components_card_actions_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_actions_icons.png -------------------------------------------------------------------------------- /docs/images/components_card_actions_vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_actions_vertical.png -------------------------------------------------------------------------------- /docs/images/components_card_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_layout.png -------------------------------------------------------------------------------- /docs/images/components_card_media_in_title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_media_in_title.png -------------------------------------------------------------------------------- /docs/images/components_card_media_shrunk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_media_shrunk.png -------------------------------------------------------------------------------- /docs/images/components_card_supporting_text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_supporting_text.png -------------------------------------------------------------------------------- /docs/images/components_card_title_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_title_large.png -------------------------------------------------------------------------------- /docs/images/components_card_title_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_card_title_small.png -------------------------------------------------------------------------------- /docs/images/components_chip_basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_chip_basic.png -------------------------------------------------------------------------------- /docs/images/components_chip_contact_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_chip_contact_open.png -------------------------------------------------------------------------------- /docs/images/components_chip_deletable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_chip_deletable.png -------------------------------------------------------------------------------- /docs/images/components_chips_contact_closed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_chips_contact_closed.png -------------------------------------------------------------------------------- /docs/images/components_dialogs_actions_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_dialogs_actions_side.png -------------------------------------------------------------------------------- /docs/images/components_dialogs_actions_stacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_dialogs_actions_stacked.png -------------------------------------------------------------------------------- /docs/images/components_dialogs_content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_dialogs_content.png -------------------------------------------------------------------------------- /docs/images/components_expansionpanel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_expansionpanel.png -------------------------------------------------------------------------------- /docs/images/components_fab_edge_margin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_fab_edge_margin.png -------------------------------------------------------------------------------- /docs/images/components_fab_size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_fab_size.png -------------------------------------------------------------------------------- /docs/images/components_grid_list_footer_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_grid_list_footer_header.png -------------------------------------------------------------------------------- /docs/images/components_lists_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_lists_avatar.png -------------------------------------------------------------------------------- /docs/images/components_lists_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_lists_icon.png -------------------------------------------------------------------------------- /docs/images/components_lists_text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_lists_text.png -------------------------------------------------------------------------------- /docs/images/components_lists_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_lists_types.png -------------------------------------------------------------------------------- /docs/images/components_menu_simple_dimension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_menu_simple_dimension.png -------------------------------------------------------------------------------- /docs/images/components_menu_simple_edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_menu_simple_edge.png -------------------------------------------------------------------------------- /docs/images/components_stepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_stepper.png -------------------------------------------------------------------------------- /docs/images/components_tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_tooltip.png -------------------------------------------------------------------------------- /docs/images/components_tooltip_edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/components_tooltip_edge.png -------------------------------------------------------------------------------- /docs/images/layout_metrics_baseline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_metrics_baseline.png -------------------------------------------------------------------------------- /docs/images/layout_metrics_incremental.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_metrics_incremental.png -------------------------------------------------------------------------------- /docs/images/layout_metrics_keyline_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_metrics_keyline_list.png -------------------------------------------------------------------------------- /docs/images/layout_responsive_content_hierarchy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_responsive_content_hierarchy.png -------------------------------------------------------------------------------- /docs/images/layout_structure_appbar_common_values.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_structure_appbar_common_values.png -------------------------------------------------------------------------------- /docs/images/layout_structure_appbar_phone_default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_structure_appbar_phone_default.png -------------------------------------------------------------------------------- /docs/images/layout_structure_appbar_phone_extended.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/layout_structure_appbar_phone_extended.png -------------------------------------------------------------------------------- /docs/images/logo-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/logo-title.png -------------------------------------------------------------------------------- /docs/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/docs/images/logo.png -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

All the values from the Material Design guidelines defined in resources for Android.

4 | 5 | --- 6 | 7 | ## Documentation 8 | 9 | All the values in this documentation use the xml reference representation. 10 | 11 | You can also use them programmatically using `material.values.R` 12 | 13 | For example: 14 | 15 | | Xml reference | Code reference | 16 | | :--- | :--- | 17 | | `@color/material_color_green_primary` | `R.color.material_color_green_primary` 18 | | `@dimen/material_list_two_line_dense_height` | `R.dimen.material_list_two_line_dense_height` 19 | | `@dimen/material_elevation_card_raised` | `R.dimen.material_elevation_card_raised` 20 | | `@dimen/material_typography_regular_title_text_size` | `R.dimen.material_typography_regular_title_text_size` 21 | 22 | 23 | --- 24 | 25 | ## Missing values 26 | 27 | If a section of the Material Design specs is not included, it may be because it has no values or is only available on desktop. 28 | 29 | Note that the values for the following components are not available as they are already well implemented in Android: 30 | 31 | - Selection controls 32 | - Sliders 33 | - Snackbars & toasts 34 | - Tabs 35 | - Text fields 36 | 37 | --- 38 | 39 | ## Disclaimer 40 | 41 | Most of the visuals come directly from the [Material design specifications](https://material.google.com), and are property of Google. 42 | 43 | -------------------------------------------------------------------------------- /docs/layout/elevation.md: -------------------------------------------------------------------------------- 1 | # Elevation 2 | 3 | | Component | Resource | 4 | | --------- | -------- | 5 | | App bar | `@dimen/material_elevation_app_bar` | 6 | | Flat button | `@dimen/material_elevation_flat_button` | 7 | | Raised button (resting) | `@dimen/material_elevation_raised_button_resting` | 8 | | Raised button (pressed) | `@dimen/material_elevation_raised_button_pressed` | 9 | | Floating action button (resting) | `@dimen/material_elevation_fab_resting` | 10 | | Floating action button (pressed) | `@dimen/material_elevation_fab_pressed` | 11 | | Card (resting) | `@dimen/material_elevation_card_resting` | 12 | | Card (raised) | `@dimen/material_elevation_card_raised` | 13 | | Menu | `@dimen/material_elevation_menu` | 14 | | Submenu (increment for each level) | `@dimen/material_elevation_submenu_increment` | 15 | | Dialog | `@dimen/material_elevation_dialog` | 16 | | Navigation drawer | `@dimen/material_elevation_nav_drawer` | 17 | | Right drawer | `@dimen/material_elevation_right_drawer` | 18 | | Bottom sheet (modal) | `@dimen/material_elevation_bottom_sheet_modal` | 19 | | Refresh indicator | `@dimen/material_elevation_refresh_indicator` | 20 | | Search bar (resting) | `@dimen/material_elevation_search_bar_resting` | 21 | | Search bar (scrolled) | `@dimen/material_elevation_search_bar_scrolled` | 22 | | Snackbar | `@dimen/material_elevation_snackbar` | 23 | | Switch | `@dimen/material_elevation_switch` | 24 | | Bottom navigation bar | `@dimen/material_elevation_bottom_nav_bar` | 25 | | Chip | `@dimen/material_elevation_chip` | 26 | | Contact chip (closed) | `@dimen/material_elevation_contact_chip_closed` | 27 | | Contact chip (open) | `@dimen/material_elevation_contact_chip_open` | 28 | | Tooltip | `@dimen/material_elevation_tooltip` | 29 | 30 | These values can also be referenced from their component-related values. 31 | 32 | --- 33 | 34 | #### See also 35 | 36 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-layout/values/elevation.xml) 37 | 38 | - [Elevation (Material design)](https://material.google.com/material-design/elevation-shadows.html) 39 | 40 | -------------------------------------------------------------------------------- /docs/layout/keylines.md: -------------------------------------------------------------------------------- 1 | #Metrics & Keylines 2 | 3 | ## Baseline grid 4 | 5 | Baseline grid 6 | 7 | Baseline grid values are provided as multiples: 8 | 9 | - `@dimen/material_baseline_grid_1x` 10 | - `@dimen/material_baseline_grid_2x` 11 | - ... 12 | - `@dimen/material_baseline_grid_24x` 13 | - `@dimen/material_baseline_grid_25x` 14 | 15 | Half-increments are also available for centering elements: 16 | 17 | - `@dimen/material_baseline_grid_0.5x` 18 | - `@dimen/material_baseline_grid_1.5x` 19 | - ... 20 | - `@dimen/material_baseline_grid_8.5x` 21 | - `@dimen/material_baseline_grid_9.5x` 22 | 23 | It is recommended to use the baseline grid to specify component dimensions. 24 | 25 | 26 | ## Increments 27 | 28 | Increments 29 | 30 | Increment values are provided as multiples: 31 | 32 | - `@dimen/material_increment_1x` 33 | - `@dimen/material_increment_2x` 34 | - ... 35 | - `@dimen/material_increment_9x` 36 | - `@dimen/material_increment_10x` 37 | 38 | The increment size is based on the app bar size. 39 | 40 | | Device type | Size | 41 | |-------------|------| 42 | | Phone (landscape) | `48dp` | 43 | | Phone (portrait) | `56dp` | 44 | | Tablet | `64dp` | 45 | 46 | Every dimension relying on increments is provided alongside an `@integer` value so that a custom increment size can be used. 47 | 48 | 49 | Half increments are also available for centering elements: 50 | 51 | - `@dimen/material_increment_0.5x` 52 | - `@dimen/material_increment_1.5x` 53 | - ... 54 | - `@dimen/material_increment_3.5x` 55 | - `@dimen/material_increment_4.5x` 56 | 57 | 58 | ## Content keylines 59 | 60 | Increments 61 | 62 | 1. `@dimen/material_content_edge_margin_horizontal` 63 | 2. `@dimen/material_content_secondary_edge_margin_start` 64 | 65 | 66 | ## Other keylines 67 | 68 | | Keyline | Value | 69 | | ------- | ----- | 70 | | Toolbar iconography | `@dimen/material_baseline_grid_toolbar_icon` | 71 | | Typography | `@dimen/material_baseline_grid_typography` | 72 | 73 | --- 74 | 75 | #### Related apps 76 | 77 | Want to display these keylines on your device? 78 | 79 | Use one of the following apps: 80 | 81 | | Name | Google Play | Github | 82 | | ----- | ----------- | ------ | 83 | | **Material Keylines** | [Google Play](https://play.google.com/store/apps/details?id=blue.aodev.materialkeylines) | [Github](https://github.com/AoDevBlue/MaterialKeylines) | 84 | | **Material Cue** | [Google Play](https://play.google.com/store/apps/details?id=com.actinarium.materialcue) | - | 85 | | **Keyline Pushing** | [Google Play](https://play.google.com/store/apps/details?id=com.faizmalkani.keylines) | - | 86 | 87 | 88 | --- 89 | 90 | #### See also 91 | 92 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-layout/values/keylines.xml) 93 | 94 | - [Metrics & keylines (Material design)](https://material.google.com/layout/metrics-keylines.html) 95 | 96 | -------------------------------------------------------------------------------- /docs/layout/responsive_ui.md: -------------------------------------------------------------------------------- 1 | # Responsive UI 2 | 3 | ## Content hierarchy 4 | 5 | Content hierarchy 6 | 7 | The number of content hierarchy levels is defined as `@integer/material_responsive_content_levels`. 8 | 9 | ## Columns 10 | 11 | The number of columns is defined as `@integer/material_responsive_columns`. 12 | 13 | 14 | ## Gutter 15 | 16 | The gutter is defined as `@dimen/material_responsive_gutter`. 17 | 18 | 19 | ## Device information 20 | 21 | The distinction between handsets and tablets can be made using `@bool/material_responsive_is_tablet`. 22 | 23 | **This distinction is arbitrary and might be irrelevant.** 24 | 25 | 26 | --- 27 | 28 | #### See also 29 | 30 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-layout/values/responsive.xml) 31 | 32 | - [Responsive UI (Material design)](https://material.google.com/layout/responsive-ui.html) 33 | 34 | -------------------------------------------------------------------------------- /docs/layout/structure.md: -------------------------------------------------------------------------------- 1 | # Structure 2 | 3 | ## Status bar 4 | 5 | | Value | Resource | 6 | | ----- | -------- | 7 | | Height | `@dimen/material_status_bar_height` | 8 | 9 | ## App bar 10 | 11 | ### Common values 12 | 13 | Common values 14 | 15 | 1. `@dimen/material_app_bar_title_edge_margin_start` 16 | 2. `@dimen/material_app_bar_icon_action_size` 17 | 3. `@dimen/material_app_bar_icon_action_icon_size` 18 | 4. `@dimen/material_app_bar_icon_action_margin_horizontal` 19 | 5. `@dimen/material_app_bar_icon_action_margin_vertical` 20 | 21 | ### Default size 22 | 23 | App bar default 24 | 25 | 1. `@dimen/material_app_bar_default_height` 26 | 2. `@dimen/material_app_bar_default_title_text_size` 27 | 28 | ### Extended size 29 | 30 | App bar extended 31 | 32 | 1. `@dimen/material_app_bar_extended_height` 33 | 2. `@dimen/material_app_bar_default_height` 34 | 3. `@dimen/material_app_bar_extended_extension_height` 35 | 4. `@dimen/material_app_bar_extended_title_text_size` 36 | 37 | Note that on tablet and on phones in landscape, the extension height is equal to 1 increment, as the 38 | total extended height is equal to 2 increments. 39 | 40 | --- 41 | 42 | #### See also 43 | 44 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-layout/values/structure.xml) 45 | 46 | - [Buttons (Material design)](https://material.google.com/layout/structure.html) 47 | -------------------------------------------------------------------------------- /docs/style/colors.md: -------------------------------------------------------------------------------- 1 | # Color palette 2 | 3 | ## Primary colors 4 | 5 | | Shade | Resource | 6 | |-------|----------| 7 | | 50 | `@color/material_color_NAME_50` | 8 | | 100 | `@color/material_color_NAME_100` | 9 | | 200 | `@color/material_color_NAME_200` | 10 | | 300 | `@color/material_color_NAME_300` | 11 | | 400 | `@color/material_color_NAME_400` | 12 | | 500 | `@color/material_color_NAME_500` | 13 | | 600 | `@color/material_color_NAME_600` | 14 | | 700 | `@color/material_color_NAME_700` | 15 | | 800 | `@color/material_color_NAME_800` | 16 | | 900 | `@color/material_color_NAME_900` | 17 | 18 | 19 | ## Accent colors 20 | 21 | | Shade | Resource | 22 | |-------|----------| 23 | | A100 | `@color/material_color_NAME_accent_100` | 24 | | A200 | `@color/material_color_NAME_accent_200` | 25 | | A400 | `@color/material_color_NAME_accent_400` | 26 | | A700 | `@color/material_color_NAME_accent_700` | 27 | 28 | 29 | ## Common values 30 | 31 | | Name | Resource | 32 | |---------------|----------| 33 | | Primary | `color/material_color_NAME_primary` | 34 | | Primary dark | `color/material_color_NAME_primary_dark` | 35 | | Accent | `color/material_color_NAME_accent` | 36 | 37 | 38 | ## Color names 39 | 40 | ### Colors with both primary and accent colors 41 | 42 | | Color name | Resource prefix | Color | 43 | |------------|-----------------|-------| 44 | | Red | `red` |
| 45 | | Pink | `pink` |
| 46 | | Purple | `purple` |
| 47 | | Deep Purple | `deep_purple` |
| 48 | | Indigo | `indigo` |
| 49 | | Blue | `blue` |
| 50 | | Light Blue | `light_blue` |
| 51 | | Cyan | `cyan` |
| 52 | | Teal | `teal` |
| 53 | | Green | `green` |
| 54 | | Light Green | `light_green` |
| 55 | | Lime | `lime` |
| 56 | | Yellow | `yellow` |
| 57 | | Amber | `amber` |
| 58 | | Orange | `orange` |
| 59 | | Deep Orange | `deep_orange` |
| 60 | 61 | ### Colors with only primary colors 62 | 63 | | Color name | Resource prefix | Color | 64 | |------------|-----------------|-------| 65 | | Brown | `brown` |
| 66 | | Grey | `grey` |
| 67 | | Blue Grey | `blue_grey` |
| 68 | 69 | 70 | ## Text color 71 | 72 | See [Typography](/style/typography.md). 73 | 74 | 75 | --- 76 | 77 | #### See also 78 | 79 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-style/values/colors.xml) 80 | 81 | - [Color (Material design)](https://material.google.com/style/color.html) 82 | 83 | -------------------------------------------------------------------------------- /docs/style/icons.md: -------------------------------------------------------------------------------- 1 | # Icons 2 | 3 | ## Color 4 | 5 | ### Light theme 6 | 7 | | Color | Resource | 8 | | ------ | -------- | 9 | | Active | `@color/material_icon_color_light_theme_active` | 10 | | Inactive | `@color/material_icon_color_light_theme_inactive` | 11 | 12 | A color state list is available as well: `@color/material_icon_color_light_theme`. 13 | 14 | ### Dark theme 15 | 16 | | Color | Resource | 17 | | ------ | -------- | 18 | | Active | `@color/material_icon_color_dark_theme_active` | 19 | | Inactive | `@color/material_icon_color_dark_theme_inactive` | 20 | 21 | A color state list is available as well: `@color/material_icon_color_dark_theme`. 22 | 23 | 24 | ## Size 25 | 26 | | Icon type | Resource | 27 | | --------- | -------- | 28 | | System | `@dimen/material_icon_size_system` | 29 | | Product | `@dimen/material_icon_size_product` | 30 | 31 | 32 | --- 33 | 34 | #### See also 35 | 36 | - [Raw values](https://github.com/AoDevBlue/MaterialValues/blob/master/material-values/src/main/res-style/values/icons.xml) 37 | 38 | - [Icons (Material design)](https://material.google.com/style/icons.html) 39 | 40 | -------------------------------------------------------------------------------- /feedback.md: -------------------------------------------------------------------------------- 1 | 2 | Some feedback about the material design guidelines. 3 | This feedback is relevant to the August 2016 release of the spec. 4 | 5 | Material design is great and the specifications are formidable to work with, 6 | but I have stumbled upon some details during the creation of this library. 7 | 8 | 9 | Bottom sheets 10 | ------------- 11 | 12 | The grid list label (text size?) is defined in dp instead of sp. 13 | 14 | 15 | Chips 16 | ----- 17 | 18 | Top specs are that all labels should be 13sp but the closed contact chip specs indicate a value of 14sp. 19 | 20 | 21 | Divider 22 | ------- 23 | 24 | Some specs for a large divider could be set here, having a 7dp top padding and a 8dp bottom padding. 25 | These values are specified independently in `Bottom sheets`, `Dialogs` and `Menus` and could reference a common spec here. 26 | 27 | 28 | Menus 29 | ----- 30 | 31 | ### Specs 32 | 33 | Minor fixes: 34 | - "test" at the end of the first paragraph :) 35 | - `Mobile` vs `Various widths`, should `Various widths` be `Tablet`? 36 | - Rename `Mobile` to `Simple menu (mobile)`, `Various widths` to `Simple menu (Various widths)` and merge the `Cascading menu` elements 37 | - The specs for the `Cascading menu` font are in pt 38 | - Mobile: `Menu item text left padding: 16dp` -> `Menu item text left and right padding: 16dp` to match the `components_dialogs_simplemenus8.png` and `components_dialogs_simplemenus9.png` diagrams 39 | - Missing divider specs for the simple menu (present in cascading menu), I suppose it's the same (16dp height) 40 | 41 | Should the position of the text in the simple menu items be specified by a bottom padding? 42 | With tall scripts and scaled text using sp, the text will expand vertically. 43 | Why not centering the text vertically in the item, to match the cascading menu layout? 44 | 45 | 46 | Progress & activity 47 | ------------------- 48 | 49 | Last video doesn't load: `error Media "components-progressactivity-behavior_Loading_SwipeDown_noload_xhdpi_005.mp4" not found` 50 | 51 | 52 | Steppers 53 | -------- 54 | 55 | Minor fixes: 56 | - Should the `Google Blue 500` color spec be renamed to `Material Blue 500`? 57 | - One color spec is `Google Blue 500`, another is `Grey 400`, rename one for consistency. 58 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | org.gradle.jvmargs=-Xmx1536m 13 | org.gradle.daemon=true 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/esnaultdev/MaterialValues/dc7352a356847c7649c0f3faf9a0b01413ad7907/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Dec 28 10:00:20 PST 2015 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 7 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /material-values/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /material-values/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id "com.jfrog.bintray" version "1.7" 3 | id "com.github.dcendents.android-maven" version "1.4.1" 4 | } 5 | apply plugin: 'com.android.library' 6 | 7 | 8 | group = 'blue.aodev' 9 | //artifact name = module name (material-values) 10 | version = '1.1.1' 11 | 12 | android { 13 | compileSdkVersion 24 14 | buildToolsVersion "24.0.3" 15 | 16 | defaultConfig { 17 | minSdkVersion 16 18 | targetSdkVersion 24 19 | versionCode 4 20 | versionName "1.1.1" 21 | } 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 26 | } 27 | 28 | template { 29 | 30 | } 31 | } 32 | sourceSets { 33 | main.res.srcDirs = ['src/main/res-style', 'src/main/res-layout', 'src/main/res-component'] 34 | template.res.srcDirs = main.res.srcDirs << 'src/template/res' 35 | } 36 | } 37 | 38 | dependencies { 39 | compile fileTree(dir: 'libs', include: ['*.jar']) 40 | } 41 | 42 | 43 | bintray { 44 | Properties properties = new Properties() 45 | properties.load(project.rootProject.file('local.properties').newDataInputStream()) 46 | 47 | user = properties.getProperty('bintrayUser') 48 | key = properties.getProperty('bintrayApiKey') 49 | 50 | pkg { 51 | repo = 'maven' 52 | name = 'material-values' 53 | 54 | version { 55 | name = '1.1.1' 56 | } 57 | } 58 | configurations = ['archives'] 59 | } 60 | 61 | task sourcesJar(type: Jar) { 62 | from android.sourceSets.main.java.srcDirs 63 | classifier = 'sources' 64 | } 65 | 66 | artifacts { 67 | archives sourcesJar 68 | } 69 | -------------------------------------------------------------------------------- /material-values/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /opt/android-sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /material-values/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values-w1280dp/bottom_sheet.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 2 22 | 8 23 | @dimen/material_increment_2x 24 | @dimen/material_increment_8x 25 | 26 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values-w1440dp/bottom_sheet.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 3 22 | 9 23 | @dimen/material_increment_3x 24 | @dimen/material_increment_9x 25 | 26 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values-w960dp/bottom_sheet.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 1 22 | 6 23 | @dimen/material_increment_1x 24 | @dimen/material_increment_6x 25 | 26 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/bottom_navigation.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_elevation_bottom_nav_bar 22 | @dimen/material_baseline_grid_7x 23 | 24 | @dimen/material_icon_size_system 25 | @dimen/material_baseline_grid_1.5x 26 | 10dp 27 | 14sp 28 | 6dp 29 | 30 | 31 | 32 | @dimen/material_baseline_grid_21x 33 | @dimen/material_baseline_grid_10x 34 | 35 | @dimen/material_bottom_nav_bar_action_active_icon_padding_top 36 | @dimen/material_baseline_grid_1x 37 | 38 | @dimen/material_bottom_nav_bar_action_active_label_text_size 39 | 12sp 40 | 41 | 42 | 43 | @dimen/material_baseline_grid_21x 44 | @dimen/material_baseline_grid_12x 45 | @dimen/material_baseline_grid_12x 46 | @dimen/material_baseline_grid_7x 47 | 48 | @dimen/material_bottom_nav_bar_action_active_icon_padding_top 49 | @dimen/material_baseline_grid_2x 50 | 51 | @dimen/material_bottom_nav_bar_action_active_label_text_size 52 | 53 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/button.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_baseline_grid_4.5x 22 | @dimen/material_baseline_grid_6x 23 | @dimen/material_baseline_grid_11x 24 | @dimen/material_baseline_grid_1x 25 | @dimen/material_baseline_grid_1x 26 | @color/material_color_black_26_percent 27 | @color/material_color_white_30_percent 28 | 2dp 29 | 30 | 31 | 32 | @dimen/material_elevation_flat_button 33 | @color/material_button_specific_color_medium_grey_40_percent 34 | @color/material_button_specific_color_light_grey_25_percent 35 | 36 | 37 | 38 | @dimen/material_elevation_raised_button_resting 39 | @dimen/material_elevation_raised_button_pressed 40 | @color/material_color_black_12_percent 41 | @color/material_color_white_12_percent 42 | 43 | 44 | 45 | 46 | 47 | @color/material_color_white_30_percent 48 | @color/material_color_black_12_percent 49 | @color/material_color_white_20_percent 50 | 51 | 52 | 53 | 54 | @dimen/material_baseline_grid_7x 55 | @dimen/material_icon_size_system 56 | @dimen/material_baseline_grid_5x 57 | @dimen/material_content_edge_margin_horizontal 58 | 59 | 60 | 61 | 62 | #66999999 63 | #3FCCCCCC 64 | 65 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/chip.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_baseline_grid_4x 22 | @color/material_typography_primary_text_color_dark 23 | 24 | 25 | 26 | @dimen/material_elevation_chip 27 | @dimen/material_baseline_grid_1.5x 28 | @dimen/material_baseline_grid_1x 29 | @dimen/material_baseline_grid_1.5x 30 | 13sp 31 | 32 | 33 | 34 | @dimen/material_icon_size_system 35 | @color/material_icon_color_dark_theme_active 36 | @dimen/material_baseline_grid_0.5x 37 | 38 | 39 | 40 | @dimen/material_elevation_contact_chip_closed 41 | @dimen/material_baseline_grid_1x 42 | @dimen/material_baseline_grid_1.5x 43 | @dimen/material_baseline_grid_1x 44 | @dimen/material_typography_regular_body_1_text_size 45 | 46 | 47 | 48 | @dimen/material_elevation_contact_chip_open 49 | @dimen/material_typography_regular_subheading_text_size 50 | @dimen/material_typography_regular_body_1_text_size 51 | @dimen/material_baseline_grid_5x 52 | @dimen/material_baseline_grid_1.5x 53 | 54 | @dimen/material_baseline_grid_9x 55 | @dimen/material_baseline_grid_7x 56 | @dimen/material_baseline_grid_2x 57 | 58 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/dialog.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_elevation_dialog 22 | @dimen/material_baseline_grid_5x 23 | @dimen/material_baseline_grid_3x 24 | 5 25 | @dimen/material_increment_5x 26 | 27 | 28 | 29 | @dimen/material_baseline_grid_3x 30 | @dimen/material_baseline_grid_3x 31 | @dimen/material_baseline_grid_2.5x 32 | 33 | 34 | 35 | @dimen/material_baseline_grid_6.5x 36 | @dimen/material_button_height_minimum 37 | 38 | @dimen/material_baseline_grid_1x 39 | @dimen/material_baseline_grid_1x 40 | 7dp 41 | @dimen/material_baseline_grid_1x 42 | 43 | 44 | 45 | @dimen/material_baseline_grid_6x 46 | @dimen/material_baseline_grid_1x 47 | @dimen/material_baseline_grid_2x 48 | 49 | 50 | 51 | @dimen/material_baseline_grid_7x 52 | @dimen/material_baseline_grid_10x 53 | @dimen/material_typography_regular_title_text_size 54 | @dimen/material_baseline_grid_9x 55 | @dimen/material_typography_regular_button_text_size 56 | @dimen/material_baseline_grid_2x 57 | @dimen/material_baseline_grid_2x 58 | 59 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/divider.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 1dp 22 | 23 | 24 | 25 | @color/material_color_black_12_percent 26 | @color/material_color_white_12_percent 27 | 28 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/expansion_panel.xml: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 15sp 21 | @color/material_typography_primary_text_color_dark 22 | @dimen/material_typography_regular_caption_text_size 23 | @color/material_typography_secondary_text_color_dark 24 | 25 | 26 | @dimen/material_baseline_grid_3x 27 | @dimen/material_icon_size_system 28 | @dimen/material_baseline_grid_2x 29 | 30 | 31 | 32 | 33 | @dimen/material_baseline_grid_6x 34 | 35 | 36 | 37 | @dimen/material_baseline_grid_2x 38 | @dimen/material_baseline_grid_8x 39 | @dimen/material_baseline_grid_2x 40 | @dimen/material_baseline_grid_2x 41 | 15dp 42 | @dimen/material_button_height_minimum 43 | @dimen/material_baseline_grid_1x 44 | 45 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/grid_list.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 1dp 22 | @dimen/material_baseline_grid_0.5x 23 | @dimen/material_baseline_grid_6x 24 | @dimen/material_baseline_grid_8.5x 25 | 26 | 27 | 32 | 16sp 33 | 12sp 34 | 14sp 35 | 14sp 36 | 37 | 38 | 39 | @dimen/material_baseline_grid_2x 40 | @dimen/material_baseline_grid_2x 41 | @dimen/material_baseline_grid_2x 42 | @dimen/material_baseline_grid_1x 43 | 44 | 45 | 46 | @dimen/material_icon_size_system 47 | @dimen/material_baseline_grid_2x 48 | 49 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/list.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_baseline_grid_1x 22 | @dimen/material_typography_regular_subheading_text_size 23 | @dimen/material_typography_regular_body_1_text_size 24 | 25 | @dimen/material_baseline_grid_0.5x 26 | 13sp 27 | @dimen/material_list_dense_primary_text_size 28 | 29 | 30 | 31 | @dimen/material_icon_size_system 32 | @dimen/material_content_edge_margin_horizontal 33 | @dimen/material_baseline_grid_2x 34 | @dimen/material_content_edge_margin_horizontal 35 | 36 | 37 | 38 | @dimen/material_baseline_grid_5x 39 | @dimen/material_content_edge_margin_horizontal 40 | 41 | 42 | 43 | @dimen/material_content_edge_margin_horizontal 44 | @dimen/material_content_edge_margin_horizontal 45 | @dimen/material_content_secondary_edge_margin_start 46 | @dimen/material_content_edge_margin_horizontal 47 | @dimen/material_baseline_grid_typography 48 | 49 | 50 | 51 | @dimen/material_baseline_grid_6x 52 | @dimen/material_baseline_grid_5x 53 | 54 | @dimen/material_baseline_grid_7x 55 | @dimen/material_baseline_grid_6x 56 | 57 | @dimen/material_baseline_grid_9x 58 | @dimen/material_baseline_grid_7.5x 59 | 60 | @dimen/material_baseline_grid_11x 61 | @dimen/material_baseline_grid_9.5x 62 | 63 | 64 | 65 | @dimen/material_content_edge_margin_horizontal 66 | 67 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/menu.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_elevation_menu 22 | @dimen/material_elevation_submenu_increment 23 | 24 | 25 | 2 26 | 5 27 | @dimen/material_increment_2x 28 | @dimen/material_increment_5x 29 | @dimen/material_content_edge_margin_horizontal 30 | 31 | @dimen/material_baseline_grid_1x 32 | 33 | 34 | @dimen/material_baseline_grid_6x 35 | @dimen/material_content_edge_margin_horizontal 36 | @dimen/material_baseline_grid_2.5x 37 | 16dp 38 | 39 | 40 | 41 | 7dp 42 | @dimen/material_baseline_grid_1x 43 | 44 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/selection_control.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/slider.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/snackbar.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/stepper.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_baseline_grid_3x 22 | @dimen/material_typography_regular_caption_text_size 23 | @color/material_color_white 24 | 25 | 26 | 27 | @dimen/material_typography_regular_body_1_text_size 28 | @color/material_typography_primary_text_color_dark 29 | @dimen/material_typography_regular_caption_text_size 30 | @color/material_typography_secondary_text_color_dark 31 | 32 | 33 | 34 | 35 | @color/material_color_blue_500 36 | @dimen/material_baseline_grid_6x 37 | @dimen/material_baseline_grid_2x 38 | 39 | 40 | 41 | @color/material_color_black_38_percent 42 | @dimen/material_baseline_grid_5x 43 | 44 | 45 | 46 | 1dp 47 | @color/material_color_grey_400 48 | @dimen/material_baseline_grid_1x 49 | 50 | 51 | 52 | @dimen/material_baseline_grid_3x 53 | @dimen/material_baseline_grid_3x 54 | @dimen/material_baseline_grid_6x 55 | @dimen/material_baseline_grid_1x 56 | @dimen/material_baseline_grid_1.5x 57 | @dimen/material_baseline_grid_1.5x 58 | 59 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/subheader.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | @color/material_typography_secondary_text_color_dark 23 | @dimen/material_typography_regular_subheading_text_size 24 | 25 | 26 | 27 | @dimen/material_baseline_grid_6x 28 | 29 | @dimen/material_content_edge_margin_horizontal 30 | 31 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/tab.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/text_field.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-component/values/tooltip.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | @dimen/material_elevation_tooltip 21 | @dimen/material_typography_regular_body_2_text_size 22 | @color/material_color_grey_700 23 | @dimen/material_baseline_grid_4x 24 | @dimen/material_baseline_grid_2x 25 | @dimen/material_baseline_grid_3x 26 | @dimen/material_baseline_grid_1x 27 | 28 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-land/keylines.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 48dp 4 | 96dp 5 | 144dp 6 | 192dp 7 | 240dp 8 | 288dp 9 | 336dp 10 | 384dp 11 | 432dp 12 | 480dp 13 | 14 | 15 | 24dp 16 | 72dp 17 | 120dp 18 | 168dp 19 | 216dp 20 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-land/structure.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @dimen/material_baseline_grid_0.5x 5 | 0dp 6 | 7 | 8 | @dimen/material_typography_regular_subheading_text_size 9 | 10 | 11 | @dimen/material_increment_2x 12 | @dimen/material_increment_1x 13 | @dimen/material_typography_regular_title_text_size 14 | 15 | 16 | @dimen/material_baseline_grid_2x 17 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-sw600dp/keylines.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 64dp 4 | 128dp 5 | 192dp 6 | 256dp 7 | 320dp 8 | 384dp 9 | 448dp 10 | 512dp 11 | 576dp 12 | 640dp 13 | 14 | 15 | 32dp 16 | 96dp 17 | 160dp 18 | 224dp 19 | 288dp 20 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-sw600dp/responsive.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | @dimen/material_baseline_grid_3x 20 | @dimen/material_baseline_grid_10x 21 | 22 | true 23 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-sw600dp/structure.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @dimen/material_baseline_grid_1.5x 22 | @dimen/material_baseline_grid_1x 23 | 24 | 25 | @dimen/material_typography_regular_title_text_size 26 | 27 | 28 | @dimen/material_increment_2x 29 | @dimen/material_increment_1x 30 | @dimen/material_typography_regular_headline_text_size 31 | 32 | 33 | @dimen/material_baseline_grid_3x 34 | 34dp 35 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-v23/structure.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | @dimen/material_baseline_grid_3x 4 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-w600dp/responsive.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 8 20 | 2 21 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values-w840dp/responsive.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 12 20 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values/elevation.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 4dp 21 | 0dp 22 | 2dp 23 | 8dp 24 | 6dp 25 | 12dp 26 | 2dp 27 | 8dp 28 | 8dp 29 | 1dp 30 | 24dp 31 | 16dp 32 | @dimen/material_elevation_side_drawer 33 | @dimen/material_elevation_side_drawer 34 | 16dp 35 | 3dp 36 | 2dp 37 | 2dp 38 | 6dp 39 | 1dp 40 | 8dp 41 | 0dp 42 | 0dp 43 | 8dp 44 | 0dp 45 | 46 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values/responsive.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 4 21 | @dimen/material_baseline_grid_2x 22 | @dimen/material_baseline_grid_9x 23 | 24 | false 25 | 1 26 | 27 | -------------------------------------------------------------------------------- /material-values/src/main/res-layout/values/structure.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 25dp 21 | 22 | 23 | @dimen/material_responsive_gutter_plus_baseline_grid_7x 24 | @dimen/material_baseline_grid_6x 25 | @dimen/material_icon_size_system 26 | @dimen/material_baseline_grid_0.5x 27 | @dimen/material_baseline_grid_0.5x 28 | 29 | 30 | 31 | @dimen/material_increment_1x 32 | @dimen/material_typography_regular_title_text_size 33 | 34 | 35 | 36 | @dimen/material_baseline_grid_16x 37 | @dimen/material_baseline_grid_16x 38 | @dimen/material_typography_regular_headline_text_size 39 | 40 | 41 | 42 | @dimen/material_app_bar_default_height 43 | @dimen/material_baseline_grid_2.5x 44 | 30dp 45 | 46 | -------------------------------------------------------------------------------- /material-values/src/main/res-style/color/material_icon_color_dark_theme.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-style/color/material_icon_color_light_theme.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/main/res-style/values/icons.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | @color/material_color_black_54_percent 22 | @color/material_color_black_26_percent 23 | 24 | 25 | @color/material_color_white 26 | @color/material_color_white_30_percent 27 | 28 | 29 | @dimen/material_baseline_grid_3x 30 | @dimen/material_baseline_grid_6x 31 | 32 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_avatar_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_avatar_text_icon_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | 43 | 44 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_avatar_text_icon_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | 43 | 44 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_avatar_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_icon_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_icon_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_text_only_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_single_line_text_only_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_avatar_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_avatar_text_icon_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | 73 | 74 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_avatar_text_icon_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | 73 | 74 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_avatar_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_icon_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_icon_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_text_only_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | 44 | 45 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_three_text_text_only_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | 44 | 45 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_avatar_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_avatar_text_icon_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | 63 | 64 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_avatar_text_icon_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | 63 | 64 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_avatar_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_icon_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_icon_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 17 | 18 | 28 | 38 | 39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_text_only_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_three_line_two_text_text_only_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_avatar_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_avatar_text_icon_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_avatar_text_icon_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | 60 | 61 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_avatar_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_icon_text_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_icon_text_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 15 | 16 | 25 | 35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_text_only_dense.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | -------------------------------------------------------------------------------- /material-values/src/template/res/layout/material_template_list_two_line_text_only_normal.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 23 | 24 | 34 | 35 | -------------------------------------------------------------------------------- /material-values/src/template/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Primary text that is long enough to illustrate the behaviour of the view when no more space is available. This is achieved by making this explanatory text quite pleonastic and redundant, but since it is not meant to be read, but rather occupy an empty space, it really does not matter ine the end. 4 | Primary text 5 | Secondary text that is long enough to illustrate the behaviour of the view when no more space is available. This is achieved by making this explanatory text quite pleonastic and redundant, but since it is not meant to be read, but rather occupy an empty space, it really does not matter ine the end. 6 | Secondary text 7 | -------------------------------------------------------------------------------- /mkdocs.yml: -------------------------------------------------------------------------------- 1 | site_name: MaterialValues 2 | pages: 3 | - Home: index.md 4 | - Style: 5 | - Colors: style/colors.md 6 | - Icons: style/icons.md 7 | - Typography: style/typography.md 8 | - Layout: 9 | - Metrics & keylines: layout/keylines.md 10 | - Responsive UI: layout/responsive_ui.md 11 | - Elevation: layout/elevation.md 12 | - Structure: layout/structure.md 13 | - Components: 14 | - Bottom navigation: component/bottom_navigation.md 15 | - Bottom sheet: component/bottom_sheet.md 16 | - Buttons: component/buttons.md 17 | - Buttons (FAB): component/buttons-fab.md 18 | - Cards: component/card.md 19 | - Chips: component/chips.md 20 | - Dialogs: component/dialogs.md 21 | - Dividers: component/dividers.md 22 | - Expansion panels: component/expansion_panels.md 23 | - Grid lists: component/grid_lists.md 24 | - Lists: component/lists.md 25 | - Menus: component/menus.md 26 | - Steppers: component/steppers.md 27 | - Subheaders: component/subheaders.md 28 | - Tooltips: component/tooltips.md 29 | - About: 30 | - Changelog: about/changelog.md 31 | - Old documentation: about/old_documentation.md 32 | theme: flatly 33 | extra_css: 34 | - css/extra.css 35 | repo_url: https://github.com/AoDevBlue/MaterialValues 36 | google_analytics: ['UA-86460261-1', 'aodevblue.github.io'] 37 | copyright: MaterialValues 1.1.1 38 | 39 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':material-values' --------------------------------------------------------------------------------