Awesome
Material Design Toolkit
Welcome to Material Design Toolkit project. This is an implementation of some building blocks of Material Design.
Usage
Requirements
Shadow drawing will require the RenderScript
, so, these 2 lines should be added to your project build.gradle
file:
android {
...
defaultConfig {
...
renderscriptTargetApi 22
renderscriptSupportMode true
}
}
Add dependency of the Material Design Toolkit library.
dependencies {
compile 'org.lab99:material-design-toolkit:0.1'
}
Palette
The Material Design Toolkit library includes pre-defined material design color palette resource, which are defined by the Material Design guideline > Style > Color.
The name format of each color is @color/material_COLOR_VARIATION
,
the COLOR
can be one of
{red, pink, purple, deep_purple, indigo, blue, light_blue, cyan, teal, green, light_green, lime, yellow, amber, orange, deep_orange, brown, grey, blue_grey}
the VARIATION
can be one of
{50, 100, 200, 300, 400, 500, 600, 700, 800, 900, a100, a200, a400, a700}
However, there is no {a100, a200, a400, a700}
for color {brown, grey, blue_grey}
;
To help referencing the variation of each color, there is an array of color for each base color, such as, for Red,
<array name="material_red">
<item>@color/material_red_50</item>
<item>@color/material_red_100</item>
<item>@color/material_red_200</item>
<item>@color/material_red_300</item>
<item>@color/material_red_400</item>
<item>@color/material_red_500</item>
<item>@color/material_red_600</item>
<item>@color/material_red_700</item>
<item>@color/material_red_800</item>
<item>@color/material_red_900</item>
<item>@color/material_red_a100</item>
<item>@color/material_red_a200</item>
<item>@color/material_red_a400</item>
<item>@color/material_red_a700</item>
</array>
There are also 3 base color array, one for all color, and one for color without accent color, one for the color with accent color. The Brown
, Grey
, and Blue Grey
don't have accent color variations.
And each item of the array is referenced to those color variation array.
<array name="material_color">
<item>@array/material_red</item>
<item>@array/material_pink</item>
<item>@array/material_purple</item>
<item>@array/material_deep_purple</item>
<item>@array/material_indigo</item>
<item>@array/material_blue</item>
<item>@array/material_light_blue</item>
<item>@array/material_cyan</item>
<item>@array/material_teal</item>
<item>@array/material_green</item>
<item>@array/material_light_green</item>
<item>@array/material_lime</item>
<item>@array/material_yellow</item>
<item>@array/material_amber</item>
<item>@array/material_orange</item>
<item>@array/material_deep_orange</item>
<item>@array/material_brown</item>
<item>@array/material_grey</item>
<item>@array/material_blue_grey</item>
</array>
<array name="material_color_with_accent">
<item>@array/material_red</item>
<item>@array/material_pink</item>
<item>@array/material_purple</item>
<item>@array/material_deep_purple</item>
<item>@array/material_indigo</item>
<item>@array/material_blue</item>
<item>@array/material_light_blue</item>
<item>@array/material_cyan</item>
<item>@array/material_teal</item>
<item>@array/material_green</item>
<item>@array/material_light_green</item>
<item>@array/material_lime</item>
<item>@array/material_yellow</item>
<item>@array/material_amber</item>
<item>@array/material_orange</item>
<item>@array/material_deep_orange</item>
</array>
<array name="material_color_without_accent">
<item>@array/material_brown</item>
<item>@array/material_grey</item>
<item>@array/material_blue_grey</item>
</array>
Widgets
Paper
As described in Material Design guideline, material design is inspired by paper and ink. Paper is the building block for any widgets, such as, Button, Floating Action Button, or Cards.
To create a paper widget, there are a few important features need to be mentioned.
Shadow
Paper is existed in a 3D space, paper should have a shadow beneath it, so viewer can get the sense of the depth between the paper and the background. And as the guideline said, the shadow are composited by kind of shadow.
The shadow of key light give the sense of the depth, and the shadow of ambient light define the shape of paper. During the elevation of the paper, the depth is changed, so the shadow of the key light. However, the shadow of the ambient light will keep the same.
The ShadowDrawable
and ShadowRender
are implemented with the above idea, and the shadow
will be drawn below the widget.
Ripple
To response the user's action, the ripple effect will be triggered. That indicators where and what
the user has been triggered. RippleDrawable
is created to implement the idea. And a TouchTracker
class is created to help to track user's touch location.
PaperDrawable
To implement shadow and ripple, an special wrapper drawable, PaperDrawable
is created.
The PaperDrawable
contains 3 layers. From top to bottom, they are:
- Ripple layer
- Background layer
- Shadow layer
The PaperDrawable
will be used as the background drawable of Paper
, any original background
drawable operations will be redirected to the inner background layer. So, user can specify any drawable
as the background they want, and still get the shadow and ripple effect when they are enabled.
Materialize stock widgets
There is a static method apply()
which can be used to materialize the traditional widget, by
wrapping the original background drawable with PaperDrawable
, so the widget will have shadow and
ripple.
Button
A Button
is a clickable Paper
, normally with a round-cornered background.
ActionButton
An ActionButton
is a Button
which has round background.