Android LinearLayout in HorizontalScrollView with multiple rows

Question

I am using LinearLayout in HorizontalScrollView the scrolling part is working but i can't figure out how to make 3 rows.

for Example:

Bold shows what is currently displayed (in emulator/on screen)

Current

--Button1--Button2--Button3-- Button4--Button5--Button6--Button7--Button8--Button9--Button10

-Button11--Button12

What I want

--Button1--Button2--Button3-- Button4--Button5--Button6--
--Button7--Button8--Button9-- Button10--Button11--Button12--

I'm trying to do this with one LinearView, because later I will try to dynamically add buttons.

I might be doing this in whole wrong way (and I think I am).

Here is the code:

 <HorizontalScrollView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="50dp" >

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

            <Button
            android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button5" />
             <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button6" />
             <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button7" />
             <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button8" />
              <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button9" />
               <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button10" />
                <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button11" />
                 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button12" />

        </LinearLayout>
    </HorizontalScrollView>

I tried few things but I always return to the beginning.

what You need is a custom layout and add it into Your xml layout. See this link: nishantvnair.wordpress.com/2010/09/28/flowlayout-in-android — Opiatefuchs
you can use Table layout inside HorizontaScrollView, and add Rows to it daynamically. — Ashish Tamrakar

silwar silwar · Accepted Answer · 2014-06-05T11:08:36

Instead of LinearLayout Try GridLayout which is part of Android support library.

It has provision of setting number of columns and rows while implementation in XML layout.

Something like below

 <HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp" >

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="6"
        android:rowCount="3"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button7" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button8" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button9" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button10" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button11" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button12" />
    </GridLayout>
 </HorizontalScrollView>

Edit - You can use TableLayout instead of GridLayout if you want to add child views of different width as below

  <HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button5" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button6" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button7" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button8" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button9" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button10" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button11" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button12" />
        </TableRow>
    </TableLayout>
</HorizontalScrollView>

Android LinearLayout in HorizontalScrollView with multiple rows

1 Answers