How to align elements horizontally within a LinearLayout?

Question

I am not able to control the height of the LinearLayout. These won't align properly and won't fill up the width. I want the divider to be in the center and both the buttons on either side. Here is my code:

<LinearLayout
    android:id="@+id/buttonFieldsLayout"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/loginFieldsLayout" >

    <Button
        android:id="@+id/signUpButton"
        style="@style/AuthButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sign_up_button_label" />

    <View
        android:id="@+id/buttonDivider"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="@drawable/divider" />

    <Button
        android:id="@+id/cancelButton"
        style="@style/AuthButton"
        android:text="@string/cancel_button_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient 
    android:startColor="@color/white"
    android:centerColor="@color/blue"
    android:endColor="@color/white" />
</shape>

Update 1:

View still sticks out after @Onik's suggestion

Update 2:

I removed the View element and added this code in LinearLayout instead and it worked!

android:divider="@drawable/divider"
android:showDividers="middle"

Note: android:divider property is available only in Android 3.0 (API level 11) or higher.

Actually this link helped me and shows the proper way to put a divider: How to add (vertical) divider to a horizontal LinearLayout?

Answer 1

You need to use layout_weight attribute for Buttons. To prevent divider to fill the height of the layout (like entire height of the screen in the picture) use layout_height="match_parent" instead of layout_height="wrap_content". This will fill the screen's (or parent's) width and set the button's width to be equal, with the divider between them of same height:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttonFieldsLayout"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/loginFieldsLayout" >

<Button
    android:id="@+id/signUpButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="sign_up_button_label" />

<View
    android:id="@+id/buttonDivider"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@drawable/divider" />

<Button
    android:id="@+id/cancelButton"
    android:text="cancel_button_label"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />