Content transitions at the top of shared elements in android
I am trying to use SharedElements and Content Transitions in Android. I tried to combine content transitions and common elements and create specific animations, however I ran into a problem. After switching to Shared Elements (ImageView) end, I use Content Transitions to animate the text view into position using a slide transition. However, when textViews slide from the Bottom to their position at the top of the ImageView, the text goes below the ImageView (Shared Element) and then just appears at the top of the ImageView. Is there a way to do this right?
I am using a shortcode here with some screenshots that explain it:
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>
source to share
I found a solution to a similar problem, here: General Android transition combined with a gradual transition
Long story short, I turned off overlays for shared elements as suggested above. Then I removed the background in the Activity (using a transparent theme). See my answer, maybe this would help you (I am assuming you have already moved).
source to share