Michał Biernacki, DeSmart

Android app materialization in practice

?

Material Design from developer’s perspective

Material Design - dev's perspective

App layout changes,

a lot of new APIs making view transitions and animations Activity easier... … to apply on Lollipop only,

possibility to set z-index to views so that framework could render real time shadows ... … and for the remaining 99% of the devices we will make them as graphics.

Fragmentation FTW!!!

Where to start

?

Styles

Styles

For Android 5.0+:

Material.Light Material.Dark

For AppCompat:

Theme.AppCompat.Light ThemeAppCompat.Dark

Styles

android:colorPrimary

android:colorPrimaryDark

android:colorAccent

android:statusBarColor (inherited by default from colorPrimaryDark)

when using AppCompat write attributes without android namespace.

Views/Widgets

Toolbar

Toolbar

ActionBar class generalization,

it can be placed at any level of view hierarchy,

you can have multiple Toolbar instances in your layout,

you can set Toolbar as a replacement for standard ActionBar in your Activity.

Toolbar as ActionBar (in AppCompat)

Set the correct style so that the framework won't draw standard ActionBar (using Theme.AppCompat.NoActionBar for example),

add Toolbar to your layout,

make your Activity extend ActionBarActivity,

and in your Activity: Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar);

Toolbar

You can add child components to the Toolbar which inherits from ViewGroup,

Toolbar containing a SwitchCompat in Google Inbox app:

SwitchCompat - bug

RecyclerView

RecyclerView

ListView 2.0,

RecyclerView is a flexible view providing a limited window into a large data set,

it uses plugable classes for drawing, animating and positioning child components,

it’s available as a separate library com.android.support:recyclerview-v7

RecyclerView - Adapter, ViewHolder

Provides access to data layer,

creates layout for each element and fills it with data,

RecyclerView uses new interface for Adapter called RecyclerView.Adapter…

…so say bye bye to CursorAdapter, ArrayAdapter etc.

it uses convertView and holder pattern by default.

RecyclerView - LayoutManager

Responsible for measuring and positioning elements in RecyclerView,

responsible for cleaning views from memory which are no longer visible to the users,

application will throw exception if we don’t set LayoutManager for RecyclerView,

Google provides two standard implementations for this class: LinearLayoutManager and GridLayoutManager.

RecyclerView - ItemDecoration

Simple class responsible for additional view decorations,

it’s optional to use it,

you can add a couple of decorations to one RecyclerView,

all decorations are drawn in the same order as they've been added using onDraw() and onDrawOver() methods.

RecyclerView - ItemAnimator

Class which animates collection elements,

animates elements while adding / deleting them from collection and when element movement is required,

if we don’t prepare our custom ItemAnimator the Recycler will use default implementation.

RecyclerView - ItemAnimator

notifyDataSetChanged()

Instead of it we use:

notifyItemInserted(int position); notifyItemRemoved(int position);

notifyDataSetChanged() is bleah!

RecyclerView - Summary

We put RecyclerView to the layout,

we get its references in our Activity or Fragment,

we attach LayoutManager,

we attach adapter with data,

we add as many ItemDecorators as we need,

if we need our own animations we add our custom ItemAnimator.

CardView

CardView

ViewGroup with predefined „card” background,

allows to set elevation on each system version,

this class is available as a separate library com.android.support:cardview-v7

CardView

Other

Palette

Picks colors from given bitmap,

there are two methods to pick the colors: public static generate(Bitmap) public static generateAsync(Bitmap)

Class tries to assign colors as Vibrant or Muted.

Z-Index/Elevation

ViewCompat.setElevation(View, float),

method above helps us avoid checking at runtime OS versions the app works on,

shadows will be rendered only for Android 5.0.

Activity transitions

API 21 makes it easy to animate elements from one Activity to another,

it’s also possible to set unshared elements enter and exit animations.

Activity transitions

In styles android:windowContentTransitions true

we specify animations in xml,

we set enter and exit animations for shared elements in xml or in code,

we set attribute “transitionName” on the element we want to animate,

we use method ActivityOptions.makeSceneTransitionAnimation(Context, View, String);

CircularReveal

Animator anim = ViewAnimationUtils.createCircularReveal(view, x, y, 0, radius);

myView.setVisibility(View.VISIBLE);

anim.start();

That’s all folks!

mail: hellboy@desmart.comwww: www.desmart.comblog: www.desmart.com/blog