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

DroidCon NYC 2016 - A Material Design guide for...

Yash Prabhu
September 29, 2016

DroidCon NYC 2016 - A Material Design guide for Android developers

Yash Prabhu

September 29, 2016
Tweet

More Decks by Yash Prabhu

Other Decks in Technology

Transcript

  1. Terminology Screen Size - small, normal, large, xlarge Screen density

    - ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi Orientation - landscape/portrait Resolution - physical pixel Density Independent Pixel - virtual pixel px = dp * (dpi / 160) Example: 240 dp screen, 1 dp = 1.5 px
  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>
  3. Custom Fonts // Programmatically defining typefaces TextView tv= (TextView) findViewById(R.id.custom);

    Typeface face=Typeface.createFromAsset(getAssets(), "fonts/Verdana.ttf"); tv.setTypeface(face); // Using Chris Jenkins’ Calligraphy library <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" fontPath="fonts/Verdana.ttf"/>
  4. Imagery - Palette API For extracting colors from an image

    compile "com.android.support:palette-v7:24.2.1" @yashvprabhu
  5. Palette API Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.chicago); if (myBitmap !=

    null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
  6. Palette API 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); int muted = palette.getMutedColor(defaultColor); int mutedLight = palette.getLightMutedColor(defaultColor); int mutedDark = palette.getDarkMutedColor(defaultColor); }}
  7. Imagery - Raster & Vector Specific number of pixels Uses

    math to draw shapes using points, lines and curves @yashvprabhu
  8. Imagery - Scalable Vector Graphic (svg) <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp"

    android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:fillColor="#FF000000" android:pathData="M12,3c-4.97,0 -9,4.03 -9,..."/> </vector>
  9. Add RecyclerView 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/newyork"/> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" tools:textAppearance= "?attr/textAppearanceListItem"/>
  10. Set LayoutManager & Adapter // Set either of these layout

    managers recyclerView.setLayoutManager(new LinearLayoutManager(context)); recyclerView.setLayoutManager(new GridLayoutManager(context, GRID_SPAN)); recyclerView.setLayoutManager(new StaggeredGridLayoutManager(STAGGERED_GRID_SPAN, StaggeredGridLayoutManager.VERTICAL)); // Set adapter on recycler view recyclerView.setAdapter(new GridRecyclerViewAdapter(activity);
  11. Snackbar • Swipeable, can have actions • Single-line snackbar height:

    48dp • Multi-line snackbar height: 80dp • Text: Roboto Regular 14sp • Action button: Roboto Med 14sp, all-caps • Default background fill: #323232 100%
  12. Image Credit Windows Phone - Flat design iOS Phone -

    Skeuomorphic design Android - Material Design Android Design Docs Android Developer docs City images @yashvprabhu
  13. Resources Udacity - Material Design for Android Developers Android Developer

    Docs - Material Design Google Material Design Guidelines Plaid app by Nick Butcher MaterialWorld (Cheesesquare by Chris Banes) Tutorials: Material Doc, Codepath, Google IO 2016 Codelabs @yashvprabhu
  14. A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu

    github.com/yprabhu dramafever.com We’re hiring! www.jsco.re/8ns9