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?

You can use an expandable Linear layout library for this, or simply hide/show views with VISIBLE/GONE if you don't care about the animation. — Vucko, Aug 05 '18 at 16:54
Check my answer using [FlipView](https://github.com/davideas/FlipView) with a complete [example](https://github.com/KhaledLela/RecyclerViewWithItemDetail). — Khaled Lela, Aug 05 '18 at 21:23

Daxesh V · Accepted Answer · 2020-12-24T17:32:35.463

2

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

edited Dec 24 '20 at 17:32

answered Aug 05 '18 at 16:56

Daxesh V

571
6
12

score 1 · Answer 2 · answered Aug 05 '18 at 17:19

1

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

answered Aug 05 '18 at 17:19

otso

11
1

score 1 · Answer 3 · answered Aug 05 '18 at 17:37

1

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.

answered Aug 05 '18 at 17:37

Stanislav Batura

420
4
11

score 1 · Answer 4 · answered Aug 05 '18 at 19:41

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"
    ...
/>

score 1 · Answer 5 · answered Aug 05 '18 at 21:20

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

Show more info by clicking on list item

5 Answers5