Question

I’ve got a 4-item start screen in my app, which looks like the following:

What’s important to me there:
– All items do have the same width (not regarding how much text is actually in it)
– Look the same on all devices (small-screen, mdpi, large-screen, etc.)

Im just wondering if there is a easy solution about this problem?

I’ve tried using 3 LinearLayouts but thats really awkward..
(1 presenting the layout root[vertical] and two which do each contain 2 buttons[horizonal]).
Making this layout ready for multiple screens would require a lot of fixed-width and fixed-margin hacking. Just like “button margin = 30dp on xlarge, 20 on large, 15 on normal,…”.

My layout-xml:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"     
            android:background="@drawable/background"
            android:id="@+id/main_root"
            android:orientation="vertical"
            android:gravity="center" >

<LinearLayout
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center" >

    <Button
                android:id="@+id/btn_learn"
                android:text="@string/mainBtn_learn" 
                style="@style/mainBtn"
                android:onClick="handleBtnClick"
                android:layout_margin="20dip" />

    <Button
                android:id="@+id/btn_quiz"
                android:text="@string/mainBtn_quiz" 
                style="@style/mainBtn"
                android:onClick="handleBtnClick" 
                android:layout_margin="20dip"  />

</LinearLayout>

<LinearLayout
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center" >

    <Button
                android:id="@+id/btn_search"
                android:text="@string/mainBtn_search" 
                style="@style/mainBtn"
                android:onClick="handleBtnClick" 
                android:layout_margin="20dip" />

    <Button
                android:id="@+id/btn_more"
                android:text="@string/mainBtn_more" 
                style="@style/mainBtn"
                android:onClick="handleBtnClick"
                android:layout_margin="20dip"  />

</LinearLayout>

Is there a view which “auto-scales” these Buttons or still any other easier solution?

Edit:

So, in special, you need something like
button:

 android:layout_width="15%" // 15% of screen width / height depending on the orientation
 android:layout_marginBottom="10%" // see above

Answer 1

I’m pretty new to Android development but I can show you what worked for me in a similar case. I defined my layout as follows:

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >


    <EditText
        android:id="@+id/outputText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:editable="false" />

    <Spinner
        android:id="@+id/outputSpinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:prompt="@string/OutputBaseOptionsPrompt" />
</LinearLayout>

I have a horizontal layout with two items. The LinearLayout has a width of “match_parent” so that it is as wide as the screen. Both items in the layout have the following:

        android:layout_width="0dp"
        android:layout_weight="1"

Since both items have a layout_weight of 1, they will be drawn at the same width. In this case, each item takes up half of the available space. If you change the weight of one of these items to “2” then it will be twice as wide as the item with a weight of “1”.