在不同的Android屏幕上使用不同的XML布局？

Question

I'm a beginner to Android, and I'm trying to get a couple of buttons to line up perfectly. I've done so right here:

And here's the code:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Scientific">

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="63dip"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<Button
    android:id="@+id/button1"
    android:layout_width="63dip"
    android:layout_height="63dip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="1" />

<Button
    android:id="@+id/Button01"
    android:layout_width="63dip"
    android:layout_height="63dip"
    android:layout_alignBaseline="@+id/button1"
    android:layout_alignBottom="@+id/button1"
    android:layout_toRightOf="@+id/button1"
    android:text="1" />

<Button
    android:id="@+id/Button02"
    android:layout_width="63dip"
    android:layout_height="63dip"
    android:layout_alignBaseline="@+id/Button01"
    android:layout_alignBottom="@+id/Button01"
    android:layout_toRightOf="@+id/Button01"
    android:text="1" />

<Button
    android:id="@+id/Button04"
    android:layout_width="63dip"
    android:layout_height="63dip"
    android:layout_alignBaseline="@+id/Button03"
    android:layout_alignBottom="@+id/Button03"
    android:layout_toRightOf="@+id/Button03"
    android:text="1" />

<Button
    android:id="@+id/Button03"
    android:layout_width="63dip"
    android:layout_height="63dip"
    android:layout_alignBaseline="@+id/Button02"
    android:layout_alignBottom="@+id/Button02"
    android:layout_toRightOf="@+id/Button02"
    android:text="1" />

</RelativeLayout>

The problem is, this code does not position 5 buttons perfectly across the bottom of the screen across different screen sizes :

Reading up on the official Android developers site, I gathered that I might need different activity layouts for small, normal, large, and xlarge screen sizes. I also read something about using layout_weight in LinearLayout. What's the right way to go? Could I have some example code, if possible?

EDIT:

I would also like the buttons to scale in height so that the same amount of buttons can fit vertically across devices.

Answer 1

Use a LinearLayout for buttons use layout_weight

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Scientific">

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="63dip"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<LinearLayout

        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal" >

<Button
    android:id="@+id/button1"
    android:layout_height="63dip"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:text="1" />

<Button
    android:id="@+id/Button01"
    android:layout_height="63dip"
     android:layout_width="0dp"
    android:layout_weight="1"
    android:text="1" />

<Button
    android:id="@+id/Button02"

    android:layout_height="63dip"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:text="1" />

<Button
    android:id="@+id/Button04"
    android:layout_height="63dip"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:text="1" />

<Button
    android:id="@+id/Button03"
    android:layout_width="0dp"
    android:layout_height="63dip"
    android:layout_weight="1"
    android:text="1" />
</LinearLayout>

</RelativeLayout>

Snap

Answer 2

try adding same layout_weight to all your buttons

<Button
    android:id="@+id/Button03"
    android:layout_width="63dip"
    android:layout_weight="1.0"
    android:layout_height="63dip"
    android:layout_alignBaseline="@+id/Button02"
    android:layout_alignBottom="@+id/Button02"
    android:layout_toRightOf="@+id/Button02"
    android:text="1" />

PS : layout_weight does not work with Relative Layout , you would have to use a linear layout with orientation: horizontal

When you use android:layout_weight you should set android:layout_width="0dp" (in case when vertical orientation - android:layout_height="0dp" ).

Answer 3

Depend on what screen size you support, you need to specify the appropriate screen layouts. I think you should start with this article first: http://developer.android.com/guide/practices/screens_support.html

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

Answer 4

With some insight from @Raghunandan, I was able to achieve, essentially, a table of buttons that scale up and down the same way, by using multiple LinearLayouts, each with layout_weight of 1, inside another LinearLayout. Then, inside each LinearLayout, I placed several buttons, also with layout_weight of 1