Summary of Material Design lesson from Udacity's Advanced Android course. Given at a Raizlabs hosted study session for Udacity's course where we summarized and presented each lesson along w/ tips from our work experience building Native Android apps at our Google Certificated Agency.

1. Udacity Advanced Android Course
Material Design
KenYee
ken.yee@raizlabs.com

2. Changes to Sunshine App
• Color Theme
• Toolbar
• Material Design Spacing (16dp vertical, 32p horizontal) and Elevation
• CardView (elevations), Recyclerview
• CoordinatorLayout
• Transition Animations

3. Web UI History

4. Android UI History

5. <resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="Theme.AppCompat">
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name=“android:colorAccent">@color/accent</item>
<!-- text color for toolbar titles -->
<item name="android:textColorPrimary">@color/text_primary</item>
<!-- text color for subtitles in lists -->
<item name="android:textColor">@color/text_secondary</item>
<!-- capacitive button toolbar color -->
<item name="android:navigationBarColor">@color/primary_dark</item>
</style>
</resources>
Material ColorTheming

6. Choosing Colors
500 = Base/Primary
700/800=Dark
A = Accent
100 = Light

7. ColorWheel forAccents

8. Material Palette

9. OtherMaterial Design Aspects
• Animation
• Elevation
• Spacing (Margins/Keylines)

10. Support Library *Compat
• Versions back to Gingerbread but especially 4.x
• Theme.AppCompat
• extend ActionBarActivity if not using v7,Toolbar
• DrawableCompat for tinting
• MenuItemCompat for updating menus
• android.support.v7.widget.Toolbar w/
Theme.AppCompat.NoActionBar

11. Toolbar
• android.support.v7.widget.Toolbar & Theme.AppCompat.NoActionBar
• get/setSupportActionToolbar
• add logo to the <android.support.v7.widget.Toolbar> view group

12. Dimension Attributes
• @dimen/abc_action_bar_content_inset_material
• @dimen/abc_list_item_padding_horizontal_material
• @dimen/appbar_elevation
• ?attr/actionBarSize
• ?attr/listPreferredItemHeight

13. Elevation
• android:elevation attribute
• Stacking
• Movement

14. CardView
Rounded corners/padding don’t work well before Lollipop

15. RecyclerView
• Total rethink of Listview/Gridview w/ Animations
• Headers (Decorators) and EmptyViews
• LayoutManager w/ Horizontal Listview, Staggered Grid
• OfficialViewHolder support
• Lots of new APIs…just use RZ’s UniversalAdapter
• Compatibility w/ CoordinatorLayout

16. CoordinatorLayout
• Parallax
• Collapsing
• Element
Movement

17. CoordinatorLayout
<CoordinatorLayout>
<AppBarLayout
android:id=“@+id/appbar”>
<CollapsingToolbarLayout
app:layout_scrollFlags=“scroll|exitUntilCollapsed”>
<ImageView
app:layout_collapseParallaxMultiplier="0.7"
app:layout_collapseMode=“parallax”>
<android.support.v7.widget.Toolbar
app:layout_collapseMode=“pin”>
</AppBarLayout>
<NestedScrollView
android:layout_behavior=“@string/appbar_scrolling_view_behavior”>
<FloatingActionButton
app:layout_anchor=“@id/appbar”
app:layout_anchorGravity=“bottom|right|end”>

18. AppbarLayout’s layout_scrollFlags
• enterAlways - scroll on any downwards scroll event even if
scrolling view is not scrolling
• enterAlwaysCollapsed - initially scroll returning view into
collapsed state
• exitUntilCollapsed - scroll until collapsed when going offscreen
• scroll - scroll w/ scroll events
• snap - snap to closest edge when partially visible

19. ActivityTransitions

20. Changes forActivityTransitions
• v4.app.FragmentActivity or v7.app.AppCompatActivity
• tag shared elements in both layouts with android:transition_name
attribute w/ a strings.xml reference w/ translatable=“false”
• ActivityCompat and ActivityOptionsCompat
• for Lollipop+, use activity themes
• activity.supportPostponeEnterTransition and
activity.supportStartPostponedEnterTransition when containers
and images set up

21. Transitions in Activity’sTheme
<style name="BaseAppTheme" parent="android:Theme.Material">
<!-- enable window content transitions -->
<item name="android:android:windowActivityTransitions">true</item>
<!-- specify enter and exit transitions -->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
<!-- specify shared element transitions -->
<item name="android:windowSharedElementEnterTransition">
@transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
@transition/change_image_transform</item>
</style>

22. Starting Activityw/Transitions
import android.support.v4.util.Pair;
Intent intent = new Intent(this, Activity2.class);
Pair[] transitionViews = new Pair[] {
new Pair(viewHolder.BackgroundImage,
getString(R.string.transition_name_image)),
new Pair(viewHolder.Title,
getString(R.string.transition_name_title))
};
ActivityOptionsCompat options = ActivityOptionsCompat
.makeSceneTransitionAnimation(this, transitionViews);
// start the new activity
ActivityCompat.startActivity(intent, options.toBundle());

23. Waiting forRecyclerView
public void onActivityCreated(Bundle savedInstanceState) {
getActivity().supportPostponeEnterTransition();
}
public void onInflate()
- inflate views
mRecyclerView.getViewTreeObserver().addOnPreDrawListener() -> {
if (mRecyclerView.getChildCount() > 0) {
mRecyclerView.getViewTreeObserver().removeOnPreDrawerListener(this);
- set selected item in recycler view
getActivity().supportStartPostponsedEnterTransition();
public void onLoadFinished() {
if (noData) {
getActivity().supportStartPostponsedEnterTransition();

24. What’s New
• Split Screens
• Bottom Nav Bars

25. Resources
• http://www.hongkiat.com/blog/material-design-resources/
• http://www.materialpalette.com/
• http://www.materialup.com/
• https://github.com/Raizlabs/UniversalAdapter
• http://saulmm.github.io/mastering-coordinator
• https://medium.com/@bherbst/fragment-transitions-with-shared-
elements-7c7d71d31cbb#.f9bztfdsg