Horizontal RecyclerView with items that have dynamic height

Question

So I need a horizontal RecyclerView. However, the items in them have dynamic heights based on what's returned from the backend.

The RecyclerView and its items have the height of "wrap_content"

The problem is if the first visible items in the RecyclerView are small, then when the user scrolls to the larger items, they appear cut off.

Ideally, we want the RecyclerView to be large enough to hold the largest item in the group (but only the largest existing item... not the hypothetically largest item). The RecyclerView dynamically changing its height is also acceptable.

I wrote an example app to illustrate the problem. In this app, we have a horizontal list. The first 33 items should show 1 line of text, while the next should show 3 lines of text, and the last 34 should show 2 lines. However, they all show 1 line, because the height of the RecyclerView doesn't change.

I've tried calling requestLayout() on the RecyclerView (and on the TextView) from onBindViewHolder(), but it doesn't seem to do anything.

MainActivity:

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;

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

        mAdapter = createAdapter();

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
        mRecyclerView.setAdapter(mAdapter);
    }

    private RecyclerView.Adapter<ViewHolder> createAdapter() {
        RecyclerView.Adapter adapter = new RecyclerView.Adapter<ViewHolder>() {
            @Override
            public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
                return new ViewHolder(v);
            }

            @Override
            public void onBindViewHolder(ViewHolder holder, int position) {
                if (position < 33) {
                    holder.mText.setText("1 line");
                } else if (position > 66) {
                    holder.mText.setText("2 lines\n2 lines");
                } else {
                    holder.mText.setText("3 lines\n3 lines\n3 lines");
                }
            }

            @Override
            public int getItemCount() {
                return 100;
            }
        };
        return adapter;
    }

    private static class ViewHolder extends RecyclerView.ViewHolder {
        TextView mText;
        public ViewHolder(View itemView) {
            super(itemView);
            mText = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

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

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#888888">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hi"
        android:textSize="30sp" />

</LinearLayout>

@Gak2 I was wondering if you found a solution for this because I am facing the same issue right now — Miriana Itani, May 11 '17 at 15:12
Gak2 and @MirianaItani: [this](https://stackoverflow.com/a/41608889/285091) worked for me — Alix, Jul 15 '17 at 15:52
@Gak2, Did you solve the problem? Could you share the solution? Thanks. — Stoatman, Dec 04 '19 at 14:54
I think, a problem is in `onCreateViewHolder`. It is called too rarely. `onBindViewHolder` can measure heights of nested views, but doesn't measure an item height. Supposed solution in https://stackoverflow.com/questions/41585286/horizontal-recyclerview-with-variable-item-heights-not-wrapping-properly/41608889 didn't help me. — CoolMind, Jan 30 '20 at 16:19
check the link has some solutions [check it here](https://stackoverflow.com/questions/57890199/how-to-set-recycler-height-to-highest-item-in-recyclerview) — mahmoud Zahran, Sep 04 '22 at 14:47

score 1 · Answer 1 · answered Mar 26 '21 at 05:17

Change your item.xml layout content with the below code. It will solve your issue.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="160dp"
    android:layout_height="match_parent"
    android:background="#888888">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hi"
        android:textSize="30sp" />

</LinearLayout>

score 0 · Answer 2 · edited Nov 15 '19 at 05:59

Change your recyclerView height & width from wrap_content to match_parent or you can also give fixed height to your recyclerView like android:layout_height="150dp"

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#888888" />

</RelativeLayout>

or You can try

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#888888" />

</RelativeLayout>

score 0 · Answer 3 · answered Apr 24 '21 at 09:03

You can solve this issue using the FlexboxLayoutManager Google library by defining the FlexDirection to FlexDirection.ROW and FlexWrap to FlexWrap.NOWRAP and also in your BaseViewHolder constructor set for each item the FlexShrink to 0.0f to be able to scroll horizontally. More details of how to achieve this can be found here: Horizontal RecyclerView with dynamic item’s Height

score 0 · Answer 4 · answered Oct 25 '22 at 10:04

MainActivity:

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;

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

        mAdapter = createAdapter();

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
        mRecyclerView.setAdapter(mAdapter);
    }

    private RecyclerView.Adapter<ViewHolder> createAdapter() {
        RecyclerView.Adapter adapter = new RecyclerView.Adapter<ViewHolder>() {
            @Override
            public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
                return new ViewHolder(v);
            }

            @Override
            public void onBindViewHolder(ViewHolder holder, int position) {
                if (position < 33) {
                    holder.mText.setText("1 line");
                } else if (position > 66) {
                    holder.mText.setText("2 lines\n2 lines");
                } else {
                    holder.mText.setText("3 lines\n3 lines\n3 lines");
                }
            }

            @Override
            public int getItemCount() {
                return 100;
            }
        };
        return adapter;
    }

    private static class ViewHolder extends RecyclerView.ViewHolder {
        TextView mText;
        public ViewHolder(View itemView) {
            super(itemView);
            mText = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

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

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#888888">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hi"
        android:textSize="30sp" />

</LinearLayout>

score 0 · Answer 5 · answered Dec 15 '22 at 14:24

To make RecyclerView Horizontal you need to use android:layout_centerHorizontal="true". Also, everything more are the same as vertical.

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/toolbar"/>

score -1 · Answer 6 · edited Jan 08 '21 at 07:11

-1

Try to add your textView android:singleLine="false" it changes when there are multiple lines

edited Jan 08 '21 at 07:11

phoenixstudio

1,776
1
14
19

answered Jan 07 '21 at 20:58

GolnazTorabi

50
1
3

score -7 · Answer 7 · answered Sep 18 '17 at 12:17

-7

Just call itemAdapter.notifyDataSetChanged();

answered Sep 18 '17 at 12:17

erik suprayogi

1

Could you please format your code by highlighting it and hitting Ctrl+K – WhatsThePoint Sep 18 '17 at 12:38

Horizontal RecyclerView with items that have dynamic height

7 Answers7