custom actionbar layout using appcompat

Question

I have an application, with an action bar that contains 3 imageView ,I am using appcompat library for that , here is the code :

private void setupActionBar() {

     // Inflate a "Done/Cancel" custom action bar view.
      final LayoutInflater inflater = (LayoutInflater) this
          .getSupportActionBar().getThemedContext()
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      final View customActionBarView = inflater.inflate(
          R.layout.my_custom_actionbar, null);
      customActionBarView.findViewById(R.id.title);



    final ActionBar actionBar = this.getSupportActionBar();
      actionBar.setDisplayOptions(
          ActionBar.DISPLAY_SHOW_CUSTOM, ActionBar.DISPLAY_SHOW_CUSTOM | 
          ActionBar.DISPLAY_SHOW_HOME | 
          ActionBar.DISPLAY_SHOW_TITLE);

      actionBar.setCustomView(customActionBarView, 
              new ActionBar.LayoutParams(
                  ViewGroup.LayoutParams.MATCH_PARENT, 
                  ViewGroup.LayoutParams.MATCH_PARENT
              )
             );
}

the XML :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/gray" >


<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_horizontal" >


    <ImageView
        android:id="@+id/facebook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        android:src="@drawable/ic_fb" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center"
        android:src="@drawable/ic_hotels" />

     <ImageView    
         android:id="@+id/tweetter"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:src="@drawable/ic_tweet" 
      />
      </FrameLayout>
      </RelativeLayout>

the custom action bar is loaded without problem, but I couldn't get the right layout

I tried to do some changes in the XML file but it didn't work. so what am I forgetting ?

Answer 1

When I tried you code as you posted, I have this result:

 ________________________________
|                                |  
| facebook     tweeter      logo | 
|________________________________|  

Then, I guess the layout_gravity attributes are wrong. Also, it seems that you reverse right and left. And the FrameLayout seems useless in your case (- I wait your answer for my comment to be sure). This layout might achieve what you want:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use fill_horizontal to get the whole actionbar
And center_vertical gravity on all the child views -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gray"
    android:layout_gravity="fill_horizontal"
    android:gravity="center_vertical" >

    <!-- Use layout_alignParentRight attribute -->
    <ImageView
        android:id="@+id/facebook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_fb"
        android:layout_alignParentRight="true" />

    <!-- Use layout_alignParentLeft attribute -->
    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_hotels"
        android:layout_alignParentLeft="true" />

    <!-- Use layout_toLeftOf (id) attribute -->
    <ImageView    
        android:id="@+id/tweetter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_tweet"
        android:layout_toLeftOf="@id/facebook" />

</RelativeLayout>  

I get this output:

 ________________________________
|                                |  
| logo         tweeter  facebook | 
|________________________________|