Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What Material Design means to Android

What Material Design means to Android

Why do we need Material Design, what new patterns are introduced and how to implement it.

David González

November 21, 2014
Tweet

More Decks by David González

Other Decks in Technology

Transcript

  1. Agenda • Why do we need it? • What is

    Material Design? • New patterns • How do I start?
  2. 4

  3. Goals Unified experience across platforms and different device sizes Visual

    language that synthesises classic principles of good design Provide guidelines in order to create appealing Android applications
  4. Outline 16 <shape android:shape="rectangle"> <solid android:color="#42000000" />
 <corners android:radius="5dp" />

    </shape> res/drawable/myrect.xml <ImageView
 … android:background=“@drawable/myrect“/> res/layout/fragment_sample.xml
  5. 17 static class OvalOutlineProvider extends ViewOutlineProvider{ @Override
 public void getOutline(View

    view, Outline outline) { outline.setOval(0, 0, view.getWidth(), view.getHeight(), 10); } } OvalOutlineProvider.java
  6. 21

  7. Palette API 27 dependencies { compile ‘com.android.support:palette-v7:21.0.+' } build.gradle Palette

    p = Palette.generate(bitmap); 
 Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors…} } ); MainFragment.java
  8. Toolbar in Material 29 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setActionBar(toolbar);

    <Toolbar android:id="@+id/my_awesome_toolbar" android:layout_height="wrap_content" android:layout_width=“match_parent" android:minHeight="?android/actionBarSize" android:background="?android/colorPrimary"/> res/layout/toolbar.xml MainActivity.java
  9. Toolbar in AppCompat 30 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); 


    setSupportActionBar(toolbar); <android.support.v7.widget.Toolbar android:id="@+id/my_awesome_toolbar"
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 android:minHeight="?actionBarSize" android:background="?colorPrimary" />
 res/layout/toolbar.xml MainActivity.java
  10. MyActivity.java final View myView = findViewById(R.id.my_view); Animator anim = ViewAnimationUtils.createCircularReveal(myView,

    cx, cy, initialRadius, 0); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); myView.setVisibility(View.INVISIBLE); } }); anim.start();
  11. 38 res/drawable/mystatedrawable.xml <selector xmlns:android=“…”/> <item android:state_pressed="true"> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="5dp"

    /> </item> <item android:state_pressed="false"> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" /> </item> </selector>
  12. 40 res/drawable/heart.xml <vector xmlns:android=“…” android:height="256dp" android:width="256dp" android:viewportWidth="32" android:viewportHeight="32"> <path android:fillColor="@color/orange"

    android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z" /> </vector>
  13. 42 res/drawable/vectordrawable.xml <vector xmlns:android=“…” android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group

    android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
  14. 43 <animated-vector xmlns:android=“…" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target

    android:name="v" android:animation="@anim/path_morph" /> </animated-vector> <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> <set xmlns:android=“…”> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set> res/drawable/avd.xml res/anim/path_morph.xml res/anim/rotation.xml
  15. Enable transitions 45 getWindow(). requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); <style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable

    window content transitions --> <item name="android:windowContentTransitions">true</item> </style> res/values/theme.xml MainActivity.java
  16. Activity transition 46 <style name="BaseAppTheme" parent=“android:Theme.Material”> <!-- specify enter and

    exit transitions --> <item name=“android:windowEnterTransition"> @transition/explode</item> <item name=“android:windowExitTransition”> @transition/explode</item> </style> res/values/theme.xml The easy way
  17. Shared element transition 48 <style name="BaseAppTheme" parent=“android:Theme.Material”> <!-- specify shared

    element transitions --> <item name=“android:windowSharedElementEnterTransition”> @transition/change_image_transform</item> <item name=“android:windowSharedElementExitTransition”> @transition/change_image_transform</item> </style> res/values/theme.xml The hard way
  18. Shared element transition 49 <ImageView android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/robotoView" android:layout_centerVertical="true" android:layout_centerHorizontal="true"

    android:background=“@drawable/magic” android:transitionName=“@transition/my_transition”/> res/layout/fragment_sample.xml <transitionSet xmlns:android=“…”> <changeImageTransform/> </transitionSet> res/transition/my_transition.xml
  19. Start the Activity 50 imgContainerView.setOnClickListener(new View.OnClickListener() { @Override public void

    onClick(View view) { Intent intent = new Intent(this, Activity2.class); ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());
 FragmentSample.java
  20. Further reading • Novoda Blog on Material Design • Material

    Design Guidelines • Intro to Material Design • Material Design Checklist • Material Design for Pre-Lollipop with AppCompat • Nick Butcher and Chris Banes at Droidcon UK 2014