Paris, 04 Mai 2015 Material Design Developper Edition 

2015 • Material design Material Design (dev) 

Material Design (dev) 2015 • Material design Metaphor: paper and ink Vivid colors Animations and transitions Shadows Ripples 

Material Design (dev) 2015 • In action: Gmail 

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

2015 • Keylines Material Design (dev) 

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’ 

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

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. 

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. 

2015 • Accent Color Material Design (dev) 

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. 

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 

2015 • ToolBar Material Design (dev) Action bar fully customisable : position, size, content… 

2015 • ToolBar Material Design (dev) 

ToolBar : default metrics Material Design (dev) 

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)); 

2015 • Action Bar : Careful ! Material Design (dev) - + + app:showAsAction="always" + app:actionViewClass="android.widget.SearchView"/> 

2015 • Text fields Material Design (dev) https://gist.github.com/ dmytrodanylyk/ d0c0f93c305e6879ec12 

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

2015 • Dialogs : AppCompatDialog Material Design (dev) 

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

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

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

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

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

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

2015 • Elevation Material Design (dev) ViewCompat.setElevation(view, 8dp) CardView + card_view:cardElevation PNG 

2015 • Animations Material Design (dev)              <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>     values-v21/themes.xml ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
 activity,
 transitionView,
 DetailActivity.EXTRA_IMAGE);
 ActivityCompat.startActivity(
 activity,
 new Intent(activity, DetailActivity.class),
 options.toBundle()); 

Paris, 04 Mai 2015 Applidium 20 rue Sainte-Croix de la Bretonnerie 75004 Paris www.applidium.com Questions ?