Content Transitions on Top of Shared Elements in a

Question

I am trying my hands with SharedElements and Content Transitions in Android. I was trying to combine Content Transitions and Shared Elements and create a particular animation, however I have encountered a problem. After the transition on Shared Elements (ImageView) end, I am using content Transitions to animate Text View into position using Slide Transition. However when the textViews are sliding from Bottom to their position on the top of image View, the text goes beneath the ImageView (Shared Element) and later just appears on the top of the ImageView. Is there a way to do this right?

I am sharing a short code here with some screenshots which explain this:

Activity_A.java

package com.example.mehulp.sharedelementsviewheirarchy;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;


public class Activity_a extends Activity {
ImageView imageView_a;

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

    imageView_a = (ImageView) findViewById(R.id.imgView_a);
    imageView_a.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            imageClickListener();
        }
    });
}

private void imageClickListener() {
    Intent intent = new Intent(Activity_a.this, Activity_b.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, imageView_a, imageView_a.getTransitionName()).toBundle());
}
}

activity_a.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <ImageView
        android:id="@+id/imgView_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:transitionName="fImage"
        android:padding="30dp"
        android:src="@drawable/female_result"/>
    <LinearLayout
        android:id="@+id/ll_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignBottom="@id/imgView_a">
        <TextView
            android:id="@+id/myName_a"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="MyName: Lorem Ipsum Ipsum"
            android:padding="10dp"/>
        <TextView
            android:id="@+id/myAge_a"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="My Age: abc years, xyz months, pqr days"
            android:padding="10dp"/>
    </LinearLayout>
</RelativeLayout>

Activity_B.java

package com.example.mehulp.sharedelementsviewheirarchy;

import java.util.List;

public class Activity_b extends Activity {

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

    setEnterSharedElementCallback(new SharedElementCallback() {
        @Override
        public void onSharedElementStart(List<String> sharedElementNames, List<View> sharedElements, List<View> sharedElementSnapshots) {

            TransitionSet transitionSet = new TransitionSet();
            transitionSet.setDuration(3000);

            Slide slideFromBottom = new Slide(Gravity.BOTTOM);
            slideFromBottom.addTarget(R.id.myAge_b);
            slideFromBottom.addTarget(R.id.myName_b);

            transitionSet.addTransition(slideFromBottom);
            getWindow().setEnterTransition(transitionSet);

            super.onSharedElementStart(sharedElementNames, sharedElements, sharedElementSnapshots);
        }

        @Override
        public void onSharedElementEnd(List<String> sharedElementNames, List<View> sharedElements, List<View> sharedElementSnapshots) {
            super.onSharedElementEnd(sharedElementNames, sharedElements, sharedElementSnapshots);
        }
    });
}}

activity_b.xml

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
    android:id="@+id/imgView_b"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:transitionName="fImage"
    android:padding="30dp"
    android:scaleType="fitXY"
    android:src="@drawable/female_result"/>
<LinearLayout
    android:id="@+id/ll_b"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/myName_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="MyName: Lorem Ipsum Ipsum"
        android:padding="10dp"/>
    <TextView
        android:id="@+id/myAge_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="My Age: abc years, xyz months, pqr days"
        android:padding="10dp"/>
</LinearLayout>

Answer 1

I kindof found a solution to a similar problem, here: Android shared view transition combined with fade transition

In short, I disabled overlay for shared elements, as suggested above. Then i removed the background on the Activity (by using a transparent theme). See my answer, maybe it would have helped you (I assume this you have moved on by now).

Answer 2

i have had same problem added

    <item name="android:windowSharedElementsUseOverlay">false</item>

to the animated activity theme