Show more info by clicking on list item

Question

I'm not really sure how this is called so I made a picture.

I want to display a list of users and when someone clicks on one of them some details should be shown underneath. With a second click it should hide again. Ideally with some sliding animation. It should not cover the rest of the list so everything else has to move down too.

I hope you understand what I mean.

Can someone tell me what I should google for or has an example?

Answer 1

This library is help you for figure out your query.

FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion https://github.com/Ramotion/folding-cell-android

Answer 2

You can just use different view types in your adapter if you're using RecyclerView: https://stackoverflow.com/a/26245463/10183396

This will give you sliding animation

Answer 3

I think you can use ExpandableListView for your purpose. http://theopentutorials.com/tutorials/android/listview/android-expandable-list-view-example/ In common it uses for more complex goals but think it will be ok.

Answer 4

This can be achieved by setting visibility of the detailed layout to GONE and when the entry gets clicked it toggles to VISIBILE and so on

for animation, in your viewholder layout XML file

<LinearLayout android:id="@+id/container"
    android:animateLayoutChanges="true"
    ...
/>

Answer 5

Using FlipView

dependencies {
    // other dependancies 
    implementation 'eu.davidea:flipview:1.1.3'

}

activity_main.xml

  <eu.davidea.flipview.FlipView
        android:id="@+id/flip_layout"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:animateDesignLayoutOnly="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <!--You use ListView-->
        <!--<ListView-->
        <!--android:id="@+id/list_view"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"/>-->

        <fragment
            android:id="@+id/fragment_item_detail"
            android:name="com.lelasoft.recyclerviewwithitemdetail.ItemDetailsFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </eu.davidea.flipview.FlipView>

Flip Logic

@Override
public void onFlipAction(String item) {
    if (flipView.isFlipped())
        flipView.flip(false);
    else {
        flipView.flip(true);
        itemDetailsFragment.updateItemDetails(item);
    }
}

@Override
public void onBackPressed() {
    if (flipView.isFlipped())
        flipView.flip(false);
    else
        super.onBackPressed();
}

Check complete example on Github