Animations In Android KitKat
With the introduction of Android KitKat, Google has brought a number of new additions to Android.
In this tutorial I will focus on one of those additions i.e. transition framework.
Time by time with the new versions of android it brings new improved animation tools for developers. Animations Added in Honeycomb come with very good and easy API for creating animations. Whereas in KitKat, android.transition provides fantastic ways to define and declare animations in an easy way.
Let’s first see what is a scene and what is a transition. One way to define a scene is by loading it from a layout file:
scene = Scene.getSceneForLayout(container, R.layout.example, context);
A scene defines a given state of the UI, whereas a transition defines the change from one scene to another.
Once you have defined a scene the simplest way to perform a transition is to let the TransitionManager perform a default one:
TransitionManager.go(scene);
I will be writing a simple code below to explain you this all in more detail. Follow the steps below
Step1: Create a new android project in your android IDE. Write below code into main activity file:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="MergeRootFrame" />
Step2: Create an xml named scene1 and write following code in it:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/scene" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin"> <TextView android:id="@+id/textView" android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:id="@+id/buttonContainer" android:layout_below="@id/textView" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:id="@+id/goButton" android:text="GO" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="goToScene2"/> </LinearLayout> </RelativeLayout>
Step3: Create and write following into scene2.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/scene" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center_horizontal" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin"> <TextView android:id="@+id/textView" android:text="@string/hello_world" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="@string/hello_world" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:id="@+id/buttonContainer" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:src="@drawable/bnr_hat" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/goButton" android:text="GO" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="goToScene1"/> </LinearLayout> </LinearLayout>
Step4: Create and write following into transition/transitionmanager.xml:
<?xml version="1.0" encoding="utf-8"?> <transitionManager xmlns:android="http://schemas.android.com/apk/res/android"> <transition android:fromScene="@layout/scene1" android:toScene="@layout/scene2" android:transition="@transition/slowtransition"/> <transition android:fromScene="@layout/scene1" android:toScene="@layout/scene2" android:transition="@transition/slowtransition"/> </transitionManager>
Step5: Create and write following into transition/slowtransition.xml:
<?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="sequential"> <fade android:fadingMode="fade_out" android:duration="1000"/> <changeBounds android:duration="2000" android:interpolator="@android:interpolator/anticipate_overshoot"/> <fade android:fadingMode="fade_in" android:duration="1000"/> </transitionSet>
Step6: Create a new fragment activity and write following into it:
package com.example.kitkatanimationspart1;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TransitionFragment extends Fragment {
public TransitionFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.scene1, container, false);
return rootView;
}
}
Step7: Write the following into your main activity:
package com.example.kitkatanimationspart1;
import android.app.Activity;
import android.os.Bundle;
import android.transition.Scene;
import android.transition.TransitionInflater;
import android.transition.TransitionManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
public class MainActivity extends Activity {
private TransitionManager mTransitionManager;
private Scene mScene1;
private Scene mScene2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState == null) {
getFragmentManager().beginTransaction()
.add(R.id.container, new TransitionFragment())
.commit();
}
ViewGroup container = (ViewGroup)findViewById(R.id.container);
TransitionInflater transitionInflater = TransitionInflater.from(this);
mTransitionManager = transitionInflater.inflateTransitionManager(R.transition.transitionmanager, container);
mScene1 = Scene.getSceneForLayout(container, R.layout.scene1, this);
mScene2 = Scene.getSceneForLayout(container, R.layout.scene2, this);
}
public void goToScene1(View view) {
mTransitionManager.transitionTo(mScene1);
}
public void goToScene2(View view) {
mTransitionManager.transitionTo(mScene2);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Step8: Run for the output
Thats it.
Related Posts
Top 15 Best Android Apps For C Programming | 2018 Exclusive
Android Studio Introduction
Applying MediaCodec On An Open Source Android Audio Player
5 Most Used Android Testing Frameworks
Android KitKat Development
Extracting Colors In Android 5.0 – “The Palette API”
Step Counter App With Android KitKat 4.4
The Android Studio – An Introduction With The HelloWorld App