"Expand more" with animation

Question

I am trying to do the same animation as Google : https://vid.me/9Wli

A quick explanation about my app :

At the top I have an AppBar, below it a LinearLayout including a button to expand more information and below this LinearLayout I have a RecyclerView.

For the moment, when I click the "expand more" button, I just show some items with .setVisibility(View.VISIBLE), so I have no animation.

Here is my actual XML code :

<LinearLayout
    android:id="@+id/expandable_zone"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:visibility="gone">

    <LinearLayout
        android:id="@+id/1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_width="wrap_content"
            android:text="@string/expandable_1"
            android:textColor="@color/secondaryTextDark"
            android:textSize="13dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_expandable_zone"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical">

        <TextView
            android:animateLayoutChanges="true"
            android:id="@+id/expand_more"
            android:layout_gravity="center_horizontal"
            android:layout_height="wrap_content"
            android:layout_marginBottom="11sp"
            android:layout_marginTop="11sp"
            android:layout_width="wrap_content"
            android:text="@string/expand_more"
            android:textColor="@color/secondaryTextDark" />

        <ImageButton
            android:background="@drawable/circle_shape"
            android:id="@+id/expand_less"
            android:layout_gravity="center_horizontal"
            android:layout_height="wrap_content"
            android:layout_marginBottom="11sp"
            android:layout_marginTop="10sp"
            android:layout_width="wrap_content"
            android:src="@drawable/ic_check_grey600_24dp"
            android:visibility="gone" />
    </LinearLayout>
</LinearLayout>

Can anyone give me the best solution to do that ?

score 1 · Answer 1 · answered Sep 12 '16 at 07:54

1

android:animateLayoutChanges="true"
set it on LinearLayout android:id="@+id/bottom_expandable_zone"

if this wont help u need to serach on stackoverflow how to animate view and implement it on your android:id="@+id/bottom_expandable_zone"

answered Sep 12 '16 at 07:54

Rodriquez

981
1
7
21

"Expand more" with animation

1 Answers1