? MATERIAL DESIGN GUIDELINE ?

A 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 8dp. The guideline is here. Google Material guideline.

TOPIC

• Demo app
• Install
• Default color and dimens
• Color names
• Icons
• Typography
• Text XML Style
• Metrics & keylines size
• Elevation
• Elevation Anim

? DEMO APPLICATION ?

? INSTALLATION ?

Maven

<dependency>
<groupId>com.github.thekhaeng</groupId>
<artifactId>material-design-guideline</artifactId>
<version>1.0.4</version>
<type>pom</type> </dependency>

Gradle

compile ('com.github.thekhaeng:material-design-guideline:1.0.4') {

  exclude group: 'com.android.support', module: 'support-annotations' 
}

NOTE: This library uses md_ or material_ prefix name

IMPORTANT: Every resource in this project is not recommended to use directly. see example

Changelog

• 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

? DEFAULT COLOR AND DIMENS ?

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

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

Tablet

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

NOTE : split phone and tablet by sw540dp

Dimens

Base Color (for Dark theme)

Usage example

<color name="your_background_overlay">@color/default_color_black_alpha_50</color>

Base Color (for Light theme)

? COLOR RESOURCE NAMES ?

You can use both XML or Java class.

XML: R.id.md_red400

Java class: MaterialColor.RED400

• Red
• Pink
• Purple
• Deep purple
• Indigo
• Blue
• Lightblue
• Cyan
• Teal
• Green
• Light green
• Lime
• Yellow
• Amber
• Orange
• Deep orange
• Brown
• Grey
• Blue grey
• Black and white

? ICONS ?

Size

COLOR (for Dark theme)

(no transparent)

COLOR (for Light theme)

(no transparent)

ALPHA (for Dark theme)

ALPHA (for Light theme)

? Typography ?

SIZE

NOTE : for tablet font size +1sp

EX : use "_tablet" suffix md_text_body_medium_tablet

English and English-like scripts (default)

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 (for Dark theme)

(no transparent)

COLOR (for Light theme)

(no transparent)

ALPHA (for Dark theme)

ALPHA (for Light theme)

Text XML Style

Usage example

<TextView
  ...
  style="@style/MaterialTextView.LightTheme.Subheading.Regular"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Regular 16sp"
  ... />

Style XML

 MaterialTextView.LightTheme.Display4.Light
  MaterialTextView.LightTheme.Display3.Regular
  MaterialTextView.LightTheme.Display2.Regular
  MaterialTextView.LightTheme.Display1.Regular
  MaterialTextView.LightTheme.Headline.Regular
  MaterialTextView.LightTheme.Title.Medium
  MaterialTextView.LightTheme.Subheading.Regular
  MaterialTextView.LightTheme.Body.Regular
  MaterialTextView.LightTheme.Body.Medium
  MaterialTextView.LightTheme.Caption.Regular
  MaterialTextView.LightTheme.Button.Medium

MaterialTextView.DarkTheme.Display4.Light
  MaterialTextView.DarkTheme.Display3.Regular
  MaterialTextView.DarkTheme.Display2.Regular
  MaterialTextView.DarkTheme.Display1.Regular
  MaterialTextView.DarkTheme.Headline.Regular
  MaterialTextView.DarkTheme.Title.Medium
  MaterialTextView.DarkTheme.Subheading.Regular
  MaterialTextView.DarkTheme.Body.Regular
  MaterialTextView.DarkTheme.Body.Medium
  MaterialTextView.DarkTheme.Caption.Regular
  MaterialTextView.DarkTheme.Button.Medium

You can override.

 <style name="YourTextStyle" parent="MaterialTextView.LightTheme.Display4">

your custom...
  </style>

NOTE: if you use Dense or Tall scripts font, you must customize it yourself.

? Metrics & keylines size ?

? 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

Special thank

https://github.com/mcginty/material-colors

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]