andkulikov / Transitions-Everywhere

Set of extra Transitions on top of Jetpack Transitions Library
Apache License 2.0
4.83k stars 486 forks source link

Path animating FramLayout inside CoordinationLayout #60

Closed ahmed3elshaer closed 7 years ago

ahmed3elshaer commented 7 years ago

i have a CoordinationLayout having FramLayout(Constains a Fab and other view) inside of it with anchor_gravity="top|right|end" and i want to apply ArchMotion on it that changes it's anchor gravity to center and i did like the PathMotion sample exactly here is a screenshot of the layout:- device-2017-03-15-205256

and here is the layout code:

` <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/map"
        android:layout_weight="0.8"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.lavishagency.matab.activities.RouteFilterActivity"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:id="@+id/llDetails"
        android:padding="16dp"
        android:background="@android:color/white"
        android:layout_height="match_parent">
        <com.facebook.shimmer.ShimmerFrameLayout
            android:id="@+id/shimmer_view_container"
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <com.lavishagency.matab.views.MatabTextView
                    android:layout_width="wrap_content"
                    android:text="9 hr 55 min (14 km)"
                    android:textSize="20sp"
                    android:textColor="@color/white_grey"
                    android:background="@color/white_grey"
                    android:id="@+id/tvTimeAndDist"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Body1"
                    />
                <com.lavishagency.matab.views.MatabTextView
                    android:layout_width="wrap_content"
                    android:text="17 Bumps"
                    android:id="@+id/tvBumps"
                    android:layout_marginTop="8dp"
                    android:textColor="@color/white_grey"
                    android:background="@color/white_grey"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                    />
            </LinearLayout>

        </com.facebook.shimmer.ShimmerFrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:id="@+id/LLGoFabs"
            android:visibility="gone"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/llFabAdd"
                android:clickable="true"
                android:layout_weight="1">
                <android.support.design.widget.FloatingActionButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_add"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginStart="8dp"
                    app:fabSize="mini"
                    android:layout_gravity="center"
                    app:backgroundTint="#2ECC71"
                     />
                <com.lavishagency.matab.views.MatabTextView
                    android:layout_width="wrap_content"
                    android:text="Add Bump"
                    android:layout_gravity="center"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:clickable="true"
                android:id="@+id/LLFabRemove"
                android:layout_weight="1">
                <android.support.design.widget.FloatingActionButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_report"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginStart="8dp"
                    app:fabSize="mini"
                    android:layout_gravity="center"
                    app:backgroundTint="#E74C3C"
                    />
                <com.lavishagency.matab.views.MatabTextView
                    android:layout_width="wrap_content"
                    android:text="Report Bump"
                    android:layout_gravity="center"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/LLFabHelp"
                android:clickable="true"
                android:layout_weight="1">
                <android.support.design.widget.FloatingActionButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_help"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginStart="8dp"
                    app:fabSize="mini"
                    android:layout_gravity="center"
                    app:backgroundTint="#3498DB"
                    />
                <com.lavishagency.matab.views.MatabTextView
                    android:layout_width="wrap_content"
                    android:text="Send Help"
                    android:layout_gravity="center"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    />
            </LinearLayout>
        </LinearLayout>
        </LinearLayout>
    </LinearLayout>

<FrameLayout
    android:layout_width="wrap_content"
    app:layout_anchor="@id/llDetails"
    android:layout_margin="8dp"
    android:id="@+id/flAnimation"
    app:layout_anchorGravity="top|right|end"
    android:layout_height="wrap_content">
    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="84dp"
        android:layout_height="84dp"
        android:layout_gravity="center"
        app:lottie_loop="true"
        app:lottie_fileName="Pulse.json"
        android:id="@+id/fabNav"
        />
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_navigatre"
        android:id="@+id/fabNav2"
        android:layout_gravity="center"
        app:backgroundTint="#FFF"
        android:tint="@color/colorAccent"
        app:fabSize="normal"
        />

</FrameLayout>

</android.support.design.widget.CoordinatorLayout> `

I want to animate the framlayout with id flAnimation and the view it contains (FloatingActionButton and LottieAnimationView)

i attach click listener to FAB and LottieAnimationView and here is the code inside

TransitionManager.beginDelayedTransition(coordinatorLayout, new ChangeBounds().setPathMotion(new ArcMotion()).setDuration(1000)); CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) flAnimation.getLayoutParams(); lp.anchorGravity = Gravity.CENTER; flAnimation.setLayoutParams(lp);

what happened is that the FramLayout(llDetails) and it's view moving to the center without any animation happens

andkulikov commented 7 years ago

Unfortunately CoordinatorLayout is not a usual layout. It is too smart and don't care about the way how transitions works. Every ordinal layout are changing positions of children only on layout stage. And after that they are just drawing. So ChangeBound is moving views inside a parent without layout calls. But CoordinatorLayout is trying to calculate positions and fix wrong offsets before every draw. That's it. Transitions from framework will also not work in that case, not only my backport. By the way, you are not using any scroll behaviours, as I can see. why do you need CoordinatorLayout at all? Why not to replace with RelativeLayout(or maybe even ConstraintLayout)?

ahmed3elshaer commented 7 years ago

Thanks alot for your answer it is really helpful, im using coordination layout to use anchor _gravity to help me put the FAB in its position in the screenshot and to move it to the place that i want i will try to use another layout