What's the right approach to creating two-dimensional scroll views in Android?

Question

I need to create a two-dimensional view that supports vertical scrolling and horizontal scrolling across each row, very similar to Google's gallery design or how Netflix does it. I've across some posts talking about best practices and reservations against using nested scroll views and such, but most of these are very old posts.

Given the current versions of Android, what't the right way to implementing such behavior?

References:

ScrollView Inside ScrollView

Gorges Android Two-Dimensional Scroll View

This is the code I'm using so far:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    android:paddingLeft="@dimen/activity_horizontal_margin"
    tools:context="com.example.culami.RecipeDashboardActivity"
    android:orientation="vertical"
    android:background="#2E2E2E"
     >

    <!-- Parent Linear Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center|left"
        android:orientation="vertical">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel1"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Recently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_1_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_2_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_3_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>    

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel2"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_4_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_5_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_6_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>    

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel3"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_7_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_8_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_9_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>  

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel4"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_10_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_11_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_12_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>  

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel5"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_13_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_14_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_15_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>   

    </LinearLayout>  <!-- End Parent Linear Layout -->

</ScrollView>

I need to be able to replace the three dummy images in each row LinearLayout with a horizontal scrollable view that works for multiple images. How can I achieve this?

In case of downvotes, kindly mention the reason why the question was downvoted so I can make the necessary corrections or take this down. Simply downvoting doesn't help anyone! — Darth Coder, Feb 02 '15 at 23:50

hidro · Answer 1 · 2015-02-03T04:24:12.743

1

Checkout TwoWay-View by Lucas Rocha. You have options to scroll in 2 dimensions, or fix it to 1 dimension (horizontal/vertical).

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <org.lucasr.twowayview.TwoWayView
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <!-- some more horizontal TwoWayView here -->
    </LinearLayout>
</ScrollView>

edited Feb 03 '15 at 04:24

answered Feb 03 '15 at 01:52

hidro

12,333
6
53
53

Thanks! Would it possible for you to write some sample code that shows how to use the custom layout? It would really help! – Darth Coder Feb 03 '15 at 03:58
I edit my answer to contain a simplified version of what we are using – hidro Feb 03 '15 at 04:24

What's the right approach to creating two-dimensional scroll views in Android?

1 Answers1