android lollipop - material design - inovex...android lollipop - material design author tim roes...

27
Material Design Disclaimer: Some images are taken from the original documentation (www.google.com/design) © Google

Upload: others

Post on 14-Jun-2020

43 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Material Design

Disclaimer: Some images are taken from the original documentation (www.google.com/design) © Google

Page 2: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Tim Roes

Android- & Web-Developer@ inovex in Karlsruhe

GDG Karlsruhe Co-Organizer

www.timroes.de/+

Page 3: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android
Page 4: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android
Page 5: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android
Page 6: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Drop

bit.ly/12PX9ih

Invite Code:INOVEX

Page 7: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android
Page 8: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Paper

Page 9: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Ink

Page 10: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Settings, Help & Feedback

now in the Navigation Drawer

Page 11: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

<style name=”MyTheme” parent=”android:Theme.Material”>

</style>

<item name=”android:colorPrimary”>...</item><item name=”android:colorPrimaryDark”>...</item><item name=”android:colorAccent”>...</item>

* Compatibility with AppCompat v7

Theme.Material.Light

Page 12: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

colorPrimaryDark

colorPrimary

colorAccent

Page 13: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

android:TextAppearance.Material. Display4Display3Display2Display1HeadlineTitleSubheadBody2Body1CaptionMenuButton

Page 14: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Cards

Page 15: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Cards

DON’T

Page 16: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Shadows

android:elevation=”4dp”

View.setElevation(float);

Page 17: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Ripples and Translation

view.animate() .translationZ(float) .start();

<selector>...<objectAnimator

android:property=”translationZ”android:valueTo=”8dp”android:valueType=”floatType”/>

...</selector>

Page 18: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Floating action button

Page 19: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

drawable/fab_bg.xml

<?xml version="1.0" encoding="utf-8"?><ripple android:color="?android:colorControlHighlight"

xmlns:android="..."><item>

<shape android:shape="oval"><solid android:color="?android:colorAccent"/>

</shape></item>

</ripple>

Page 20: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Activity Transitions

Page 21: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

<style name=”MyTheme” parent=”android:Theme.Material”><item name="android:windowContentTransitions">true</item>

</style>

1) Enable content transitions

2) Specify transition element in target activity

<ImageView...android:transitionName=”someId”/>

3) Start transition (with a single element)

Intent in = new Intent(this, Activity2.class);ActivityOptions opts =

ActivityOptions.makeSceneTransitionAnimation(this, /* start activity */,someView, /* the view in the start activity */,“someId” /* the string as specified above */

);startActivity(in, opts);

Page 22: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

<style name=”MyTheme” parent=”android:Theme.Material”><item name="android:windowContentTransitions">true</item>

</style>

1) Enable content transitions

2) Specify transition element in target activity

<ImageView...android:transitionName=”someId”/>

3) Start transition (with mutiple shared elements)

Intent in = new Intent(this, Activity2.class);ActivityOptions opts =

ActivityOptions.makeSceneTransitionAnimation(this, /* start activity */,Pair.create(view1, “id1”),Pair.create(view2, “id2”)

);startActivity(in, opts);

Page 23: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Palette

Palette palette = Palette.generate(bitmap);

palette.getVibrantSwatch();palette.getMutedSwatch();

palette.getLightVibrantSwatch();palette.getLightMutedSwatch();

palette.getDarkVibrantSwatch();palette.getDarkMutedSwatch();

* Attention: swatches can be null

Page 24: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Swatches

Swatch swatch = palette.get...Swatch();

swatch.getRgb();

swatch.getTitleTextColor();

swatch.getBodyTextColor();

swatch.getPopulation();

swatch.getHsl();

* Attention: IllegalArgumentException can be thrown

Page 25: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Vibrantlight style

Vibrantnormal style

Mutedlight style

Vibrantdark style

Mutednormal style

Muteddark style

Page 26: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Palette Viewer

Page 27: Android Lollipop - Material Design - inovex...Android Lollipop - Material Design Author Tim Roes Subject Android Lollipop, Android 5.0, Material Design Keywords android lollipop, android

Links:

- www.google.com/design- d.android.com/training/material

- material.angularjs.org- polymer-project.org/components/paper-elements