ProgrammingCodeTech: Android shared element Animation or transitions between two activities in android studio

Shared Animation Between Two Activity

Transitions between different activities or fragments involved enter and exit transitions that animated entire view hierarchies independent to each other. Example of such transitions are a fade transition, slide transition.

Note :-the shared element transitions require Android 5.0 (API level 21) and above and will be ignored for any lower API versions. Be sure to check the version at runtime before

using API 21 specific features.

STEP 1. Create a new Project ActivityAnimation in Android Studio.

STEP 2. Add dependency under the build.gradle(Module:app).

build.gradle(Module:app)

dependencies {

implementation 'de.hdodenhof:circleimageview:2.1.0'
implementation 'com.android.support:cardview-v7:27.1.1'

}

STEP 3. Add item in res/values/style.xml that Enable Window Content Transitions

style.xml

STEP 4. 1. Paste this .png images in res/drawable folder or you can download your
image from internet. And add text into res/values/string.xml

Click here for --->> image1, image2

string.xml

<resources>
    <string name="app_name">ActivityAnimation</string>
    <string name="name">Phil Read – 52 wins</string>
    <string name="dec">Britain rider of all time championships,

with GP titles in the 125cc, 250cc (x4) and 500cc (x2) classes.</string>

</resources>

Assign a common transition name to the shared elements in both layout activity_main.xml and activity_second.xml

android:transitionName=" "

2. Write xml code and Create layout in res/layout/activity_main.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:src="@mipmap/ic_launcher" />

    <android.support.v7.widget.CardView
        android:id="@+id/profile_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        app:cardCornerRadius="5dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">
            
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_img"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/programmingcodetechprofile"
                android:transitionName="profileimg_transiton"
                app:civ_border_color="@color/black"
                app:civ_border_width="1dp" />

            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginStart="10dp"
                android:layout_toEndOf="@id/profile_img"
                android:layout_toRightOf="@+id/profile_img"
                android:orientation="vertical">

                
                <TextView
                    android:id="@+id/profile_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/name"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/black"
                    android:textStyle="bold"
                    android:transitionName="profilename_transiton" />

<TextView
                    android:id="@+id/profile_dec"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/dec"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:transitionName="profiledes_transiton" />

</LinearLayout>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

3. Write xml code and Create layout file res/layout/activity_second.xml

activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<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_gravity="center"
    android:layout_margin="5dp"
    android:orientation="vertical"
    android:paddingTop="30dp">
    
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/shared_img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:src="@drawable/programmingcodetechprofile"
        android:transitionName="profileimg_transiton"
        app:civ_border_color="@color/black"
        app:civ_border_width="1dp" />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_toEndOf="@id/profile_img"
        android:layout_toRightOf="@+id/profile_img"
        android:orientation="vertical">

        
        <TextView
            android:id="@+id/shared_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:text="@string/name"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:transitionName="profilename_transiton" />

<TextView
            android:id="@+id/shared_dec"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            android:text="@string/dec"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:transitionName="profiledes_transiton" />

</LinearLayout>

</LinearLayout>

STEP 5. Create and Code in java/MainActivity.java

MainActivity.java

package com.example.amitrawat.activityanimation;

import android.app.ActivityOptions;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.util.Pair;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    CardView profile_card;
    de.hdodenhof.circleimageview.CircleImageView profile_img;
    TextView profile_name, profile_dec, msg;

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

        profile_card = findViewById(R.id.profile_card);
        profile_img = findViewById(R.id.profile_img);
        profile_name = findViewById(R.id.profile_name);
        profile_dec = findViewById(R.id.profile_dec);

        profile_card.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent sharedintent = new Intent(MainActivity.this, SecondActivity.class);
                Pair[] pairs = new Pair[3];
                pairs[0] = new Pair<View, String>(profile_img, "profileimg_transiton");
                pairs[1] = new Pair<View, String>(profile_name, "profilename_transiton");
                pairs[2] = new Pair<View, String>(profile_dec, "profiledes_transiton");

                ActivityOptions option = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, pairs);
                startActivity(sharedintent, option.toBundle());

            }
        });
    }
}

STEP 6. Create and Code in java/SecondActivity.java

SecondActivity.java

package com.example.amitrawat.activityanimation;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

public class SecondActivity extends AppCompatActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}

STEP 7. Entry MainActivity.java and SecondActivity.java in mainfest/Android.xml

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.amitrawat.activityanimation">

    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".SecondActivity" />
    </application>

</manifest>

ProgrammingCodeTech

Saturday, 19 May 2018

Android shared element Animation or transitions between two activities in android studio

No comments:

Post a Comment

Popular Posts