FrameLayout中的Android按钮布局

Question

I have a FrameLayout that fills the screen and a SurfaceView within that, that also fills the screen. I then have 3 buttons of different widths. I want to arrange these buttons vertically on the right edge of the screen, evenly spaced so the top button is at the top of the screen, middle is in the middle and the bottom one is at the bottom - also, I want the buttons vertically centre aligned with each other.

Pseudo layout:

<FrameLayout layout_width="match_parent" layout_height="match_parent">

    <SurfaceView layout_width="match_parent" layout_height="match_parent"></SurfaceView>

    <ToggleButton android:layout_width="45dp"></ToggleButton>
    <ToggleButton android:layout_width="67dp"></ToggleButton>
    <ToggleButton android:layout_width="100dp"></ToggleButton>

</FrameLayout>

Any help is much appreciated and here's a ASCII picture of what I'm trying to achieve, hope it helps!

-------------------------------------------
|                                 (  )    |
|                                         |
|                                         |
|                                         |
|                               (      )  |
|                                         |
|                                         |
|                                         |
|                             (          )|
-------------------------------------------

Answer 1

Try this

    <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

        <SurfaceView
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </SurfaceView>

        <RelativeLayout
            android:gravity="center_horizontal"
            android:layout_gravity="right"
            android:background="#f00"
            android:layout_width="100dp"
            android:layout_height="wrap_content" >

            <ToggleButton
                android:layout_width="45dp"
                  android:layout_centerHorizontal="true"
               android:layout_height="wrap_content" >
            </ToggleButton>

            <ToggleButton
                android:layout_width="67dp"
                android:layout_height="wrap_content"
               android:layout_centerHorizontal="true"
                android:layout_centerVertical="true" >
            </ToggleButton>

            <ToggleButton
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true" >
            </ToggleButton>
        </RelativeLayout>
    </FrameLayout>

</RelativeLayout>

Attached snapshot is the output

Answer 2

try this

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

    <SurfaceView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </SurfaceView>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" >

        <ToggleButton
            android:id="@+id/toggleFirst"
            android:layout_width="45dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true" >
        </ToggleButton>

        <ToggleButton
            android:id="@+id/toggleSecond"
            android:layout_width="67dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/toggleFirst" >
        </ToggleButton>

        <ToggleButton
            android:id="@+id/toggleThird"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/toggleSecond" >
        </ToggleButton>
    </RelativeLayout>
</FrameLayout>

Answer 3

You can make a layout and then when you call it in java code just arrange the buttons according to the width of the screen and the width of the buttons. put the first button on the top, second button at (screenheight/2-buttonheight/2) and the last button at (screenheight-buttonheight).

NOTE: Try arranging the buttons according to the size of the screen and not in terms of dp or sp because the screen sizes may vary and that would mess up the whole thing.

Good Luck