Question

Hi I’m trying to create a bottom nav bar for my application similiar to the iphone zappos app:

I currently have a linear layout within my relative layout. The code is here:

    <LinearLayout 
android:layout_alignParentBottom="true" 
android:layout_width="wrap_content" 
android:layout_height="60dip"
android:orientation="horizontal">

    <Button 
    android:layout_height="fill_parent" 
    android:id="@+id/navhomebtn" 
    android:text="Home"
    android:layout_width="wrap_content" />

    <Button 
    android:layout_height="fill_parent"
    android:id="@+id/navsearchbtn" 
    android:text="Search" 
    android:layout_width="wrap_content" />

    <Button 
    android:layout_height="fill_parent" 
    android:id="@+id/navfavbtn" 
    android:text="Favorites" 
    android:layout_width="wrap_content" />
    <Button 
    android:layout_height="fill_parent" 
    android:id="@+id/navloanbtn" 
    android:text="Loans" 
    android:layout_width="wrap_content" />

</LinearLayout>

When I change the buttons to fill parent they just overlap each other and don’t respect the others size. I was hoping to get them to fill the space so different size phones will all have a similar UI experience. Otherwise I would have to set them as fixed width and have it centered with a background that blends (which I don’t want to do).

Please help!

Answer 1

Use layout_weight of 1 in your LinearLayout and use 0dp for layout_width and 0.25 for layout_weight in your buttons.