Material Design for developers

Material Design for developers

2696500a913e29a26f38115f8ea56f71?s=128

Adrien Couque

May 04, 2015
Tweet

Transcript

  1. Paris, 04 Mai 2015 Material Design Developper Edition

  2. 2015 • Material design Material Design (dev)

  3. Material Design (dev) 2015 • Material design Metaphor: paper and

    ink Vivid colors Animations and transitions Shadows Ripples
  4. Material Design (dev) 2015 • In action: Gmail

  5. 2015 • Guidelines Material Design (dev) www.google.com/design/spec/material-design/

  6. 2015 • Keylines Material Design (dev)

  7. 2015 • build.gradle Material Design (dev) compile ‘com.android.support:appcompat-v7:22.1.0' compile ‘com.android.support:cardview-v7:21.0.0’

    compile ‘com.android.support:palette-v7:21.0.0’ compile ‘com.android.support:recyclerview-v7:21.0.0’
  8. 2015 • styles.xml Material Design (dev) <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item

    name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> </style> Alternatives : Theme.AppCompat Theme.AppCompat.Light
  9. 2015 • styles.xml Material Design (dev) colorPrimary. The primary branding

    color for the app; used as the action bar background, recents task title and in edge effects. colorAccent. Vibrant complement to the primary branding color. Applied to framework controls such as EditText and Switch. colorPrimaryDark. Darker variant of the primary branding color; applied to the status bar.
  10. 2015 • styles.xml Material Design (dev) Further attributes give fine

    grained control over colorizing controls, see: • colorControlNormal, • colorControlActivated, • colorControlHighlight, • colorButtonNormal, • colorSwitchThumbNormal, • colorEdgeEffect, • statusBarColor • and navigationBarColor.
  11. 2015 • Accent Color Material Design (dev)

  12. 2015 • Accent Color : Careful ! Material Design (dev)

    Why is my EditText (or other widget listed above) not being tinted correctly on my pre-Lollipop device? The widget tinting in AppCompat works by intercepting any layout inflation and inserting a special tint-aware version of the widget in its place. For most people this will work fine, but I can think of a few scenarios where this won’t work, including: • You have your own custom version of the widget (i.e. you’ve extended EditText) • You are creating the EditText without a LayoutInflater (i.e., calling new EditText()). The special tint-aware widgets are currently hidden as they’re an unfinished implementation detail. This may change in the future.
  13. 2015 • Activities Material Design (dev) No action bar in

    Theme.AppCompat (vs Theme.Holo) Need to : • inherit from AppCompatActivity • or add a ToolBar in the activity layout
  14. 2015 • ToolBar Material Design (dev) Action bar fully customisable

    : position, size, content… <android.support.v7.widget.Toolbar
 android:id="@+id/my_awesome_toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="?attr/colorPrimary"
 android:minHeight="?attr/actionBarSize"/>
  15. 2015 • ToolBar Material Design (dev)

  16. ToolBar : default metrics Material Design (dev)

  17. 2015 • Action Bar : Careful ! Material Design (dev)

    getActionBar() -> getSupportActionBar() (only if inheriting from AppCompatActivity or setSupportActionBar(toolBar) has been called) public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.search, menu); SearchView searchView; - searchView = (SearchView) menu.findItem(R.id.search).getActionView(); + searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.search));
  18. 2015 • Action Bar : Careful ! Material Design (dev)

    -<menu xmlns:android="http://schemas.android.com/apk/res/android"> +<menu xmlns:android="http://schemas.android.com/apk/res/android" + xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/search" android:title="@string/search" - android:showAsAction="always" - android:actionViewClass="android.widget.SearchView"/> + app:showAsAction="always" + app:actionViewClass="android.widget.SearchView"/>
  19. 2015 • Text fields Material Design (dev) https://gist.github.com/ dmytrodanylyk/ d0c0f93c305e6879ec12

  20. 2015 • Text Material Design (dev) @style/TextAppearance.AppCompat.Title @style/TextAppearance.AppCompat.Body1

  21. 2015 • Dialogs : AppCompatDialog Material Design (dev)

  22. 2015 • Navigation Drawer Material Design (dev) https://github.com/ mikepenz/MaterialDrawer

  23. 2015 • Bottom sheets Material Design (dev) https://github.com/ soarcn/BottomSheet

  24. 2015 • Snack bars Material Design (dev) https://github.com/ nispok/snackbar

  25. 2015 • Chips Material Design (dev) https://github.com/ klinker41/android-chips

  26. 2015 • Everything else Material Design (dev) https://github.com/ rey5137/Material

  27. 2015 • Icons Material Design (dev) https://github.com/google/material-design-icons

  28. 2015 • Elevation Material Design (dev) ViewCompat.setElevation(view, 8dp) CardView +

    card_view:cardElevation PNG
  29. 2015 • Animations Material Design (dev) <?xml  version="1.0"  encoding="utf-­‐8"?>  

    <resources>   <style  name="AppTheme"  parent="AppTheme.Base">          <item  name="android:windowContentTransitions">true</item>          <item  name="android:windowAllowEnterTransitionOverlap">true</item>          <item  name="android:windowAllowReturnTransitionOverlap">true</item>          <item  name="android:windowSharedElementEnterTransition">@android:transition/move</item>          <item  name="android:windowSharedElementExitTransition">@android:transition/move</item>   </style>   </resources> values-v21/themes.xml ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
 activity,
 transitionView,
 DetailActivity.EXTRA_IMAGE);
 ActivityCompat.startActivity(
 activity,
 new Intent(activity, DetailActivity.class),
 options.toBundle());
  30. Paris, 04 Mai 2015 Applidium 20 rue Sainte-Croix de la

    Bretonnerie 75004 Paris www.applidium.com Questions ?