how to animate listview expand and collapse

Question

Having a text displayed initially at screen bottom. When clicking on it, the list view below it should sliding up. Clicking on the text again the list view sliding down.

Made it work with the snippet below except the first time clicking on the text the list does not do the animation sliding up. After that it will animate sliding up/down as expected.

It is because in the first clicking and call of showListView(true); since the list view’s visibility was “gone”, so it has not had height. The “y” == 0 translate does not do anything. It is just the list view’s visibility change to “visible”, which push the titleRow change its position.

But if to begin with the list view’s visibility to “visible”, the initial showListView(false); in setupListViewAdapter() does not push the list view down to initial state (outside of screen bottom) since it does not have the height until the list row are filled in from the adapter by mListView.setAdapter(mListAdapter).

Is there better way to do sidling up/down the list view?

        <TextView
                android:id="@+id/titleRow”
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=“title row”
        />

        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility=“gone”
            >
        </ListView>


initial state list view collapsed(outside screen bottom)
+++++++++++++++++++++++++++
+  mTitleRow          + ^ +
+++++ screen bottom   +++++


listview expanded
+++++++++++++++++++++++++++
+  mTitleRow          + ^ +
+++++++++++++++++++++++++++
+                         +
+  mListView              +
+                         +
+++++ screen bottom   +++++


void setupListViewAdapter(){
        mTitleRow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mTitleRow.getTag() == STATE_COLLAPSED)                    
                { 
                   mListView.setVisibility(View.VISIBLE);                       
                   showListView(true);
                } else {
                   showListView(false);
                }
            }
        });

    mListView.setAdapter(mListAdapter);
    showListView(false); 
}

private static final int STATE_EXPANDED = 1;
private static final int STATE_COLLAPSED = 2;
boolean mListInAnimation = false;
public void showListView(final boolean show) {
    if (mListView != null && !mListInAnimation) {
        mListInAnimation = true;
        mTitleRow.setTag(show ? STATE_EXPANDED : STATE_COLLAPSED);            
        int translateY = show ? 0 : (listHeight);

        mTitleRow.animate().translationY(translateY).setDuration(300).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mListInAnimation = false;
            }
        });
    }
}

Why are you using ternary statements? – MeetTitan May 08 '15 at 02:22 — MeetTitan, May 08 '15 at 02:22

score 6 · Answer 1 · answered May 08 '15 at 03:02

You can do this very easily using API 16's LayoutTransition.CHANGING.

Set animateLayoutChanges to true on the parent ViewGroup:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true">
    <TextView
        android:id="@+id/titleRow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="title row"/>
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
</LinearLayout>

Enable LayoutTransition.CHANGING; on click of the title, set the height of the list view:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.parent);
    linearLayout.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    final View listView = findViewById(R.id.list_view);
    View titleRow = findViewById(R.id.titleRow);

    titleRow.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ViewGroup.LayoutParams params = listView.getLayoutParams();
            params.height = params.height == 0 ? ViewGroup.LayoutParams.WRAP_CONTENT : 0;
            listView.setLayoutParams(params);
        }
    });
}

thanks Karaoko! it works, but still need solution for api level lower though. — lannyf, May 08 '15 at 12:08
Something like: http://stackoverflow.com/questions/4946295/android-expand-collapse-animation — tachyonflux, May 08 '15 at 15:28

how to animate listview expand and collapse

1 Answers1