Elevation Effects Introduced In Android5.0

Giving your view a bit of elevation in response to user touch is actually a nice idea to make your view feel material. In Android 5.0 you can easily do this with android:stateListAnimator. It looks like a regular selector, but instead of state drawables you can specify custom objectAnimator which will start an animation when view changes it’s state. In this tutorial I will show you the process of implementing Elevation effects for your views introduced in Android API 21.

Elevation is additionally valuable to make animations where gadgets briefly rise over the view plane when performing some activity.

Watchout the video below to get more details on material design and elevation by google developers.

Now follow the steps below to create the sample code:

1.) Create a project in android studio with api level 21.

NOTE : The setTranslationZ() was introduced in Android 5.0

2.) Write following into mainActivity.java:

 

package com.example.android.elevationbasic;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.Menu;

public class MainActivity extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
ElevationBasicFragment fragment = new ElevationBasicFragment();
transaction.replace(R.id.sample_content_fragment, fragment);
transaction.commit();
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

 

 

3.) main.xml:

 

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/sample_main_layout">

<ViewAnimator
android:id="@+id/sample_output"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">

<ScrollView
style="@style/Widget.SampleMessageTile"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
style="@style/Widget.SampleMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/horizontal_page_margin"
android:paddingRight="@dimen/horizontal_page_margin"
android:paddingTop="@dimen/vertical_page_margin"
android:paddingBottom="@dimen/vertical_page_margin"
android:text="This example shows a way to move a view in the z-axis when the user taps on it, using setTranslationZ()." />
</ScrollView>

</ViewAnimator>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray" />

<FrameLayout
android:id="@+id/sample_content_fragment"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0px" />

</LinearLayout>

 

 

4.) Create and write below in elevationbasics.java:

 

package com.example.android.elevationbasic;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

public class ElevationBasicFragment extends Fragment {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}

@Override
public View onCreateView(
LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.elevation_basic, container, false);

View shape2 = rootView.findViewById(R.id.floating_shape_2);

shape2.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
int action = motionEvent.getActionMasked();
switch (action) {
case MotionEvent.ACTION_DOWN:
view.setTranslationZ(120);
break;
case MotionEvent.ACTION_UP:
view.setTranslationZ(0);
break;
default:
return false;
}
return true;
}
});
return rootView;
}
}

 

 

5.) elevationbasics.xml:

 

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/floating_shape"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginRight="40dp"
android:background="@drawable/shape"
android:elevation="30dp"
android:layout_gravity="center"/>
<View
android:id="@+id/floating_shape_2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="25dp"
android:background="@drawable/shape2"
android:layout_gravity="center"/>
</FrameLayout>

 

 

6.) now define your shape and color in the xml as below:

 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/color_2" />
</shape>
[/code]

and


<resources>
<color name="color_1">#E9EE63</color>
<color name="color_2">#67EAB7</color>
</resources>

 

 

Save and run the project and and see the output as below:

elevation1

Check Defining Shadows and Clipping Views to read more on this topic.

Leave a Comment: