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

Material Design for developers

Material Design for developers

Adrien Couque

May 04, 2015
Tweet

More Decks by Adrien Couque

Other Decks in Technology

Transcript

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

    ink Vivid colors Animations and transitions Shadows Ripples
  2. 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’
  3. 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
  4. 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.
  5. 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.
  6. 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.
  7. 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
  8. 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"/>
  9. 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));
  10. 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"/>
  11. 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());
  12. Paris, 04 Mai 2015 Applidium 20 rue Sainte-Croix de la

    Bretonnerie 75004 Paris www.applidium.com Questions ?