Activity Transition Example

Activity transitions allow you to configure the appearance of changes in the user interface. You can animate changes in an app screen by defining each as a scene and controlling the way in which the transition changes the app appearance from one screen to another.

Today, we will build a simple app with an animated object to show transition between them. This includes preparing the layout and drawable files in XML, then configuring and applying the transition in Java. In this tutorial we will define two scenes in which the same objects are arranged differently on the screen.

Step1: Creating a new Android app in your android IDE. To use transition classes, make sure you have set the minimum SDK 19.

Step2: Write following into Main activity:

 

package com.example.activitytransitionexample;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.TransitionSet;
import android.view.Menu;
import android.view.MenuItem;

import android.transition.AutoTransition;
import android.transition.Scene;
import android.transition.Transition;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.RelativeLayout;
import android.transition.TransitionManager;

public class MainActivity extends ActionBarActivity {

private Scene scene1, scene2;
// private Transition transition;
private boolean start;
private TransitionSet transition;

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

RelativeLayout baseLayout = (RelativeLayout)findViewById(R.id.base);

ViewGroup startViews = (ViewGroup)getLayoutInflater()
.inflate(R.layout.activity_main, baseLayout, false);

ViewGroup endViews = (ViewGroup)getLayoutInflater()
.inflate(R.layout.secondlayout, baseLayout, false);

scene1 = new Scene(baseLayout, startViews);
scene2 = new Scene(baseLayout, endViews);

transition = new AutoTransition();
transition.setDuration(5000);
transition.setInterpolator(new AccelerateDecelerateInterpolator());

transition = new TransitionSet();
transition.setDuration(2000);
transition.addTransition(new ChangeBounds());
transition.setInterpolator(new AccelerateDecelerateInterpolator());

start=true;
}

public void changeScene(View v){

if(start) {
TransitionManager.go(scene2, transition);
start=false;
}
else {
TransitionManager.go(scene1, transition);
start=true;
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

 

Step3: Write following into main xml:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" 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" tools:context=".MainActivity">

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1"
android:src="@drawable/shape1"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:src="@drawable/shape2"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:src="@drawable/shape3"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn4"
android:src="@drawable/shape4"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:onClick="changeScene"/>

</RelativeLayout>

 

Step4: Create and write following into secondlayout.xml:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:id="@+id/base"
tools:context=".TransitionsActivity">

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1"
android:src="@drawable/shape1"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:src="@drawable/shape2"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:src="@drawable/shape3"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="changeScene"/>

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn4"
android:src="@drawable/shape4"
android:background="#00000000"
android:contentDescription="shape"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="changeScene"/>

</RelativeLayout>

 

Step5: Create 4 shape xmls into your drawable folder as below:

shape1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<gradient
android:endColor="#66ff0000"
android:gradientRadius="150"
android:startColor="#ffffcc00"
android:type="radial"
android:useLevel="false" />

<size
android:height="100dp"
android:width="100dp" />

</shape>

shape2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<gradient
android:endColor="#66ffcc00"
android:gradientRadius="150"
android:startColor="#ff00ff00"
android:type="radial"
android:useLevel="false" />

<size
android:height="100dp"
android:width="100dp" />

</shape>

shape3.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<gradient
android:endColor="#6600ff00"
android:gradientRadius="150"
android:startColor="#ff0000ff"
android:type="radial"
android:useLevel="false" />

<size
android:height="100dp"
android:width="100dp" />

</shape>

shape4.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<gradient
android:endColor="#660000ff"
android:gradientRadius="150"
android:startColor="#ffff0000"
android:type="radial"
android:useLevel="false" />

<size
android:height="100dp"
android:width="100dp" />

</shape>

 

Step6: Run to check output below:

transition1

Check my previous post in Android wear Wearable list view.

Related Posts

07 Feb, 2012

TransitionAnimationExample
15 Jul, 2020

Top 10 Android App Development Trends | 2020 Guide
30 Aug, 2016

5 Best Resources to Get Started with Android Nougat
07 Sep, 2015

Android Studio Introduction
29 Aug, 2015

Services – An Android Component
18 Aug, 2015

Applying MediaCodec On An Open Source Android Audio Player
10 Aug, 2015

5 Most Used Android Testing Frameworks
15 Jul, 2015

Android Language Highlights A Developers Perspective
Previous Post Wearable ListView In Android Wear Next Post Reveal Animation Example Introduced In Android 5.0

Leave a Comment:

Popular posts

Socket Programming
 Android
Aug 17, 2011
Use Of SQLite
 Android
Jun 29, 2011
TicTacToe Game Implementation
 Android
Apr 16, 2011
View Pager Example In Android Development
 Android
Aug 14, 2012