Question

Been trying to create a layout similar to the Android Facebook app (top bar with app name and 2 buttons aligned right).

Tried everything 🙁 the closest I got made one of the buttons disappear…

Here is the code: (using relatives on top to create sticky header and footer)

the “Add” button disappears while the “Search” button aligns to the right.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:orientation="vertical">
 <RelativeLayout android:layout_width="fill_parent"
  android:layout_height="50dip" android:id="@+id/top_control_bar">
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
   android:layout_height="fill_parent" android:src="@drawable/top_background">
   <TextView android:layout_width="wrap_content" android:layout_height="20dip" 
    android:text="APP" android:layout_gravity="left|center" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/add_bookmark" />
   <Button android:id="@+id/add_bookmark" android:layout_width="wrap_content"
    android:layout_height="fill_parent" android:text="Add" android:layout_gravity="right|center" android:layout_alignParentRight="true" />
   <Button android:id="@+id/search_bookmark" android:layout_width="wrap_content"
    android:layout_height="fill_parent" android:text="Search" android:layout_gravity="right|center" android:layout_alignParentRight="true"  />
  </RelativeLayout>
 </RelativeLayout>
 <LinearLayout android:id="@+id/bottom_control_bar"
  android:layout_width="fill_parent" android:layout_height="wrap_content"
  android:layout_alignParentBottom="true">
  <Button android:layout_width="wrap_content"
   android:layout_height="fill_parent" android:text="Backup" />
  <Button android:layout_width="wrap_content"
   android:layout_height="fill_parent" android:text="Restore" />
 </LinearLayout>
 <ListView android:id="@android:id/list" android:layout_width="fill_parent"
  android:layout_height="0dip" android:layout_below="@id/top_control_bar"
  android:layout_above="@id/bottom_control_bar"></ListView>
 <TextView android:id="@android:id/empty" android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="No Bookmarks found. You can add one by clicking the star."
  android:layout_below="@id/top_control_bar" android:layout_above="@id/bottom_control_bar" />
</RelativeLayout>

Would appreciate any help! 🙂

Answer 1

The button is there but BEHIND the search button. If you switch the order of the add and search button, you’ll see that both buttons are there. Both share the same right border coordinate. Use layout_toLeftOf or layout_toRightOf as you did with the “app” TextView.

You can replace your inner RelativeLayout with the following code.

<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
   <TextView android:layout_width="wrap_content" android:layout_height="20dip" 
    android:text="APP" android:layout_gravity="left|center" android:layout_alignParentLeft="true" android:layout_toLeftOf="@id/add_bookmark" />
   <Button android:id="@+id/search_bookmark" android:layout_width="wrap_content"
    android:layout_height="fill_parent" android:text="Search" android:layout_gravity="right|center" android:layout_alignParentRight="true" />
   <Button android:id="@+id/add_bookmark" android:layout_width="wrap_content"
    android:layout_height="fill_parent" android:text="Add" android:layout_gravity="right|center" android:layout_toLeftOf="@id/search_bookmark" />
</RelativeLayout>