Search code examples
androidandroid-actionbarcentergraphical-logo

ActionBar logo centered and Action items on sides


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.


Solution

  • 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>