Android：RelativeLayout的ScrollView阻止按钮

Question

My app currently looks like this:

When I click on a button , the border color changes to green as shown above. I added a scrollview for my list of words as shown on the right side of the image. The problem is that this scrollview covers nearly the entire width of the screen and I am unable to click on the the first three rows of buttons .

A brief description of the layout:

I created a relative layout . The 25 buttons are in this relative layout . Then also within the relative layout I created a scrollable linear layout containing 20 textviews

Can someone please help me fix this layout? I want to be able to click on all the buttons and have the scrollview not block the buttons .

And I thought it might be a good idea to put the 25 buttons in its own relative layout within the main relative layout . Does anyone know how I can do that without redoing the entire layout?

Also, if you guys have any advice on the correct way to code the layout please let me know. I am fairly knew to android programming and don't know if I should use relative layout vs linear layout vs frame layout or match_parent vs fill_parent vs wrap_content . Please let me know if I am misusing any of them.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".Game" >

    <Button
        android:id="@+id/button1"
        android:layout_width="@dimen/size"
        android:layout_height="@dimen/size"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="18dp"
        android:background="@drawable/button"
        android:onClick="ButtonOnClick" />

.    
. (Buttons 2 - 24)
.    

    <Button
        android:id="@+id/button25"
        android:layout_width="@dimen/size"
        android:layout_height="@dimen/size"
        android:layout_alignBaseline="@+id/button24"
        android:layout_alignBottom="@+id/button24"
        android:layout_alignLeft="@+id/button20"
        android:background="@drawable/button"
        android:onClick="ButtonOnClick" />

    <ScrollView
        android:id="@+id/scrollable"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scrollbars="vertical" >

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="20dp"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/word1" />

          .
          . (TextViews 2 - 19)
          .

            <TextView
                android:id="@+id/textView20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/word20" />
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

Answer 1

Use a LinearLayout instead of RelativeLayout as your top layout and make it android:orientation="horizontal".

Then put all of your buttons in a RelativeLayout with an android:layout_weight="1" and android:layout_width="0dp".

Also put the ScrollView in a second RelativeLayout with a width of "wrap_content".

Here is the structure:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_widtht="0dp"
        android:layout_heigh="fill_parent"
        android:layout_weight="1">

        All buttons go here...

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent">

        Scroll view goes here...

    </RelativeLayout>
</LinearLayout>