Material Design Guideline

Additional

Language
Kotlin
Version
N/A
Created
Apr 5, 2017
Updated
May 31, 2018
Owner
Nonthawit Doungsodsri (TheKhaeng)
Contributor
Nonthawit Doungsodsri (TheKhaeng)
1
Activity
Badge
Generate
Download
Source code
APK file

Commercial

「 MATERIAL DESIGN GUIDELINE V.2 」

Very lightweight library for Android developers that facilitate how you use XML resources, especially if you strictly follow Google material design principle. This library is mostly about XML resources. For example, colors that is defined by the principle or dimension sizes that is divisible by 4dp. The guideline is here. Google Material guideline V.2.

TOPIC

  • Demo app
  • Install
  • Default color and dimens: margin and padding / corner / aspect / tablet device
  • Color: base color / material color / alert color
  • Icons: size / color
  • Typography: size / font / space / color / style
  • Elevation
  • Elevation Anim
  • Animation duration
  • Component

「 DEMO APPLICATION 」

「 INSTALLATION 」

implementation 'com.github.thekhaeng:material-design-color:2.0.0' //only material color
implementation 'com.github.thekhaeng:material-design-metric:2.0.1'

// or 
// If your project not use androidx you must exclulde this group out.
implementation('com.github.thekhaeng:material-design-color:2.0.0') {
    exclude group: 'androidx.annotation', module: 'annotation'
}
implementation('com.github.thekhaeng:material-design-metric:2.0.2') {
    exclude group: 'androidx.appcompat', module: 'appcompat'
}

Changelog

  • 2.0.2: lastest version

    • update new icon click size
  • 2.0.0

    • update all new Material Design
  • 1.0.4

    • Added devices.xml for check tablet (sw540dp)
    • Added tablet font size +1sp
  • 1.0.3

    • Added no transparent text and icon color
    • Added default_stroke_large
    • Added default_divider_large
  • 1.0.2

    • Added some example usage in demo project
    • Changed name light to light_theme
    • Changed name dark to dark_theme
  • 1.0.1

    • Added default_padding_margin_extra_extra_extra_large 48dp
    • Changed default_padding_margin_extra_extra_large 48dp to 32dp






BEFORE START

This library uses md_ or material_ prefix name feel free to use.

Example

md_icon_color_active_light_theme or material_icon_color_active_light_theme







「 DEFAULT COLOR AND DIMENS 」

Dimens

Margin and Padding

Default values for margin, padding, and size to use in your XML layout.

NOTE: Based on material design principle +4dp +8dp +16dp or +24dp

normal size start at 8dp ( R.dimen.default_padding_margin)

huge size start at 48dp ( R.dimen.default_padding_margin_huge)

x = +8dp

h = +4dp

example: xxx = 8 x 3dp = 24dp, xxxh = (8 x 3dp) + 4dp = 28dp

DIMEN NAMES VALUE
Normal
default_padding_margin_small_x 2dp
default_padding_margin_small 4dp
default_padding_margin 8dp
default_padding_margin_h 12dp
default_padding_margin_x 16dp
default_padding_margin_xh 20dp
default_padding_margin_xx 24dp
default_padding_margin_xxh 28dp
default_padding_margin_xxx 32dp
default_padding_margin_xxxh 36dp
default_padding_margin_xxxx 40dp
default_padding_margin_xxxxh 44dp
Huge
default_padding_margin_huge 48dp
default_padding_margin_huge_x 56dp
default_padding_margin_huge_xh 60dp
default_padding_margin_huge_xx 64dp
default_padding_margin_huge_xxh 68dp
default_padding_margin_huge_xxx 72dp
default_padding_margin_huge_xxxh 76dp
default_padding_margin_huge_xxxx 80dp

Corner

DIMEN NAMES VALUE
default_round_corner_small 2dp
default_round_corner 4dp
default_round_corner_large 8dp

Aspect

Programatically

Aspect.kt provides functions that return float of aspect.

Aspect.to_16_9(context)
Aspect.to_3_2(context)
Aspect.to_4_3(context)
Aspect.to_1_1(context)
Aspect.to_3_4(context)
Aspect.to_2_3(context)

or you can use via xml

DIMEN NAMES FLOAT
md_aspect_16_9 1.7777777
md_aspect_3_2 1.5
md_aspect_4_3 1.333333
md_aspect_1_1 1

Tablet Device

This project use sw540dp magic number to seperate smart phone and tablet.

