Cross - platform guide for visual, motion and interaction.

According to headline of android new UI guideline documentation, I would like to take a closer look to the new elements and patterns. Material design has became refreshed way to create beautiful and responsive applications.
The concept of a new approach to creating UI was introduced with Android version 5.0. Google unveiled new elements for use in applications with the new system’s version.
They are as follows:

  • New style
  • Widgets for cards and mailing lists
  • Custom shadows and animations
  • Cut views
  • Vector graphics

New theme and related changes

The use of a new style, requires the latest system’s version – Lollipop. It allows to set colors of navigation bar or status bar. Another new feature is using third dimension to style UI elements. Changes are visible by means of raising the controls in the Z axis. In addition controls can be defined for their height. Use of elevation is combined with a new way to define shadows. The interaction of such elements can be animated using the dynamic control’s shadow. This is another option that we find as compared to the previous version of the system. In order to show the change of button’s state, selectors were defined together with elements that should have been displayed. At the time, change can be visualized in a different way:

Declaring an elevation for the defined control:


and its shape

<shape xmlns:android=""
android:shape="oval" >
  <solid android:color="@color/purple" />
  <corners android:radius="15dp" />

The button defined like this, will give a shadow.

Button mButton = (Button) findViewById(;
mButton.setOutlineProvider(new ViewOutlineProvider() {
  public void getOutline(View view, Outline outline) {
    //example set
    outline.setOval(0, 0, view.getWidth(), view.getHeight());

It looks as follows:

Of course, you can still use the previous ways, and the use of a new mechanism applies to button’s height.

RecyclerView became an optimized version of the lists and grids basic controls. The newly introduced view doesn’t has many differents from the classic gridview and listview. Used mechanisms are very similar but processor utilization is much more better optimized to supporting changes caused by the system or network. Use the RecyclerView widget when you have data collections, whose elements change at runtime based on user action or network events. This is a very important mechanism, that in basic controls, when changing their contents caused their re-creation. It was very well noticeable when the list / grid was made up of changing elements. Simple counter located in the list, could cause a redraw of all elements of the view dozen times per second – with each of its change for each item. A very good way was to insert Log.i (“tag”, “refresh”) into the center of onViewCreate() function, sample ArrayAdaptera to noticed the problem. Performance of such complex views, and especially their scroll was very inefficient. RecyclerView’s mechanism was rebuilt here in order to improve and expand the capabilities of basic lists and grids. At this time, the basic elements of the RecyclerView are:


ViewHolder is responsible for the use of pattern to create a single view, and it is used as often as possible.
The adapter connects the data with a view, in terms of its purpose nothing has changed, except the optimization of its work.
LayoutManager is responsible for the placement of elements within the visible area.
ItemDecoration and ItemAnimator correspond, for styling and animation added, deleted items.
It should be a separate article written for RecyclerView, so let the simple example clearly shows its features:
Defining the pattern ViewHolder

public static class ViewHolder extends RecyclerView.ViewHolder {
  // each data item is just a string in this case
  public TextView mTextView;
  public TimeTicker mTimeTicker;

  public ViewHolder(View v) {
    mTextView = (TextView) v.findViewById(;
    mTimeTicker = (TimeTicker) v.findViewById(;

Holder’s connection with data

public void onBindViewHolder(ViewHolder holder, int position) {
  if (position == 3 &amp;&amp; !holder.mTimeTicker.isStarted()) {

Creating new holder on the basis of the created view.

public ViewHolder onCreateViewHolder(ViewGroup parent, int arg1) {
  View v = LayoutInflater.from(parent.getContext()).inflate(
  R.layout.item, parent, false);

  ViewHolder vh = new ViewHolder(v);
  return vh;

After connected the elements in the ordinary way.

RecyclerView recycler = (RecyclerView) findViewById(;
LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
MyAdapter adapter = new MyAdapter(myDataset);

We are able to see the same effect that is achieved so far through the use of ordinary list and adapter, but with better optimization.

Another new solution is  introduction of the Palette class. It is used to get different colors of the analyzed image. It allows to extract information about a few color samples classified as:

Dark Muted Swatch
Dark Vibrant Swatch
Light Muted Swatch
Light Vibrant Swatch
Muted Swatch
Vibrant Swatch

Each sample allows to draw colors in RGB, HSL, population of the represented swatch, as well as to draw the color of text that should be on the background of the swatch, so it can make a good contrast. The whole process looks like this:

Palette palette=null;
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.vader, opts);

To make the analysis of the image in the secondary thread, record listener that informs about parsed bitmap.

PaletteAsyncListener listener = new PaletteAsyncListener() {
  public void onGenerated(Palette arg0) {
    SecondActivity.this.palette = arg0;
Palette.generateAsync(bitmap, listener);

After the execution of the method onGenerated(), we can pull out from the object palette, all essentials information, such as the following figure:


android development android development


On the left side there are squares, RGB colored, from extracted picture swatches.
In addition, through the analysis of the opportunities caused by a Palette, the visibility of the text is much better.

Another new thing is the creation of vector images, using the xml file like below. They are defined as custom shapes. Path of the line is defined as functions, compatible with saved svg - specification. Android's XMLA design is moreover very similar to the prototype developed by the W3C.

<vector xmlns:android=""
android:width="256dp" >

android:pathData="M32.5,17.5 v-15 a15,15 0 0,0 -15,15 z"
android:strokeWidth="1" />


It is the interesting alternative to the use of raster images.


android development android development


In addition to defining vector images we have also the possibility of animation and transformation. This is ensured by a very friendly mechanism of matching and defining them. For the vector image rotation must be defined transformation parameters. In the main XML vector image animation,ther is definition of image source path and its changes.

<animated-vector xmlns:android=""
android:drawable="@drawable/quarter" >

android:animation="@anim/rotate" />
android:animation="@anim/path" />


To the vector graphic should be add two informations. The name of the drwaing way and their group. After changes the source of the image looks as follows:

&lt;vector xmlns:android=""
android:width="256dp" &gt;

android:pivotY="17.5" &gt;
android:pathData="M32.5,17.5 v-15 a15,15 0 0,0 -15,15 z"
android:strokeWidth="1" /&gt;


The definition of the changes in the way of image drawing,

<set xmlns:android="">
android:valueFrom="M32.5,17.5 v-15 a15,15 0 0,0 -15,15 z"
android:valueTo="M32.5,17.5 v-15 a15,15 0 0,0 -15,0 z"
android:valueType="pathType" />

and the image rotation:

<objectAnimator xmlns:android=""
android:valueTo="360" />

The defined vector image files animated enough at this time to assign a background to the selected control. Animations can be run in an exemplary manner:

Animatable anim = ((Animatable) ((ImageView) imageView).getDrawable());

animation and transition effects

However the greatest attention gives tracking of animations and transition effects, that has been refreshed with material design. The first one, of the new animations, is animation for the element that previously was invisible. Animation allows to defined the place where the item will appears. The code below shows a view appearing in the upper left corner and hiding located in the lower right. For the animation of appearing view:

View image2 = findViewById(;
int radius = Math.max(image2.getWidth(), image2.getHeight());
Animator anim = ViewAnimationUtils.createCircularReveal(image2,
image2.getLeft(), image2.getTop(), 0, radius);
selected = true;

and for the animation of the view's disappearing.

final View image2 = findViewById(;
int initialRadius = image2.getWidth();
Animator animation = ViewAnimationUtils.createCircularReveal(
image2, image2.getRight() - image2.getLeft(), 
image2.getBottom() - image2.getTop(), initialRadius, 0);
animation.addListener(new AnimatorListenerAdapter() {
  public void onAnimationEnd(Animator animation) {

Maybe the change is not very big but makes the application more interesting for the user
Transition efects are the most beautiful changes in the new version. The changes concern determination which view should be transfer from one activity to another. The transition efect is determined as follows:
At the beginning the efects of transitions between activities should be declared in the main style of the application:


<style name="AppBaseTheme" parent="android:Theme.Material">
<item name="android:windowContentTransitions">true</item>
<!--for the transition between activities->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
<!--dla przejscia widokow miedzy aktywnosciami-->
<item name="android:windowSharedElementEnterTransition">@transition/anim_view_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/anim_view_transition</item>

then the efect of the transition between activities is defined:

<transitionSet xmlns:android="" >

<explode />


and the transition of the views between activities

<transitionSet xmlns:android=""
android:transitionOrdering="sequential" >

<changeBounds />

<changeImageTransform />

<fade android:fadingMode="fade_out" >
<target android:targetId="@id/ror" />

In place of the starting new activity should be defined the view for transition between activities.

ImageView rorImage = (ImageView) findViewById(;

Intent intent = new Intent(SecondActivity.this,ThirdActivity.class);
startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(SecondActivity.this, rorImage, "ror").toBundle());

The last thing to do, is to setting a tag which specifies trasfered view, in xmls' of both activities.
For both views we can define other parameters of the size etc. It is necessary to that this change has taken into acocunt in the file of transition.

<!--Activity from where the view is transfered-->
android:src="@drawable/ror" />
<!--Activity where the view is transfered-->
android:src="@drawable/ror" />

The transition between all activities in the application looks like this:

Specified view's transition efect between activities

Complete source of knowledge about the material design you may find HERE

An example of a project on the basis of the presented  new version of android's elements can be found HERE

For the web developers Google also has prepared project POLYMER

It allows almost similar way to websites' construction. It can be said that material-design and its web version gives a new way to built the interface of the user. There is nothing more than start work and design application based on the new patterns.

Written by Tomek

PDF industry dedicated app examples