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?

enter image description hereenter image description hereenter image description hereenter image description here

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>

      

+3


source to share


2 answers


I had a problem with the same problem.

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

      



for animated activity theme

+4


source


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).

0


source







All Articles