How To Center Icon in Android Action Bar

Question

I'm trying to center the icon in the android action bar. I'm using a custom layout that has a button on the left side, an icon in the center and the menu options on the right.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ActionBarWrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >



        <ImageButton
            android:id="@+id/slideMenuButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_menu_bookmark" />

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/RelativeLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerInParent="true"  >
            <ImageView
                android:id="@+id/icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:layout_centerInParent="true" />
        </RelativeLayout>



</RelativeLayout>

I've tried this with and without the RelativeLayout wrapping the ImageView. The left button shows up fine, and I can set the icon with layout_toRightOf, but I can't get it to center. Anyone have any ideas?

Edit: Here's the android code in the on create method.

ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayUseLogoEnabled(false);
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayOptions(actionBar.DISPLAY_SHOW_CUSTOM);
    View cView = getLayoutInflater().inflate(R.layout.actionbar, null);
    actionBar.setCustomView(cView);

Solution 1

Okay. This should work. Try this(Tested in normal activity):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ActionBarWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="horizontal">

    <ImageButton
        android:id="@+id/slideMenuButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentLeft="true" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"  />    

</RelativeLayout>

Solution 2

The previous answers doesn't work for me (on Android 4.4 devices), because the outer container view groups did not expand to the full with, so the container group and the centered inner logo was already left aligned in the title bar.

I found a layout that works with the regular action bar menu (on right side) and regardless of enabling the regular action bar logo and title (on left side). This example only centers an additional logo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
>

    <View android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
    />

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/my_logo"
               android:layout_gravity="center_vertical"
               android:contentDescription="Logo"
        />

    <View android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
      />

</LinearLayout>

You have to enable the custom view by this

ActionBar actionBar = getActionBar();
actionBar.setDisplayShowCustomEnabled(true);
View cView = getLayoutInflater().inflate(R.layout.actionbar, null);
actionBar.setCustomView(cView);

but not this method (it disables all other elements in action bar).

// actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

Solution 3

You can add a custom view to the action bar. Just add a LinearLayout as the custom view and add sub views to the linearlayout. I used this technique to add 4 buttons right in the middle.

To add a custom view use actionBar.setCustomView(view). Also set the option DISPLAY_SHOW_CUSTOM using actionBar.setDisplayOptions.

Once you have a custom view in the bar then use normal layout procedures to get the effect you want. One trick you could use would be to have 3 nested linear layouts and assign each a weight. For example 1,4,1 so the center layout gets the most space. Here is an example, of course you can leave out the buttons on the right side layout if you want it to be blank. With this approach you can achieve the exact center.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#F00"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="#0F0"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#00F"
        android:gravity="right"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>
</LinearLayout>