Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RecyclerView within ScrollView wrap_content height not working as intended

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.

enter image description here

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.

enter image description here

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

like image 377
Devarshi Avatar asked Jan 15 '17 18:01

Devarshi


1 Answers

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.

like image 101
Reaz Murshed Avatar answered Sep 19 '22 01:09

Reaz Murshed