Home How to accomplish this animation on CardView with Coordinator Layout and Behavior?
Reply: 0

How to accomplish this animation on CardView with Coordinator Layout and Behavior?

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

I am trying to accomplish the following effect with coordinator layout:

I've spent about 30h+ trying to solve this and I know the way to go is with Coordinator Layout Behavior, but there are a lot of things I am getting wrong.

Here's my xml:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.StatisticsFragment">

<!-- TODO: Update blank fragment layout -->

<android.support.design.widget.CoordinatorLayout
    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"
    android:background="@android:color/background_light">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="137dp"
        android:background="@android:color/transparent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <android.support.v7.widget.CardView
                android:id="@+id/earningsCardView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/todayLabel"
                        android:layout_width="108dp"
                        android:layout_height="26dp"
                        android:layout_marginEnd="8dp"
                        android:layout_marginStart="8dp"
                        android:layout_marginTop="12dp"
                        android:gravity="center"
                        android:text="TODAY"
                        android:textAlignment="center"
                        android:textColor="@android:color/darker_gray"
                        android:textSize="18sp"
                       app:layout_constraintEnd_toStartOf="@+id/guideline"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />


                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/weekLabel"
                        android:layout_width="108dp"
                        android:layout_height="26dp"
                        android:layout_marginEnd="8dp"
                        android:layout_marginStart="8dp"
                        android:layout_marginTop="12dp"
                        android:gravity="center"
                        android:text="WEEK"
                        android:textAlignment="center"
                        android:textColor="@android:color/darker_gray"
                        android:textSize="18sp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="@+id/guideline"
                        app:layout_constraintTop_toTopOf="parent" />


                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/weekEarningsLabel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:gravity="center"
                        android:text="$800"
                        android:textAlignment="center"
                        android:textColor="@color/colorAccent"
                        android:textSize="32sp"
                        app:layout_constraintEnd_toEndOf="@+id/todayLabel"
                        app:layout_constraintStart_toStartOf="@+id/todayLabel"
                        app:layout_constraintTop_toBottomOf="@+id/todayLabel" />


                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/todayEarningsLabel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:layout_marginTop="8dp"
                        android:gravity="center"
                        android:text="$5200"
                        android:textAlignment="center"
                        android:textColor="@color/green_light"
                        android:textSize="32sp"
                        app:layout_constraintEnd_toEndOf="@+id/weekLabel"
                        app:layout_constraintStart_toStartOf="@+id/weekLabel"
                        app:layout_constraintTop_toBottomOf="@+id/weekLabel" />

                    <android.support.constraint.Guideline
                        android:id="@+id/guideline"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintGuide_percent="0.5012658"
                        app:layout_constraintHorizontal_bias="0.5"
                        app:layout_constraintStart_toStartOf="parent"/>

                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/todayOrderAmount"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:layout_marginBottom="16dp"
                        android:text="18 deliveries"
                        android:textSize="12sp"
                        app:layout_constraintEnd_toEndOf="@+id/weekEarningsLabel"
                        app:layout_constraintStart_toStartOf="@+id/weekEarningsLabel"
                        app:layout_constraintTop_toBottomOf="@+id/weekEarningsLabel" />

                    <TextView
                        android:id="@+id/weekOrderAmount"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:layout_marginStart="8dp"
                        android:layout_marginTop="8dp"
                        android:layout_marginBottom="8dp"
                        android:text="87 deliveries"
                        android:textSize="12sp"
                        app:layout_constraintEnd_toEndOf="@+id/todayEarningsLabel"
                        app:layout_constraintHorizontal_bias="0.51"
                        app:layout_constraintStart_toStartOf="@+id/todayEarningsLabel"
                        app:layout_constraintTop_toBottomOf="@+id/todayEarningsLabel" />

                </android.support.constraint.ConstraintLayout>

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

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/historicRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/earningsCardView" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I created a behavior subclass to try to animate the today earnings label (in green):

class TodayEarningsLabelBehavior : CoordinatorLayout.Behavior<TextView>() {
     override fun layoutDependsOn(parent: CoordinatorLayout?, child: TextView?, dependency: View?): Boolean {
        return dependency is CardView
     }

     override fun onDependentViewChanged(parent: CoordinatorLayout?, child: TextView?, dependency: View?): Boolean {
        if (child != null){
            child.textSize = dependency!!.height / 3.0F
        }

        return false
     }
}

But how do I set this behavior in xml through app:layout_behavior to the $800 TextView if it's not a child of CoordinatorLayout?

Any method of solving this problem (which might not involve Coordinator Layout) is more than welcome as well.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO