Android Horizo​​ntalScrollView内容拉伸

Question

I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.

I want these 4 buttons to be stretched over the whole width! here is my code

    <HorizontalScrollView
    android:id="@+id/items_HorizontalBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/vf"
    android:background="#80000000"
    android:fillViewport="true" >

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

        <Button
            android:layout_width="90dp"
            android:layout_height="fill_parent"
            android:layout_margin="5dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/rss"
            android:text="Light"
            android:textColor="@color/green_color"
            android:textSize="20sp" />

        <Button
            android:layout_width="90dp"
            android:layout_height="fill_parent"
            android:layout_margin="5dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/rss"
            android:text="Door"
            android:textColor="@color/green_color"
            android:textSize="20sp" />

        <Button
            android:layout_width="90dp"
            android:layout_height="fill_parent"
            android:layout_margin="5dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/rss"
            android:text="Alarms"
            android:textColor="@color/green_color"
            android:textSize="20sp" />

        <Button
            android:layout_width="90dp"
            android:layout_height="fill_parent"
            android:layout_margin="5dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/rss"
            android:text="Window"
            android:textColor="@color/green_color"
            android:textSize="20sp" />
    </LinearLayout>
</HorizontalScrollView>

Answer 1

Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort .

XML:

android:fillViewport="true"

Programmatically:

hsv.setFillViewport(true);

Answer 2

try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid. try something similar to this:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >



            <Button
                android:id="@+id/button1"
                android:layout_width="180dp"
                android:layout_height="wrap_content"
                android:text="Button" />



            <Button
                android:id="@+id/button2"
                android:layout_width="180dp"
                android:layout_height="wrap_content"
                android:text="Button" />



            <Button
                android:id="@+id/button3"
                android:layout_width="230dp"
                android:layout_height="wrap_content"
                android:text="Button" />



            <Button
                android:id="@+id/button4"
                android:layout_width="233dp"
                android:layout_height="wrap_content"
                android:text="Button" />

        </LinearLayout>

    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>
</TableLayout>

Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.

Answer 3

For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.

For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp" , then add android:layout_weight="0.25" .

This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.

However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...