Udacity Advanced Android CourseMaterial Design

Ken Yee ken.yee@raizlabs.com

Changes to Sunshine App• Color Theme

• Toolbar

• Material Design Spacing (16dp vertical, 32p horizontal) and Elevation

• CardView (elevations), Recyclerview

• CoordinatorLayout

• Transition Animations

Web UI History

Android UI History

<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 Color Theming

Choosing Colors

500 = Base/Primary700/800=Dark A = Accent 100 = Light

Color Wheel for Accents

Material Palette

Other Material Design Aspects• Animation

• Elevation

• Spacing (Margins/Keylines)

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

Toolbar• android.support.v7.widget.Toolbar & Theme.AppCompat.NoActionBar

• get/setSupportActionToolbar

• add logo to the <android.support.v7.widget.Toolbar> view group

Dimension Attributes• @dimen/abc_action_bar_content_inset_material

• @dimen/abc_list_item_padding_horizontal_material

• @dimen/appbar_elevation

• ?attr/actionBarSize

• ?attr/listPreferredItemHeight

Elevation• android:elevation attribute

• Stacking

• Movement

CardViewRounded corners/padding don’t work well before Lollipop

RecyclerView• Total rethink of Listview/Gridview w/ Animations

• Headers (Decorators) and Empty Views

• LayoutManager w/ Horizontal Listview, Staggered Grid

• Official ViewHolder support

• Lots of new APIs…just use RZ’s UniversalAdapter

• Compatibility w/ CoordinatorLayout

CoordinatorLayout• Parallax

• Collapsing

• Element Movement

CoordinatorLayout<CoordinatorLayout>

<AppBarLayout android:id=“@+id/appbar”><CollapsingToolbarLayout app:layout_scrollFlags=“scroll|exitUntilCollapsed”>

<ImageViewapp: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”>

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

Activity Transitions

Changes for Activity Transitions• 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

Transitions in Activity’s Theme

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

Starting Activity w/ 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());

Waiting for RecyclerView

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();

What’s New• Split Screens

• Bottom Nav Bars

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