How to centre text in Sherlock Action Bar with icon and sliding menu

Question

I am trying to implement an Action Bar on an Android Activity which implements Jeremy Feinstein's sliding menu and actionbarSherlock. The issue I am facing is to centre align the title text in the Action Bar. My action bar has a menu icon named "icon_sliding_menu" on the left of the text to activate the left menu sliding action.

I have used this example to write attached below. However, when I add the line "getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);" to try to customize my view, my title just goes away, and I don't see any text at all.

ActionBar when the line mentioned above is not in the code:

ActionBar when the line mentioned above is written in the code:

How can I align the text to centre? I am attaching my code below.

actionbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >

<TextView
    android:id="@+id/action_bar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textSize="18sp" />
</LinearLayout>

HomeActivity.java

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);

    final View actionBarLayout = LayoutInflater.from(this).inflate(
            R.layout.actionbar, null);

    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    getSupportActionBar().setDisplayShowCustomEnabled(true);
    getSupportActionBar().setCustomView(actionBarLayout);
    getSupportActionBar().setTitle("Home");
    getSupportActionBar().setHomeButtonEnabled(true);

    initSlidingMenu();
}

private void initSlidingMenu() {

    slidingMenu = new SlidingMenu(this);
    slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
    slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

    slidingMenu.setAboveOffset(50);
    slidingMenu.setBehindOffset(150);
    slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

    slidingMenu.setOnOpenListener(new OnOpenListener() {
        @Override
        public void onOpen() {
            getSupportActionBar().setTitle("Menu");
        }
    });

    slidingMenu.setOnCloseListener(new OnCloseListener() {
        @Override
        public void onClose() {
            getSupportActionBar().setTitle("Home");
        }
    });

    slidingMenu.setSecondaryOnOpenListner(new OnOpenListener() {
        @Override
        public void onOpen() {
            getSupportActionBar().setTitle("Current Trip");
        }
    });

    // Add left menu
    mTransaction = this.getSupportFragmentManager().beginTransaction();
    slidingMenu.setMenu(R.layout.left_menu);
    mTransaction.commit();

    // Add right menu
    mTransaction = this.getSupportFragmentManager().beginTransaction();
    slidingMenu.setSecondaryMenu(R.layout.right_menu);
    mTransaction.commit();
}

@Override
protected void onResume() {
    super.onResume();
    getSupportActionBar().setIcon(R.drawable.icon_sliding_menu);
}

Answer 1

You can do it using titleTextStyle attribute of ActionBar.

In your styles.xml, in the App theme, set actionBarTabSyle to a custom style as,

 <item name="titleTextStyle">@style/TitleTextStyle</item>

And heres the CustomActionBarTabs,

<!-- action bar tab styles -->
<style name="TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/actionbar_text</item>
    <item name="android:gravity">center</item> //center the title
</style>

Using this you can set various styles to the Title Text like color etc. Remember this will only center the text for the space provided to the Title within the ActionBar. In case this doen't help much you can always create your own custom view and add it to ActionBar as,

 getSupportActionBar().setCustomView(R.layout.action_bar);

In case you want to create your own layout, follow these 2 simple steps:

1. Java Code

    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
    getSupportActionBar().setCustomView(R.layout.actionbar);
   

   Where R.layout.actionbar is the following XML.

2. XML

   <?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="wrap_content"
      android:layout_gravity="center"
      android:orientation="vertical">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="YOUR ACTIVITY TITLE"
      android:textColor="#ffffff"
      android:textSize="24sp" />
   </LinearLayout>
   

Source.