RecyclerView within ScrollView wrap_content height not working as intended

Question

I have a RecyclerView embedded within a ScrollView. Here is the complete layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <fragment
                android:name="devarshi.sample.view.ProductPortfolioFragment"
                android:id="@+id/fragmentProductPortfolio"
                android:layout_width="match_parent"
                android:layout_margin="10dp"
                android:layout_height="230dp" />

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="TextView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/textViewProductName" />

                <TextView
                    android:text="TextView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/textViewProductDescription" />

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

                    <TextView
                        android:text="@string/product_detail_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/textViewProductDetails" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:id="@+id/linearyLayoutOtherProductDetails"
                android:layout_height="100dp">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="0.6"
                    android:layout_height="wrap_content">

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

                        <TextView
                            android:id="@+id/textViewProductPrice"
                            android:layout_width="wrap_content"
                            android:textSize="15sp"
                            android:textStyle="bold"
                            android:textColor="@color/colorDiscountedPrice"
                            android:layout_height="wrap_content"
                            android:text="1500"/>

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewOldProductPrice"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="200"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:orientation="horizontal"
                        android:layout_height="wrap_content">

                        <TextView
                            android:id="@+id/textViewQuantity"
                            android:layout_width="wrap_content"
                            android:textSize="15sp"
                            android:textStyle="bold"
                            android:textColor="@color/colorDiscountedPrice"
                            android:layout_height="wrap_content"
                            android:text="Quantity"/>

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewQuantityValue"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="200"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:orientation="horizontal"
                        android:layout_height="wrap_content">

                        <TextView
                            android:id="@+id/textViewBrand"
                            android:layout_width="wrap_content"
                            android:textSize="15sp"
                            android:textStyle="bold"
                            android:textColor="@color/colorDiscountedPrice"
                            android:layout_height="wrap_content"
                            android:text="Brand"/>

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewBrandValue"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="200"/>
                    </LinearLayout>
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="0.4"
                    android:layout_height="wrap_content">

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

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:srcCompat="@drawable/product_detail_free_shipping_icon"
                            android:id="@+id/imageViewFreeShipping" />

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewFreeShipping"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="@string/product_detail_free_shipping"/>
                    </LinearLayout>

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

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:srcCompat="@drawable/product_detail_cash_on_delivery_icon"
                            android:id="@+id/imageViewCashOnDelivery" />

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewCashOnDelivery"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="@string/product_detail_cash_on_delivery"/>
                    </LinearLayout>

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

                        <TextView
                            android:layout_marginLeft="5dp"
                            android:id="@+id/textViewUnitLabel"
                            android:layout_width="wrap_content"
                            android:textSize="14sp"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="wrap_content"
                            android:text="@string/product_detail_unit"/>

                        <Button
                            android:text="-"
                            android:layout_width="@dimen/product_detail_counter_button_width"
                            android:layout_height="@dimen/product_detail_counter_button_height"
                            android:id="@+id/buttonDecrement" />

                        <TextView
                            android:id="@+id/textViewUnitValue"
                            android:layout_width="27dp"
                            android:textSize="14sp"
                            android:gravity="center"
                            android:textColor="@color/colorActualPrice"
                            android:layout_height="@dimen/product_detail_counter_button_height"
                            android:text="0"/>

                        <Button
                            android:text="+"
                            android:layout_width="@dimen/product_detail_counter_button_width"
                            android:layout_height="@dimen/product_detail_counter_button_height"
                            android:id="@+id/buttonIncrement" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerViewProductDetails"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </android.support.v7.widget.RecyclerView>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

Problem is -

Though I have set layout_height of RecyclerView as wrap_content its height is partially wrapping the content i.e. ideally after wrap_content its height should be 150dp but it is currently being 70dp.

Another interesting scenario is -

If I move linearyLayoutOtherProductDetails below recyclerViewProductDetails then it shows RecyclerView height accurately as 150dp. Seems like when the RecyclerView is loaded on the layout it is calculating height based on the number of items (within it) currently being visible on the layout i.e. the height is equal to 5 items in place of 9 items.

Any ideas on how can I have a RecyclerView of height completely wrapping its content in first scenario?

Note: I am using com.android.support:recyclerview-v7:25.0.0

score 13 · Accepted Answer · edited May 23 '17 at 12:02

13

Using RecyclerView inside a ScrollView is not a very good practice. You might consider keeping them all inside a NestedScrollView which might serve your purpose. Here's the documentation from developers android.

In your case, you might consider having the linearyLayoutOtherProductDetails as the header of your RecyclerView and this should be the best solution. Get rid of ScrollView or NestedScrollView and add the custom layouts as the header or footer of your RecyclerView.

Check my answer here about how you can add a header/footer in your RecyclerView.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 15 '17 at 19:10

Reaz Murshed

23,691
13
78
98

1

you saved my day 2 times =) Thank you. – Cüneyt Apr 27 '20 at 20:22
Great to know that! Happy coding! – Reaz Murshed Apr 27 '20 at 20:33
I just replaced my ScrollView (at the root of the layout file) with NestedScroll view and it worked. Thanks a lot! – Caio Mar Dec 13 '22 at 18:18

score 5 · Answer 2 · answered Dec 05 '18 at 08:29

I faced the same problem, and finally I found there maybe a bug in the measure logic of RecyclerView and LinearLayoutManager when using heightMeasureSpec of UNSPECIFIED mode and not zero size.

I have reported this bug to google issuetracker, you can see the details.

NestedScrollView may also lead to the same problem when it's child has not zero vertical margin, because it may pass heightMeasureSpec of UNSPECIFIED mode and not zero size to it's child, then the child may pass similar heightMeasureSpec to RecyclerView. Related code of NestedScrollView:

@Override
protected void measureChildWithMargins(View child, int parentWidthMeasureSpec, int widthUsed,
        int parentHeightMeasureSpec, int heightUsed) {
    final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            getPaddingLeft() + getPaddingRight() + lp.leftMargin + lp.rightMargin
                    + widthUsed, lp.width);
    final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
            lp.topMargin + lp.bottomMargin, MeasureSpec.UNSPECIFIED);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

To fix this bug, you can simplly use the inherited RecyclerView below:

public class FixRecyclerView extends RecyclerView {

    public FixRecyclerView(@NonNull Context context) {
        super(context);
    }

    public FixRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public FixRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthSpec, int heightSpec) {
        if (MeasureSpec.getMode(heightSpec) == MeasureSpec.UNSPECIFIED && MeasureSpec.getSize(heightSpec) != 0) {
            super.onMeasure(widthSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
        } else {
            super.onMeasure(widthSpec, heightSpec);
        }
    }
}

score 1 · Answer 3 · answered Jan 15 '17 at 18:23

Make linearlayoutOtherProductdetails header (first item) of recyclerview and remove scrollview. Because scrolling view inside another scrolling view does not work properly. Another solution is use custom layout manager which set the height of recycler view equals to the height of its content. But this may result in poor scrolling .

RecyclerView within ScrollView wrap_content height not working as intended

3 Answers3