TIPS of Material Design

(Android)@takuji31

About me• Takuji Nishibayashi

• @takuji31

• Fenrir Inc.

• Android Engineer

• Loves Kotlin

I'm not designer!

Material Design

New design by Google

Good guidelines (by designer)

TIPS

Color

Primary/Accent color

White/Black

Use prepared colors

Default 500Light 100Dark 300

Accent A200Accent fallback A100/A400

www.materialpalette.com

Color<resources> <color name="primary">#FF5722</color> <color name="primary_dark">#E64A19</color> <color name="primary_light">#FFCCBC</color> <color name="accent">#00BCD4</color> <color name="primary_text">#212121</color> <color name="secondary_text">#727272</color> <color name="icons">#FFFFFF</color> <color name="divider">#B6B6B6</color></resources>

Color<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> <item name="android:textColorPrimary">@color/primary_text</item> <item name="android:textColorSecondary">@color/secondary_text</item></style>

App bar

ex) ActionBar / Toolbar

Use AppCompat

Use AppCompat// build.gradledependencies { compile 'com.android.support:appcompat-v7:22.1.1'}

Use AppCompat<!-- activity_main.xml --><android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/Theme.AppCompat.Light" android:theme="@style/AppTheme.Toolbar"/><FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"/>

Other Widget

AppCompat widget

AppCompatButton

AppCompatEditText

AppCompatTextView

etc.

Third party library

• Floating Action Button

• github.com/futuresimple/android-floating-action-button

• github.com/makovkastar/FloatingActionButton

• BottomSheet

• github.com/soarcn/BottomSheet

• Dialog

• github.com/afollestad/material-dialogs

• EditText

• github.com/rengwuxian/MaterialEditText

• Shadow

• github.com/h6ah4i/android-materialshadowninepatch

• github.com/ShogoMizumoto/ZDepthShadow

• Ripple Effect

• github.com/balysv/material-ripple

• github.com/traex/RippleEffect

Enjoy Material Design!