Layout breaking down - how to get it even/aligned?

Please see designer's picture:

Now see what I'm getting:

Here is my layout:

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:background="@drawable/nav_back">
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:drawableTop="@drawable/home"
                android:background="@drawable/nav_selected"
                android:layout_weight="1"
                android:textColor="#FFF"
                android:textSize="10dp"
                android:text="Home"/>
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:drawableTop="@drawable/home_g"
                android:background="@drawable/nav_back"
                android:layout_weight="1"
                android:textColor="#FFF"
                android:textSize="10dp"
                android:text="This is long string that pushes layout"/>
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:drawableTop="@drawable/available_g"
                android:background="@drawable/nav_back"
                android:layout_weight="1"
                android:textColor="#FFF"
                android:textSize="10dp"
                android:text="Available"/>
        <Button android:layout_width="wrap_co开发者_运维知识库ntent" android:layout_height="wrap_content"
                android:drawableTop="@drawable/completed_g"
                android:background="@drawable/nav_back"
                android:layout_weight="1"
                android:textColor="#FFF"
                android:textSize="10dp"
                android:text="Completed"/>
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:drawableTop="@drawable/mail_g"
                android:background="@drawable/nav_back"
                android:layout_weight="1"
                android:textColor="#FFF"
                android:textSize="10dp"
                android:text="Mail"/>

    </LinearLayout>

Questions. How do I:

1. Make sure no matter what - screen broken down to 5 even segments - so all buttons even no matter text inside.

2. If one button pushes layout down - how do I make sure other buttons fill that vertical space as well? Like home button is not all way down - you can see where nav_selected ends

3. I have icons in PNG in 3 sizes as per google format. I want to have some padding for drawableTop if possible so icons look smaller on my screen - closer to what designers screen look.

Thanks!

---

Read about layout_weight on this page in the section about LinearLayouts. That is the attribute you're going to want to use to get the views to all get the same width. I am not super familiar with its implementation but I would think you probably wont want width set to wrap_content when you do it that way.

Edit:

Tip: To create a proportionate size layout on the screen, create a container view group object with the layout_width and layout_height attributes set to fill_parent; assign the children height or width to 0 (zero); then assign relative weight values to each child, depending on what proportion of the screen each should have.

This seems like what you want to do.

---

Alternatively, you can use GridView ( or even ListView, Gallery) and create simple adapter, where you will override getView() method to inflate your layout. I think that layout is pretty easy to create and it will be the same for each button. In addition, you'll be able to scroll if there's more than 5 elements.