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

Practical Guide to Material Design implementati...

Practical Guide to Material Design implementation 360|AnDev Denver, July 2016

Talk given at 360|AnDev Denver and AnDevCon Boston 2016.
Example used is https://github.com/yprabhu/materialworld which was forked from https://github.com/chrisbanes/cheesesquare

Yash Prabhu

July 28, 2016
Tweet

More Decks by Yash Prabhu

Other Decks in Technology

Transcript

  1. A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu

    #360andev github.com/yprabhu yprabhu.com dramafever.com
  2. How do I apply a theme? <style name="BaseStyle" parent="Theme.AppCompat.Light.NoActionBar"> <item

    name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary_dark</item> <item name="colorAccent">@color/color_accent</item> <item name="android:windowBackground"> @color/window_background </item> </style> @yashvprabhu #360andev
  3. Imagery Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R. drawable.bulbasaur); if (myBitmap !=

    null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
  4. Imagery continued.. Palette - Extracting colors from an image Palette.PaletteAsyncListener

    paletteListener = new Palette.PaletteAsyncListener(){ @Override public void onGenerated(Palette palette) { int defColor = 0x000000; int vibrant = palette.getVibrantColor(defColor); int vibrantLight = palette.getLightVibrantColor(defColor); int vibrantDark = palette.getDarkVibrantColor(defColor); ... }};
  5. View Item <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/avatar" android:layout_width="wrap_content"

    android:layout_height="wrap_content" tools:src="@drawable/bulbasaur"/> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" tools:textColor="@color/black" tools:text="Bulbasaur" tools:textAppearance="?attr/textAppearanceListItem"/>
  6. Common Pattern CoordinatorLayout -- AppBarLayout -- Toolbar -- TabLayout --

    ViewPager -- FloatingActionButton @yashvprabhu #360andev
  7. Common Pattern CoordinatorLayout -- AppBarLayout -- CollapsingToolbarLayout -- ImageView --

    Toolbar -- NestedScrollView -- LinearLayout -- CardView -- Button -- FloatingActionButton @yashvprabhu #360andev
  8. Resources Udacity - Material Design for Android Developers Android Developer

    Docs - Material Design Google Material Design Guidelines Material Doc Codepath Plaid app by Nick Butcher MaterialWorld (Cheesesquare)
  9. Image Credit Windows Phone - Flat design iOS Phone -

    Skeuomorphic design Android - Material Design PokemonDB design.google.com Android developer docs