[Kotlin]
Context.isTablet
Fragment.isTablet

[Java]
TabletDevice.isTablet(context)
TabletDevice.isTablet(Fragment.isTablet)

or

boolean isTabletSize = getResources().getBoolean(R.bool.isTablet);






「 COLOR RESOURCE NAMES 」

Base Color

Usage example

<color name="your_background_overlay">@color/default_color_black_alpha_50</color>
COLOR NAMES VALUE PERCENT
Dark theme
default_color_white_alpha_0 #00ffffff 0% white
default_color_white_alpha_10 #10ffffff 10% white
default_color_white_alpha_20 #33ffffff 20% white
default_color_white_alpha_30 #4Dffffff 30% white
default_color_white_alpha_40 #66ffffff 40% white
default_color_white_alpha_50 #80ffffff 50% white
default_color_white_alpha_60 #99ffffff 60% white
default_color_white_alpha_70 #B3ffffff 70% white
default_color_white_alpha_80 #CCffffff 80% white
default_color_white_alpha_90 #E6ffffff 90% white
default_color_white_alpha_90 #ffffffff 100% white
Light theme
default_color_black_alpha_0 #00000000 0% white
default_color_black_alpha_10 #10000000 10% black
default_color_black_alpha_20 #33000000 20% black
default_color_black_alpha_30 #4D000000 30% black
default_color_black_alpha_40 #66000000 40% black
default_color_black_alpha_50 #80000000 50% black
default_color_black_alpha_60 #99000000 60% black
default_color_black_alpha_70 #B3000000 70% black
default_color_black_alpha_80 #CC000000 80% black
default_color_black_alpha_90 #E6000000 90% black
default_color_black_alpha_100 #ff000000 100% black

Material Color

You can use both XML or Java class.

XML: R.id.md_red400

Java class: MaterialColor.RED400

COLOR NAMES VALUE
md_scrim_color #52000000
md_divider_black #12000000
md_divider_white #12FFFFFF

ALERT COLOR

COLOR NAMES VALUE
md_alert_caution md_yellow800
md_alert_error md_red700
md_alert_success md_green500






「 ICONS 」

SIZE

x = +12dp

DIMEN NAMES VALUE
default_icon_size_small_x 12dp
default_icon_size_small 16dp
default_icon_size 24dp
default_icon_size_x 36dp
default_icon_size_xx 48dp
default_icon_size_xxx 56dp
Stroke size
default_stroke_large 3dp
default_stroke 2dp
default_stroke_small 1dp
Divider size
default_divider_size_large 2dp
default_divider_size 1dp
DIMEN NAMES VALUE
md_icon_touch_size_small 36dp
md_icon_touch_padding_small 8dp
md_icon_touch_size 48dp
md_icon_touch_padding 12dp
md_icon_size 24dp
md_avatar_size 40dp

COLOR (for Dark theme)

COLOR NAMES VALUE PERCENT
Dark theme
md_icon_color_active_dark_theme #ffffffff 100% white
md_icon_color_inactive_dark_theme #8Affffff 54% white
md_icon_color_disable_dark_theme #61ffffff 38% white
No transparent
md_icon_color_active_black_theme_no_transparent #ffffff
md_icon_color_inactive_black_theme_no_transparent #8A8A8A
md_icon_color_disable_black_theme_no_transparent #616161
Light theme
md_icon_color_active_light_theme #DE000000 87% black
md_icon_color_inactive_light_theme #8A000000 54% black
md_icon_color_disable_light_theme #61000000 38% black
No transparent
md_icon_color_active_white_theme_no_transparent #212121
md_icon_color_inactive_white_theme_no_transparent #757575
md_icon_color_disable_white_theme_no_transparent #9E9E9E

COLOR (for Light theme)

COLOR NAMES VALUE PERCENT
md_icon_color_active_light_theme #DE000000 87% black
md_icon_color_inactive_light_theme #8A000000 54% black
md_icon_color_disable_light_theme #61000000 38% black
No transparent
md_icon_color_active_white_theme_no_transparent #212121
md_icon_color_inactive_white_theme_no_transparent #757575
md_icon_color_disable_white_theme_no_transparent #9E9E9E

ALPHA

DIMEN NAMES FLOAT
Light theme
md_alpha_icon_active_light_theme 0.87
md_alpha_icon_inactive_light_theme 0.54
md_alpha_icon_disable_light_theme 0.38
Dark theme
md_alpha_icon_active_dark_theme 1.0
md_alpha_icon_inactive_dark_theme 0.54
md_alpha_icon_disable_dark_theme 0.38

