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

Material Design implementation in Android

Material Design implementation in Android

In june 2014, Google introduced a new design language for its products called Material Design. Material Design introduced lot of new visuel elements like Ripples, Floating action buttons, etc. This deck presents what Material Design is, what are the API are available to us to implement it on Android with retro compatibility in mind.

French video: http://www.infoq.com/fr/presentations/material-design-android

Mathieu Calba

April 17, 2015
Tweet

More Decks by Mathieu Calba

Other Decks in Programming

Transcript

  1. A coherent cross-platform experience A more flexible design system for

    Android A rational approach to visual, interaction, and motion design
  2. Z= Elevation The base depth of a view Translation Z

    For the animations of the element +
  3. Elevation API 21 and above You can define it in

    layout: <ImageView … android:elevation="@dimen/elevation" />
 or you can set it in code: float elevation = getContext().getResources(). getDimension(R.dimen.elevation); myImageView.setElevation(elevation);
  4. float raisedElevation = getContext().getResources(). getDimension(R.dimen.raised_elevation); ! myImageView.setOnTouchListener(new View.OnTouchListener() { @Override

    public boolean onTouch(View view, MotionEvent motionEvent) { int action = motionEvent.getActionMasked(); switch (action) { case MotionEvent.ACTION_DOWN: view.animate().setDuration(100). translationZ(raisedElevation); return true; ! case MotionEvent.ACTION_UP: view.animate().setDuration(100). translationZ(0); return true; } return false; } }); Raised elevation API 21 and above - manually
  5. In your layout: <ImageView … android:elevation="2dp" android:stateListAnimator="@anim/my_state_list_animator" /> Raised elevation

    API 21 and above - StateListAnimator Then declare your StateListAnimator: <selector> <item android:state_pressed="true" android:state_enabled="true"> <objectAnimator android:propertyName="translationZ" android:valueTo="6dp" android:valueType="floatType" /> </item> <item> <objectAnimator android:propertyName="translationZ" android:valueTo="0" android:valueType="floatType" /> </item> </selector>
  6. Outline The shadow is deduced from the view’s Outline. By

    default, the outline of a view is derived from it’s background. API 21 and above
  7. Define a ViewOutlineProvider: static class OutlineProvider extends ViewOutlineProvider { @Override

    public void getOutline(View v, Outline outline) { outline.setRoundRect(0, 0, v.getWidth(), v.getHeight(), 8); } } ! ! Associate this Outline to you view: OutlineProvider outline = new OutlineProvider(); view.setOutlineProvider(outline); view.setClipToOutline(true); Outline API 21 and above - Custom
  8. Cards “A card is a piece of paper with unique

    related data that serves as an entry point to more detailed information.”
  9. Cards • Layout with round-rect ShapeDrawable background & clipped to

    outline ! • Elevation of 2 dp for subtle shadows
  10. CardView API 7 and above In support lib v7 Real

    shadows on API 21+ PNG shadows on pre API 21 Add dependency in build.gradle: dependencies { compile ‘com.android.support:cardview-v7:22.0.0' } ! Use in your layouts: <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" > ! <!-- Your Card content --> ! </android.support.v7.widget.CardView>
  11. Theme.Material API 21 and above Declare your application theme: <style

    name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary"> @color/primary </item> <item name="android:colorAccent"> @color/accent </item> <item name="android:colorPrimaryDark"> @color/primary_dark </item> </style>
  12. Theme.AppCompat API 7 and above Add the AppCompat dependency: dependencies

    { compile ‘com.android.support:appcompat-v7:22.0.0' } ! Declare your application theme: <style name="AppTheme" parent="android:Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorAccent">@color/accent</item> <item name="colorPrimaryDark">@color/primary_dark</item> </style>
  13. Add dependency in build.gradle dependencies { compile ‘com.android.support:palette-v7:22.0.0' } !

    Generate the Palette from a bitmap, synchronously: Palette p = Palette.generate(bitmap);
 or asynchronously: Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors… } } ); Palette API 7 and above
  14. Get the Swatches you need: Swatch vibrant = p.getVibrantSwatch(); Swatch

    darkVibrant = p.getDarkVibrantSwatch(); Swatch lightVibrant = p.getLightVibrantSwatch(); Swatch muted = p.getMutedSwatch(); Swatch darkMuted = p.getDarkMutedSwatch(); Swatch lightMuted = p.getLightMutedSwatch(); Palette
  15. getRgb() The RGB value of this Swatch getTitleTextColor() ARGB color

    for legible ‘title’ text over this Swatch getBodyTextColor() ARGB color for legible ‘body’ text over this Swatch getHsl() The HSL value of this Swatch getPopulation() The relative amount of pixel this colour represent Palette - What’s in a swatch?
  16. Activity transitions API 21 and above 1. Enable in your

    theme <item name="android:windowContentTransitions">true</item> ! ! ! or in your Activity getWindow().requestFeature(Window. FEATURE_CONTENT_TRANSITIONS);
  17. 2. Define your shared elements: <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"/> ! This is possible from code too: ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE); ! You need to do this in both of your Activities Activity transitions API 21 and above
  18. 3. Start new Activity ActivityOptions options = ActivityOptions. makeSceneTransitionAnimation( this,

    mHeaderImageView, VIEW_NAME_HEADER_IMAGE);
 startActivity(intent, options.toBundle()); ! We can of course pass multiple views & transition names here. Activity transitions API 21 and above
  19. Bounded to another drawable <ripple android:color="?android:colorControlHighlight">
 <item> <shape android:shape="rectangle"> <solid

    android:color="@color/purple" /> </shape> </item>
 </ripple> Ripples API 21 and above
  20. Bounded to an invisible mask <ripple android:color="?android:colorControlHighlight">
 <item android:id="@android:id/mask"> <shape

    android:shape="rectangle"> <solid android:color="@color/white" /> </shape> </item>
 </ripple> Ripples API 21 and above
  21. Add the Toolbar in your layouts: <Toolbar android:id="@+id/my_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent"

    android:minHeight="?android/actionBarSize" android:background="?android/colorPrimary"/> ! Associate the Toolbar to your Fragment/Activity Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar); setActionBar(toolbar); Toolbar API 21 and above
  22. Toolbar API 7 and above Add dependency in build.gradle: dependencies

    { compile 'com.android.support:appcompat-v7:22.0.0' } ! Add the Toolbar in your layouts: <android.support.v7.widget.Toolbar android:id="@+id/my_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?actionBarSize" android:background="?colorPrimary"/> ! Associate the Toolbar to your Fragment/Activity Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar); setSupportActionBar(toolbar);
  23. Add dependency in build.gradle: dependencies { compile 'com.android.support:support-v4:22.0.0' } !

    Add the DrawerLayout in your layouts: <android.support.v4.widget.DrawerLayout android:layout_width="match_parent" android:layout_height="match_parent"> ! <!-- The main content view --> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" /> ! <!-- The navigation drawer --> <ListView android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="left" /> ! </android.support.v4.widget.DrawerLayout> NavigationDrawer API 4 and above