「 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

Corner

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

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>

Material Color

You can use both XML or Java class.

XML: R.id.md_red400

Java class: MaterialColor.RED400

ALERT COLOR

「 ICONS 」

SIZE

x = +12dp

COLOR (for Dark theme)

COLOR (for Light theme)

ALPHA

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

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.

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

ALPHA

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 」

「 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

COMPONENT

BUTTON

TABLAYOUT

TOOLBAR

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 [email protected]