How to start shared element transition between 2 activity?

Question

I just learn about Shared Element in Android and I have one image which one of them in ActivitySplashScreen and one other is into Toolbar and I want to use shared element to move this image from ActivitySplashScreen to ActivityMain

after some search and try to implement that simple way to make this feature don't work on my code, for example:

style.xml:

<style name="AppTheme" parent="BaseTheme">
    <item name="android:windowContentTransitions">true</item>
</style>

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    ...
</style>

ActivitySplashScreen.java:

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

    ButterKnife.bind(this);

    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            Intent intent = new Intent(ActivitySplashScreen.this, MainActivity.class);
            ActivityOptionsCompat options = ActivityOptionsCompat.
                    makeSceneTransitionAnimation(ActivitySplashScreen.this,
                            app_logo,
                            ViewCompat.getTransitionName(app_logo));
            startActivity(intent, options.toBundle());

            finish();
        }
    }, 3000);
}

ActivityMain.java:

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

and ImageView widget on my ActivitySplashScreen and ActivityMain xml layout:

<ImageView
    android:id="@+id/instagram_add_story"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="8dp"
    android:src="@drawable/img_wizard_1"
    android:transitionName="app_logo"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="VectorDrawableCompat" />

this code is not working as well and I'm not sure what exactly problem on that

UPDATED

ActivitySplashScreen xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <LinearLayout
        android:id="@+id/alachiq_header_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/instagram_animation_gradient_list"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingTop="40dp">

        <ImageView
            android:id="@+id/app_logo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:transitionName="app_logo"
            android:tint="@android:color/white"
            app:srcCompat="@drawable/img_wizard_1" />

        <TextView
            android:id="@+id/title"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:fontFamily="@font/iran_sans_bold"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@color/mdtp_white" />

        <TextView
            style="@style/TextAppearance.AppCompat.Caption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/iran_sans_light"
            android:gravity="center"

            android:textColor="@color/mdtp_white" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

MainActivity xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:slidingLayer="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:background="@color/grey_5"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="5dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:contentInsetStartWithNavigation="0dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/Toolbar.Light">

            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/activityTitle"
                    style="@style/Base.TextAppearance.AppCompat.Caption"
                    android:layout_width="90dp"
                    android:layout_height="30dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="8dp"
                    android:fontFamily="@font/iran_sans_bold"
                    android:gravity="center|right"
                    android:text="@string/app_name"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/application_logo"
                    app:layout_constraintTop_toTopOf="parent" />

                <ImageView
                    android:id="@+id/application_logo"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:scaleType="centerCrop"
                    android:layout_marginBottom="8dp"
                    android:src="@drawable/ic_app_logo"
                    android:transitionName="app_logo"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/drawerMenu"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    tools:ignore="VectorDrawableCompat" />

            </android.support.constraint.ConstraintLayout>
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

try to explore this link:- https://developer.android.com/training/transitions/start-activity — DeePanShu, Feb 05 '19 at 08:31
@DolDurma are you using ImageView in app bar layout In MainActivity is that requirement? — Tanveer Munir, Feb 05 '19 at 10:37
@TanveerMunir I'm trying to move imageview from `ActivitySplashScreen` to toolbar on `ActivityMain` — DolDurma, Feb 05 '19 at 14:48
I think you are not setting the toolbar and not getting ImageView from the toolbar in mainActivity. @DolDurma — Tanveer Munir, Feb 06 '19 at 06:29
@TanveerMunir did you have any simple sample code to khnow how can i implementing that? — DolDurma, Feb 06 '19 at 14:19
I have sample code but not according to your scenario I will post it tomorrow — Tanveer Munir, Feb 06 '19 at 14:21

score 0 · Accepted Answer · answered Feb 07 '19 at 11:22

I can use in this way here is my solution according to your scenario.

Style:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Splash.XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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">

    <LinearLayout
        android:id="@+id/alachiq_header_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher_background"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingTop="40dp">

        <ImageView
            android:id="@+id/app_logo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:tint="@android:color/black"
            app:srcCompat="@android:drawable/ic_dialog_email" />

        <TextView
            android:id="@+id/title"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:fontFamily="sans-serif"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@android:color/background_dark" />

        <TextView
            style="@style/TextAppearance.AppCompat.Caption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:fontFamily="sans-serif"
            android:textColor="@android:color/background_dark" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

Splash.Java

public class SplashActivity extends AppCompatActivity {
    @BindView(R.id.app_logo)
    ImageView app_logo;
    Activity mActivity;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        ButterKnife.bind(this);
        mActivity = this;
        ViewCompat.setTransitionName(app_logo, "app_logo");
        new Handler().postDelayed(new Runnable() {
            @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void run() {
                Intent intent = new Intent(SplashActivity.this, MainActivity.class);
                intent.putExtra("transition_name", ViewCompat.getTransitionName(app_logo));
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity,app_logo,ViewCompat.getTransitionName(app_logo));
                startActivity(intent, options.toBundle());

                finish();
            }
        }, 3000);
    }
}

MainActivity.XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:slidingLayer="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:background="@android:color/darker_gray"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="5dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:contentInsetStartWithNavigation="0dp"
            >

            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/activityTitle"
                    android:layout_width="90dp"
                    android:layout_height="30dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="8dp"
                    android:gravity="center|right"
                    android:text="@string/app_name"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/application_logo"
                    app:layout_constraintTop_toTopOf="parent"
                    android:layout_marginRight="8dp" />

                <ImageView
                    android:id="@+id/application_logo"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:scaleType="centerCrop"
                    android:layout_marginBottom="8dp"
                    android:tint="@android:color/black"
                    app:srcCompat="@android:drawable/ic_dialog_email"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    android:layout_marginRight="8dp" />

            </android.support.constraint.ConstraintLayout>
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

MainActivity.Java

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    Activity mActivity;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mActivity = this;
        setSupportActionBar(mToolbar);
        ActivityCompat.postponeEnterTransition(this);
        ImageView application_logo = (ImageView) mToolbar.findViewById(R.id.application_logo);
        if (getIntent() != null) {
            Bundle extras = getIntent().getExtras();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                String imageTransitionName = extras.getString("transition_name");
                application_logo.setTransitionName(imageTransitionName);
                ActivityCompat.startPostponedEnterTransition(mActivity);
            }
        }

    }

}

Here is the Sample code for SharedElementTransition according to your scenario. Whenever you use some kind of style always write in style file then use it.

Note: import android.support.v7.widget.Toolbar; for ToolBar in Java file. This is working fine.

How to start shared element transition between 2 activity?

1 Answers1