Mateusz Kaflowski
Mateusz Kaflowski

Reputation: 2367

Wrapping all elements in RecycleView

I have two recyclerViews (one under second). How to make them not to scale and resize to all elements height, so their scrolling won't be necessary and all items will be visible by scrolling main ScrollView? Now it looks that:

enter image description here

My xml:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_below="@+id/appBarLayout"
            >

            <LinearLayout
                android:id="@+id/content_detail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:layout_marginTop="15dp"
                android:orientation="vertical"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin">

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

                    <LinearLayout
                        android:layout_width="0px"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/ivPoster"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1"
                            app:srcCompat="@mipmap/ic_launcher" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0px"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/tvTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="Title"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/tvDate"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="01.01.2001" />

                        <TextView
                            android:id="@+id/tvRate"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="5.10/10" />

                        <Button
                            android:id="@+id/btFav"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mark as favourite"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>


                <TextView
                    android:id="@+id/tvOverview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Lorem Ipsum" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:textColor="#000df0"
                    android:text="Trailers:" />


                <android.support.v7.widget.RecyclerView
                    android:id="@+id/trailerRecyclerView"

                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:textColor="#000df0"
                    android:text="Reviews:" />
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/reviewRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />


            </LinearLayout>
        </ScrollView>

    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Upvotes: 1

Views: 52

Answers (1)

Bartek Lipinski
Bartek Lipinski

Reputation: 31438

The easiest solution to your problem is to use NestedScrollView instead of ScrollView as the root scrolling element.

but...

if you really think about all this, it's not really a solution in terms of the performance of your code. Because it will look as desired but it will not be really efficient.

If your RecyclerView wraps its contents (the way you want it to) it inflates all items at once, and not really uses its recycling capabilities. It does not reuse any items it just keeps everything in memory. Essentially it becomes a component that creates a ton of Views using an Adapter based on some data, instead of a RecyclerView.

The way you should implement a thing like that is to create an Adapter that inflates multiple types of Views (4 types to be exact in your case), and use a single RecyclerView instead of your whole ScrollView. There are multiple threads here on SO that describe how to create such Adapters. For example here.

To help you a bit more, here's how you should plan your view types:

Upvotes: 2

Related Questions