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.