STYLE

You can use this style to change the normal view to IconClick.

IconClick // size: 40dp, padding: 8dp
IconClick.LargeTouch  // size: 48dp, padding: 12dp
IconClickSmall // size: 36dp, padding: 8dp

// size: 40dp, padding: 8dp
IconClick.BlackActive
IconClick.BlackInActive
IconClick.BlackDisabled

IconClick.WhiteActive
IconClick.WhiteInActive
IconClick.WhiteDisabled

// size: 48dp, padding: 12dp
IconClick.LargeTouch.BlackActive
IconClick.LargeTouch.BlackInActive
IconClick.LargeTouch.BlackDisabled

IconClick.LargeTouch.WhiteActive
IconClick.LargeTouch.WhiteInActive
IconClick.LargeTouch.WhiteDisabled

// size: 36dp, padding: 8dp
IconClickSmall.BlackActive
IconClickSmall.BlackInActive
IconClickSmall.BlackDisabled

IconClickSmall.WhiteActive
IconClickSmall.WhiteInActive
IconClickSmall.WhiteDisabled

Usage XML example

<AppCompatImageView
 style="@style/IconClick.BlackActive"
 ...
</AppCompatImageView>







「 Typography 」

SIZE

NOTE : for tablet font size +1sp

EX : use "_tablet" suffix md_text_body_medium_tablet

DIMEN NAMES TEXT STYLE VALUE
md_text_size_headline_1_light light 96sp
md_text_size_headline_2_light light 60sp
md_text_size_headline_3_regular regular 48sp
md_text_size_headline_4_regular regular 34sp
md_text_size_headline_5_regular regular 24sp
md_text_size_headline_6_medium medium 20sp
md_text_subtitle_1_regular regular 16sp
md_text_subtitle_2_medium medium 14sp
md_text_body_1_regular regular 16sp
md_text_body_2_regular regular 14sp
md_text_button_medium medium 14sp
md_text_caption_regular regular 12sp
md_text_overline_regular regular 10sp

NOTE: Body text comes in ranges 1-2, a serif or sans serif typeface is recommended.

serif typeface is used for Body 1.

sans serif typeface is used for Body 2.

FONT

There are two font is roboto and product sans. Feel free to use with all TextView in your project.

FONT DIMEN NAMES NORMAL BOLD
font_product_sans product_sans_regular product_sans_bold
font_roboto_light roboto_light roboto_bold
font_roboto roboto_regular roboto_bold
font_roboto_medium roboto_medium roboto_bold

Usage examples

<AppCompatTextView>
 ...
 android:textStyle="normal|bold"
 app:fontFamily="@font/font_product_sans"
 ...
</AppCompatTextView>

TEXT LINE SPACE

TextSpace.kt extension provides functions that you can cutomize text space.

[Kotlin]
textView.setLineHeight(float)
textView.scaleLineSpaceByTextSize(scale)

[Java]
TextSpace.setLineHeight(textView,float);
TextSpace.scaleLineSpaceByTextSize(textView, scale);

Dense scripts

ex. 中国 (chinese), 日本の (japan), and 한국의 (korean).

use Noto CJK Font

Tall scripts

South and Southeast Asian and Middle Eastern languages,

including اللغة العربية (arabic), हिन्दी (hindi), and ภาษาไทย (thai).

use Noto Font

COLOR

COLOR NAMES VALUE PERCENT
Light theme
md_text_color_active_light_theme (primary) #de000000 87% black
md_text_color_inactive_light_theme (secondary) #99000000 60% black
md_text_color_disabled_light_theme (disabled) #61000000 38% black
No transparent
md_text_color_active_white_theme_no_transparent (primary) #212121
md_text_color_inactive_white_theme_no_transparent (secondary) #666666
md_text_color_disabled_white_theme_no_transparent (disabled) #9E9E9E
Dark theme
md_text_color_active_dark_theme (primary) #ffffffff 100% white
md_text_color_inactive_dark_theme (secondary) #99ffffff 60% white
md_text_color_disabled_dark_theme (disabled) #61ffffff 50% white
No transparent
md_text_color_active_black_theme_no_transparent (primary) #ffffffff
md_text_color_inactive_black_theme_no_transparent (secondary) #999999
md_text_color_disabled_black_theme_no_transparent (disabled) #616161

