Material Design for developers

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 ?