Learn How to Animate your Android App

www.edureka.co/android-development-certification-course
View Android Development course details at www.edureka.co/android-development-certification-course
Learn how to animate your Android App
For Queries:
Post on Twitter @edurekaIN: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email Us : sales@edureka.co

In this webinar, we will discuss:
 Path Interpolator
 Activity Transitions in Android
 Sync Transition and Animation
 Animating an Android Application
Objectives

29
res/interpolator/linear.xml
<linearInterpolator />
Path Interpolator
 An interpolator can traverse a Path that extends
from Point (0, 0) to (1, 1).
The x coordinate along the Path is the input value
and the output is the y coordinate of the line at
that point.

30
res/interpolator/fast_out_linear_in.xml
<pathInterpolator
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
Path Interpolator

31
res/interpolator/fast_out_slow_in.xml
<pathInterpolator
Path Interpolator

32
res/interpolator/linear_out_slow_in.xml
<pathInterpolator
Path Interpolator

34
The Interpolator Party !!

40
Activity Transitions
 Window Transitions animate windows
 Activity transitions animate window components
 Animate when launching one activity from another
 Shared elements are transferred via ActivityOptions
 Based on the Transitions API released with KitKat

MainActivity.java
getWindow().
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
res/values/theme.xml
<style name="BaseAppTheme" parent="android:Theme.Material">

<item name="android:windowContentTransitions">true</item>
</style>
Enable Transitions

res/values/theme.xml
<style name="BaseAppTheme" parent=“android:Theme.Material”>

<item name=“android:windowEnterTransition">
@transition/explode</item>
<item name=“android:windowExitTransition”>
@transition/explode</item>
</style>
Activity Transition

43
Example

res/layout/grid_item.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageview_item"
android:layout_height="match_parent"/>
<TextView
android:id="@+id/textview_name"
android:background=“?android:attr/colorPrimary"/>
</LinearLayout>
Activity A

res/layout/detail.xml
<LinearLayout
android:orientation="vertical">
<ImageView
android:id="@+id/imageview_header"
android:layout_height="match_parent"/>
<TextView
android:id="@+id/textview_title"
android:theme="@android:style/Theme.Material"/>
</LinearLayout>
Activity B

46
ActivityOptionsCompat activityOptions =
ActivityOptionsCompat.makeSceneTransitionAnimation(
this,
new Pair<View,
String>(view.findViewById(R.id.imageview_item),
DetailActivity.VIEW_NAME_HEADER_IMAGE), new
Pair<View,
String>(view.findViewById(R.id.textview_name),
DetailActivity.VIEW_NAME_HEADER_TITLE));
// Now we can start the Activity, providing the
activity options as a bundle
ActivityCompat.startActivity(this, intent,
activityOptions.toBundle());
TransitionActivity.java

47
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_transition_details);
/**
* Set the name of the view's which will be transition
to, using the static values above.
* This could be done in the layout XML, but exposing it
via static variables allows easy
* querying from other Activities
*/
ViewCompat.setTransitionName(mHeaderImageView,
VIEW_NAME_HEADER_IMAGE);
ViewCompat.setTransitionName(mHeaderTitle,
VIEW_NAME_HEADER_TITLE);
}
DetailActivity.java

res/layout/fragment_sample.xml
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/robotoView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background=“@drawable/magic”
android:transitionName=“@transition/my_transition”/>
res/transition/grid_detail_transition.xml
<transitionSet xmlns:android=“…”>
<changeBounds/>
<changeImageTransform/>
</transitionSet>
Shared Element Transition

50
getWindow().getEnterTransition().addListener(new
Transition.TransitionListener() {
@Override
public void onTransitionEnd(Transition transition) {
mFab.animate()
.translationY(0)
.setInterpolator(new
OvershootInterpolator(1.f))
.setStartDelay(300)
.setDuration(400)
.start();
}
});
Sync Transition and Animation
DetailActivity.java

DetailActivity.java
@Override
public void onBackPressed() {
mFab.animate()
.translationYBy(2 * 56)
.setInterpolator(new
OvershootInterpolator(1.f))
.setDuration(400)
.withEndAction(new Runnable() {
@Override
public void run() {
finishAfterTransition();
}
});
}
Animate Before Transition

Questions
For Queries: Post on Twitter @edurekaIN: #askEdureka Post on Facebook /edurekaIN

Learn How to Animate your Android App

Recommended

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Learn How to Animate your Android App (20)

More from Edureka! (20)

Recently uploaded (20)

Learn How to Animate your Android App