Home Shared Element cardview transition
Reply: 0

Shared Element cardview transition

user6563
1#
user6563 Published in April 26, 2018, 5:25 pm

I am wanting to make a transition identical to this one, which comes from the material design.

I followed some tutorials that show how to do this but the vast majority work with Activitys as I have to work with fragments. In the end I got a rough result, but it's still not what I want. The result I got was this one.

As you can see, the transition ignores CardView, and only the image comes toward us. Below is my current code.

MainFragment

public class MainFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        final View v = inflater.inflate(R.layout.fragment_market, container, false);

        return v;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        final ImageView propertyImage = view.findViewById(R.id.propertyImageView);
        propertyImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sharedTransition(propertyImage);
            }
        });

    }

    public void sharedTransition(ImageView imageView) {
        SharedMainFragment simpleFragmentB = new SharedMainFragment();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TransitionSet transitionSet = new TransitionSet();
            transitionSet.setOrdering(TransitionSet.ORDERING_TOGETHER);
            transitionSet.addTransition(new ChangeBounds())
                    .addTransition(new ChangeTransform())
                    .addTransition(new ChangeImageTransform());

            simpleFragmentB.setSharedElementEnterTransition(transitionSet);
            simpleFragmentB.setSharedElementReturnTransition(transitionSet);
        }

        getActivity().getSupportFragmentManager()
                .beginTransaction()
                .addSharedElement(imageView, ViewCompat.getTransitionName(imageView))
                .addToBackStack("SHARED")
                .replace(R.id.fragment_container, simpleFragmentB)
                .commit();
    }
}

fragment_main.xml (only the cardview part and its contents)

<android.support.v7.widget.CardView
        android:id="@+id/propertyCardShop"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:cardBackgroundColor="@color/backgroundCardYou"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/transportCardShop"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/propertyImageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:src="@drawable/property_photo"
                android:transitionName="@string/transition_property_string"/>

            <TextView
                android:id="@+id/propertyTextShop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"
                android:text="@string/propriedades"
                android:textColor="@android:color/black"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/propertyDescShop"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:textSize="12sp"
                android:text="@string/compre_casas"
                android:textColor="@color/greyTextColor" />
        </LinearLayout>

    </android.support.v7.widget.CardView>

fragment_shared_main.xml (the fragment that is open)

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/baseLayout"
    tools:context="SharedMainFragment">

    <!-- TODO: Update blank fragment layout -->
    <ImageView
        android:id="@+id/propertyImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/property_photo"
        android:transitionName="@string/transition_property_string"/>

    <TextView
        android:id="@+id/propertyTextShop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/propriedades"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/propertyImageView"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"/>

    <TextView
        android:id="@+id/propertyDescShop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/compre_casas"
        android:textColor="@color/greyTextColor"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/propertyTextShop"
        android:layout_marginLeft="16dp"/>

</android.support.constraint.ConstraintLayout>

Thanks for listening.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.325776 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO