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>

Answer 1

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.