Tabs, ListView with horizontal and vertical scrolling?

Question

I need to create a screen (activity/fragment) with items (tile) in a list that can scroll horizontally and vertically + tabs. Something like main page on Google Play. See screenshot:

What is the best solution for this? Maybe advice some good library/component. Thanks.

Answer 1

It's simple really. All you need to do is set "nestedScrollingEnabled" flag to true in the parent. A very high level example on how you can do it in xml with scrollview as your root layout:

--ScrollView
------RelativeLayout // as scrollview can have only one child
---------RecyclerView1 --> Set LayoutManager to HORIZONTAL
---------RecyclerView2 --> Set LayoutManager to HORIZONTAL
-------EndRelativeLayout
--EndScrollView

This works for me (you can ignore the @id/headers part):

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/next"
        android:nestedScrollingEnabled="true"
        tools:ignore="MissingPrefix">

        <TextView
            android:id="@+id/header1"
            fontPath="fonts/CircularStd-Bold.otf"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="24dp"
            android:text=""
            android:textSize="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/header2"
            fontPath="fonts/CircularStd-Bold.otf"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="24dp"
            android:text=""
            android:textSize="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/recycler_view_2" />

        <TextView
            android:id="@+id/textView26"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"

            android:layout_marginTop="16dp"
            android:paddingBottom="100dp"
            android:text=""
            android:visibility="gone"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/recycler_view_1" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="24dp"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scrollbars="none"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/header2" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="24dp"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scrollbars="none"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/header1" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

Answer 2

Here's the better way

1. Create a ScrollView
2. Use a LinearLayout
3. Make a CardView
4. Put a RecyclerView with horizontal scrolling and make cards for each row..
5. Repeat steps 3 and 4.

Enjoy.

Answer 3

You can do this in steps

1. Create the top tabs.
2. In the home tab create a ListView with custom view.
3. Create an custom Adapter for this list and populate each row of the listview with another list which traverses horizontally.

So you will have two Lists, the first which traverses vertically and the second which will be populated into the row of the first list and which traverses horizontally.

Try working this out and then update this question as you run into bugs.

Hope this helps :)