DroidCon NYC 2016 - A Material Design guide for Android developers

00bc3e6ec35c62fabef044e492070c29?s=47 Yash Prabhu
September 29, 2016

DroidCon NYC 2016 - A Material Design guide for Android developers

00bc3e6ec35c62fabef044e492070c29?s=128

Yash Prabhu

September 29, 2016
Tweet

Transcript

  1. 2.
  2. 5.

    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
  3. 7.
  4. 8.
  5. 14.
  6. 16.

    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>
  7. 20.

    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"/>
  8. 21.

    Imagery - Palette API For extracting colors from an image

    compile "com.android.support:palette-v7:24.2.1" @yashvprabhu
  9. 22.

    Palette API Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.chicago); if (myBitmap !=

    null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
  10. 23.

    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); }}
  11. 24.
  12. 25.

    Imagery - Raster & Vector Specific number of pixels Uses

    math to draw shapes using points, lines and curves @yashvprabhu
  13. 27.
  14. 28.

    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>
  15. 30.
  16. 41.
  17. 47.
  18. 54.
  19. 64.

    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"/>
  20. 65.

    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);
  21. 66.

    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%
  22. 68.
  23. 79.

    Image Credit Windows Phone - Flat design iOS Phone -

    Skeuomorphic design Android - Material Design Android Design Docs Android Developer docs City images @yashvprabhu
  24. 80.

    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
  25. 81.

    A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu

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