ALPHA

DIMEN NAMES FLOAT
Light theme
md_alpha_text_active_light_theme 0.87
md_alpha_text_inactive_light_theme 0.60
md_alpha_text_disable_light_theme 0.38
Dark theme
md_alpha_text_active_dark_theme 1.0
md_alpha_text_inactive_dark_theme 0.60
md_alpha_text_disable_dark_theme 0.38

STYLE

It is a lot of style you can checkout here.

styles_text_material_product_sans_black.xml
styles_text_material_product_sans_white.xml
styles_text_material_roboto_black.xml
styles_text_material_roboto_white.xml

Usage XML example

<AppCompatTextView
 style="@style/MaterialTextView.Roboto.BlackInactive.Body1"
 ...
</AppCompatTextView>







「 Elevation 」

DIMEN NAMES ELEVATION
md_elevation_dialog 24dp
md_elevation_navigation_drawer 16dp
md_elevation_side_sheet_modal 16dp
md_elevation_bottom_sheet_modal 16dp
md_elevation_fab_pressed 12dp
md_elevation_side_sheet_standard 8dp
md_elevation_bottom_sheet_standard 8dp
md_elevation_bottom_navigation_bar 8dp
md_elevation_bottom_app_bar 8dp
md_elevation_menu 8dp
md_elevation_sub_menu 8dp
md_elevation_button_pressed 8dp
md_elevation_card_pressed 8dp
md_elevation_fab 6dp
md_elevation_snackbar 6dp
md_elevation_top_app_bar_scrolled_state 4dp
md_elevation_top_app_bar(_no_elevation) 4dp or 0dp
md_elevation_toolbar 4dp
md_elevation_refresh_indicator 3dp
md_elevation_search_bar_scrolled_state 3dp
md_elevation_button 2dp
md_elevation_card 1dp
md_elevation_search_bar 1dp
md_elevation_switch 1dp
md_elevation_text_button 0dp
md_elevation_standard_side_sheet 0dp

「 Elevation Anim 」

NOTE: Animations are only available starting from API level 21

Usage example

<View
    ...
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:stateListAnimator="@drawable/md_selector_anim_cardview_elevation"
    ... />

Drawable names

R.drawable.md_selector_anim_button_elevation
R.drawable.md_selector_anim_cardview_elevation







Animation Duration

Icon

Most icons will fit into these three groups of recommended durations:

  • Simple icon animations: 100ms
  • Average icon animations: 200ms
  • Complex icon animations: 500ms

INTEGER NAMES Integer (millisecond)
md_anim_duration_icon_simple 100
md_anim_duration_icon_average 200
md_anim_duration_icon_complex 500






COMPONENT


BUTTON

DIMEN NAMES VALUE
md_button_height 36dp
md_button_height 42dp
md_button_min_width 72dp

TABLAYOUT

DIMEN NAMES VALUE
md_tab_layout_height 48dp
md_tab_layout_with_icon_height 72dp

TOOLBAR

DIMEN NAMES VALUE
md_toolbar_height 56dp or 64dp (tablet)

If you want to get status bar or SystemUI height we recommend you to use OnSystemUISpaceListener listener like this.

interface OnSystemUISpaceListener {
    fun onSpace(top: Int, left: Int, right: Int, bottom: Int)
}

[Kotlin]
FragmentActivity.setOnSystemUISpaceListener(OnSystemUISpaceListener)
Fragment.setOnSystemUISpaceListener(OnSystemUISpaceListener)

[Java]
SystemUISpace.setOnSystemUISpaceListener(FragmentActivity, OnSystemUISpaceListener);
SystemUISpace.setOnSystemUISpaceListener(Fragment, OnSystemUISpaceListener);

SystemUISpaceView

This view will spacing size equal SystemUI in your applciation for example status bar and navigation bar. You can consume insets or not.

<com.thekhaeng.systemui.view.SystemUISpaceView
  ...
    style="@style/SystemUISpace.Top|Bottom|Left|Right"
    android:layout_gravity="top|bottom|left|right"
    app:isConsumeInsets="true|false"
    ...
    />






Licence

Copyright 2017 TheKhaeng

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Developed By Thai android developer.

Follow facebook.com/thekhaeng.io on Facebook page. or @nonthawit at my Medium blog. :)

For contact, shoot me an email at nonthawit.thekhaeng@gmail.com