ActionBar logo centered and Action items on sides

urSus picture urSus · Oct 5, 2012 · Viewed 30.9k times · Source

How could I make an actionbar to have logo in the center and two action items on sides like this?

enter image description here

I will be using ActionBar Sherlock.

Answer

dennisdrew picture dennisdrew · Oct 5, 2012

As I noted in a comment, I am not exactly sure if any of this would change with ABS (I'm sure not much would), but with the standard Action Bar you can load a custom layout .xml for your action bar title. For example, you could have action_bar_title.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="@drawable/your_desired_background" >

<TextView
        android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:maxLines="1"
            android:ellipsize="end"
            android:text="@string/app_name"
            android:textAppearance="?android:attr/textAppearanceMedium"/>

</RelativeLayout>

Then, in your Activity, you would want to call a method like this in onCreate():

private void setupActionBar() {
        ActionBar ab = getActionBar();
        ab.setDisplayShowCustomEnabled(true);
        ab.setDisplayShowTitleEnabled(false);
        ab.setIcon(R.drawable.your_left_action_icon);
        LayoutInflater inflator = (LayoutInflater) this
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View v = inflator.inflate(R.layout.action_bar_title, null);

        TextView titleTV = (TextView) v.findViewById(R.id.title);
        Typeface font = Typeface.createFromAsset(getAssets(),
                "fonts/your_custom_font.ttf");
        titleTV.setTypeface(font);

        ab.setCustomView(v);

            ab.setHomeAsUpEnabled(true);
    }

To take control of the left action item, you could do this in your Activity:

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case R.id.yourRightActionItem:
                        //do something
                        return true;
        case android.R.id.home: //<-- this will be your left action item
            // do something
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

Of course, make sure you also do the other necessary setups for the Action items in your menu xml's as well. This will be for any right-sided action items.

Edit: Just saw in another comment you said that title would be an image. If that's the case, just replace the TextView I used in my example with your ImageView, and disregard the font customization code in the setupActionBar() method.

Edit2: I updated my Java code. You will need to do ab.setHomeAsUpEnabled(true), and then have a custom theme to implement an invisible (or perhaps @null although I don't know if Android will accept that) drawable for the home as up indicator. See here (taken from answer here:)

<style name="Theme.MyFancyTheme" parent="android:Theme.Holo">
    <item name="android:homeAsUpIndicator">@drawable/my_fancy_up_indicator</item>
    <!-- or you could try @null -->
</style>