Guide to Implement Shared Element Android Transitions Activity In Android App

0
Shares
Guide to Implement Shared Element Android Transitions Activity In Android App
4 (80%) 1 vote

Ever since the launch of Android apps, developers always experiment with different UI widgets to develop user-friendly Android apps. With the release of Android Lollipop, cool new design features have also been introduced including reveal animation, Shared element, transitions activity, and so on.

Now, before we move to technical part, let’s understand bit about shared element. The shared element determines how the shared views are animated from one activity to another.

Though, it’s fairly easy to implement it in Android Lollipop, but implementing shared element transitions activity in older version might become a daunting task.

In our today’s Android app tutorial, we’ll build Android app to demonstrate the shared element implementation process.

Let’s Get Started

Open Android Studio and create a new project.

ss1

Select your target Android device and click on next.

ss2

In the next tab, select Empty Activity.

ss3

Lastly, customize your activity.

ss4

Start Code Integration

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_green_light"
android:id="@+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:background="@null"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/button2"
android:text="Shared Element"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toRightOf="@+id/button"
android:layout_toEndOf="@+id/button" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
android:id="@+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
style="?android:attr/buttonStyleSmall"
android:layout_width="100dp"
android:layout_height="100dp"
android:id="@+id/button4"
android:background="@android:color/holo_orange_light"
android:layout_alignParentBottom="true" />
</RelativeLayout>

activity_next.xml

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<Button
android:id="@+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@android:color/holo_red_light"
android:transitionName="ButtonTrans" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/button5"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:text="SHARED ELEMENT"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="BtnToText" />
</RelativeLayout>

Make “transition” folder and put below file in it.

Shared_element_transition.xml

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

MainActivity.java

package com.spaceo.sharedelement;
import android.annotation.TargetApi;
import android.content.Intent;
import android.os.Build;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionInflater;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Button button,button2,button3,button4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if(Build.VERSION.SDK_INT>=21)
{
getWindow().setSharedElementExitTransition(TransitionInflater.from(this).inflateTransition(R.transition.shared_element_transation));
}
setContentView(R.layout.activity_main);
button = (Button)findViewById(R.id.button);
button2 = (Button)findViewById(R.id.button2);
button3 = (Button)findViewById(R.id.button3);
button4 = (Button)findViewById(R.id.button4);
button.setOnClickListener(this);
button2.setOnClickListener(this);
button3.setOnClickListener(this);
button4.setOnClickListener(this);
}
@SuppressWarnings("unchecked")
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onClick(View v) {
if(v.getId()!=R.id.button2) {
button2.setTransitionName("BtnToText");
v.setTransitionName("ButtonTrans");
Pair<View, String> pair1 = Pair.create((View)button2, button2.getTransitionName());
Pair<View, String> pair2 = Pair.create(v, v.getTransitionName());
// ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, v, v.getTransitionName());
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pair1, pair2);
Intent intent = new Intent(this, NextActivity.class);
startActivity(intent, optionsCompat.toBundle());
}
}
}

NextActivity.java

package com.spaceo.sharedelement;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionInflater;
public class NextActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_next);
if(Build.VERSION.SDK_INT>=21)
{
getWindow().setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.shared_element_transation));
}
}
}

And, we’re done!

Shared element transitions activity can be easy to implement with the above process, but don’t try to be brave and implement all transitions manually by yourself, unless you’re a pro Android App developer. And, in case you insist on implementing it, hire Android app development company to help you with Shared element implementation for your Android app development project.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!