How To Configure Appearance of Android App’s User Interface Through Transition Activity

0
Shares
How To Configure Appearance of Android App’s User Interface Through Transition Activity
4 (80%) 1 vote

For any Android app to be successful, user interface plays a huge role in impressing prospect users. While, some apps gain popularity through their unique idea and functionalities, but a good user interface also contribute for increasing app downloads in Play Store.

The Android transition activity framework allows developer to create appealing user interface by defining each phase of Android app as a scene and transition activity to implement an animation from one screen to another.

Transition Activity Demo

In today’s Android app tutorial, we’ll build an animated user interface using transition activity framework. Here, you’ll learn how to implement Explode, explode with bounce, slide from right, and slide top to bottom transition.

Let’s Get Started

Create a new project in Android Studio.

ss1

In the next tab, select your target device.

ss2

Add an activity to mobile – Empty Activity.

ss3

Customize the activity.

ss4

Start Code Integration For Transition Activity

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#45B39D"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="Transition types"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="@+id/transition1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Explode transition" />
<Button
android:id="@+id/transition2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Explode with bounce transition" />
<Button
android:id="@+id/transition3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Slide from right transition" />
<Button
android:id="@+id/transition4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Slide top to bottom" />
</LinearLayout>

Transition_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/square_red"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/circle_24dp"
/>
<TextView
android:id="@+id/activity_title"
style="@style/Base.TextAppearance.AppCompat.Widget.ActionMode.Subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups" />
<Button
android:id="@+id/exit_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_marginTop="50dp"
android:text="back to main screen" />
</LinearLayout>

Put above 2 xml files in “transition” folder in resources, if you don’t find folder please create new folder with name “transition”.

Explode.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode
android:duration="500"
android:interpolator="@android:interpolator/bounce" />
</transitionSet>

Slide_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide
android:duration="500"
android:slideEdge="top" />
</transitionSet>

TransitionHelper.java

package com.spaceo.transitionanimation;
import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.util.Pair;
import android.view.View;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
class TransitionHelper {
public static Pair<View, String>[] createSafeTransitionParticipants(@NonNull Activity activity,
boolean includeStatusBar, @Nullable Pair... otherParticipants) {
View decor = activity.getWindow().getDecorView();
View statusBar = null;
if (includeStatusBar) {
statusBar = decor.findViewById(android.R.id.statusBarBackground);
}
View navBar = decor.findViewById(android.R.id.navigationBarBackground);
List<Pair> participants = new ArrayList<>(3);
addNonNullViewToTransitionParticipants(statusBar, participants);
addNonNullViewToTransitionParticipants(navBar, participants);
if (otherParticipants != null && !(otherParticipants.length == 1
&& otherParticipants[0] == null)) {
participants.addAll(Arrays.asList(otherParticipants));
}
return participants.toArray(new Pair[participants.size()]);
}
private static void addNonNullViewToTransitionParticipants(View view, List<Pair> participants) {
if (view == null) {
return;
}
participants.add(new Pair<>(view, view.getTransitionName()));
}
}

MainActivity.java

package com.spaceo.transitionanimation;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private Button transition1;
private Button transition2;
private Button transition3;
private Button transition4;
public static final String TRANSITION_TYPE="transition_type";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initControls();
}
private void initControls() {
transition1=(Button)findViewById(R.id.transition1);
transition2=(Button)findViewById(R.id.transition2);
transition3=(Button)findViewById(R.id.transition3);
transition4=(Button)findViewById(R.id.transition4);
transition1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,1);
transitionTo(mIntent);
}
});
transition2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,2);
transitionTo(mIntent);
}
});
transition3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,3);
transitionTo(mIntent);
}
});
transition4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,4);
transitionTo(mIntent);
}
});
}
@SuppressWarnings("unchecked")
void transitionTo(Intent i) {
final Pair<View, String>[] pairs = TransitionHelper.createSafeTransitionParticipants(this, true);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
startActivity(i, transitionActivityOptions.toBundle());
}
}

NextActivity.java

package com.spaceo.transitionanimation;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.transition.Explode;
import android.transition.Slide;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import static com.spaceo.transitionanimation.MainActivity.TRANSITION_TYPE;
public class NextAcitivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.transition_activity);
((Button)findViewById(R.id.exit_button)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
int type = getIntent().getIntExtra(TRANSITION_TYPE,1);
switch (type){
case 1:
Explode explodeTransition = new Explode();
explodeTransition.setDuration(500);
getWindow().setEnterTransition(explodeTransition);
break;
case 2:
Transition explodeWithBounce = TransitionInflater.from(this).inflateTransition(R.transition.explode);
getWindow().setEnterTransition(explodeWithBounce);
break;
case 3:
Slide slideTransition = new Slide();
slideTransition.setDuration(500);
slideTransition.setSlideEdge(Gravity.RIGHT);
getWindow().setEnterTransition(slideTransition);
break;
case 4:
Transition slideFromTop = TransitionInflater.from(this).inflateTransition(R.transition.slide_from_top);
getWindow().setEnterTransition(slideFromTop);
break;
default:
break;
}
}
}

And done!

Though, there are yet to explore what else you can do with Android transition activity framework. And, to further develop transitions in your startup app idea, hire Android app development company to get suggestions of latest Android UI trends currently in the market.

Grab a free copy of Android Transition Activity Framework demo from Github.

 
0
Shares
 

Want to Develop Android App From Scratch? Contact Us Now