How to customize Android ActionBar to show a custom view before the tabs?

Question

I'm using a custom view for the ActionBar with Tabs. My problem is the ordering of the custom view. Android is displaying it AFTER the tabs - which I do not want.

I want the custom view displayed BEFORE the tabs.

Is there a way to customize the actionBar to show the custom view before the tabs? or is this not possible?

Code:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final ActionBar bar = getActionBar();
    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    View customActionBarView = 
        getLayoutInflater().inflate(R.layout.home_actionbar, null, true);
    ActionBar.LayoutParams lp = 
        new ActionBar.LayoutParams(LayoutParams.WRAP_CONTENT, 
            LayoutParams.WRAP_CONTENT);

    lp.gravity = Gravity.START;
    bar.setCustomView(customActionBarView, lp);
    bar.setLogo(R.drawable.logo);
    bar.setHomeButtonEnabled(true);
    bar.setDisplayShowCustomEnabled(true);

    bar.addTab(bar.newTab()
        .setText("Stuff")
        .setTabListener(new TabListener<StuffFragment>(
            this, "stuff", StuffFragment.class)));

    bar.addTab(bar.newTab()
        .setText("Friends")
        .setTabListener(new TabListener<ContactsFragment>(
            this, "friends", ContactsFragment.class)));

    bar.addTab(bar.newTab()
        .setText("Messages")
        .setTabListener(new TabListener<ConversationsFragment>(
            this, "messages", ConversationsFragment.class)));

    if (savedInstanceState != null) {
        bar.setSelectedNavigationItem(savedInstanceState.getInt("tab", 0));
    }

    bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | 
        ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_USE_LOGO);

    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);    
}

enter image description here

We'll need to see some code. Also, you should try to be more clear on what you mean by `before` and `after`. Capitalizing them doesn't make things anymore crystal. — adneal, Mar 11 '12 at 03:37
ive searched everywhere. it seems like there is no control over how every item (logo, tabs, custom view and menues) on the actionbar is positioned. fml! — , Mar 11 '12 at 05:22
Yeah, working with a custom view can get tricky. If I were you, I'd mess with the Gravity of your custom view a little more or use custom tabs as well. — adneal, Mar 11 '12 at 05:34
can you please share R.layout.home_actionbar layout, its quite possible — Pawan Maheshwari, Feb 18 '13 at 09:12
you can refer to my answer over here , i'v showing how to create custom actionbar http://stackoverflow.com/a/14658915/1627904 — Kosh, Feb 20 '13 at 09:01

score 3 · Answer 1 · edited May 23 '17 at 10:30

This seems to be the intended behaviour when using tabs and custom views. https://code.google.com/p/android/issues/detail?id=36191#c3

If you take a look at ActionBarSherlock - Tabs appearing ABOVE actionbar with custom view many other people are experiencing this as well and some people have offered solutions.

I have been unable to get any of the solutions working, but they may work for you. The trick seems to be to make sure the logo is is not set to be hidden. Call
getActionBar().setDisplayShowHomeEnabled(true) or getSupportActionBar().setDisplayShowHomeEnabled(true) if using ActionBarSherlock.

Then call:

View homeIcon = findViewById(
    Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ? 
    android.R.id.home : R.id.abs__home);
((View) homeIcon.getParent()).setVisibility(View.GONE);
((View) homeIcon).setVisibility(View.GONE);

This will get a reference to the actionbar view that holds the logo and sets it to gone with enables the custom view to fill the entire parent view, but should keep the tabs underneath...

As I said I was unable to get this working, but some people have had success.

Good luck.

This is exactly in the spirit of hacking the action bar. Excellent suggestion, it worked! — foxx1337, Nov 13 '13 at 17:49

score 2 · Answer 2 · answered Jul 04 '13 at 12:03

I had the same problem and i figured out a way to solve it. It's not an "elegant" solution but it was the best i could find. As first thing since you want to modify the standard ActionBar behaviour you have to force ActionBar Sherlok to always use the non native implementation. To do that open ActionBarSherlok.java and comment this line of code:

registerImplementation(ActionBarSherlockNative.class);

then remove all the values-v11 values-v14 etc and be sure to always extend Theme.Sherlock and never Theme.Holo

At this point you are sure that the ActionBar implementation is always the one written by Jake Wharton. The only thing left to do is make the ActionBar view layout the way you want. Open ActionBarView.java and in the onLayout() method move this piece of code

 if (mExpandedActionView == null) { 
        final boolean showTitle = mTitleLayout != null && mTitleLayout.getVisibility() != GONE &&
                (mDisplayOptions & ActionBar.DISPLAY_SHOW_TITLE) != 0;
        if (showTitle) {
            x += positionChild(mTitleLayout, x, y, contentHeight);
        }

        switch (mNavigationMode) {
            case ActionBar.NAVIGATION_MODE_STANDARD:
                break;
            case ActionBar.NAVIGATION_MODE_LIST:
                if (mListNavLayout != null) {
                    if (showTitle) x += mItemPadding;
                    x += positionChild(mListNavLayout, x, y, contentHeight) + mItemPadding;
                }
                break;
            case ActionBar.NAVIGATION_MODE_TABS:
                if (mTabScrollView != null) {
                    if (showTitle) x += mItemPadding;
                    x += positionChild(mTabScrollView, x, y, contentHeight) + mItemPadding;
                }
                break;
        }
    }

right before this piece

if (mProgressView != null) {
        mProgressView.bringToFront();
        final int halfProgressHeight = mProgressView.getMeasuredHeight() / 2;
        mProgressView.layout(mProgressBarPadding, -halfProgressHeight,
                mProgressBarPadding + mProgressView.getMeasuredWidth(), halfProgressHeight);
    }

You're done! Hope this helps

score 0 · Answer 3 · answered May 11 '12 at 20:35

0

When you add your custom view to the ActionBar you can specify the gravity also.

ActionBar.LayoutParams lp = new ActionBar.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);              
lp.gravity = Gravity.LEFT;
customView.setLayoutParams(lp);

answered May 11 '12 at 20:35

Lee

3,996
3
33
37

i've tried many different solutions including the above with no success. instead i've decided to ditch the action bar and implement something completely custom. – May 15 '12 at 22:41
So why downvote it if you can't get it working? My answer was correct, – Lee Mar 20 '13 at 14:59

score 0 · Answer 4 · answered Feb 26 '13 at 18:01

use ActionBarSherlock, which is very good implementation of Custom ActionBar for all android versions and very easy to use.

or you can create your own ActionBar using custom title bar and and its fair enough easy to implement. You can see this and this examples are very good examples of custom title bars.

score 0 · Answer 5 · answered Jul 12 '13 at 07:58

Are you making an app for the tablet? As far as I know, the tabs bar of actionbar basically appears below the it on cellphone.
If on tablet, I'm afraid you can't adjust the positions of tabs. what I can think of is that you need to quit using navigation mode and make a custom view which look like tabs to replace the actionBar tabs. Of course this causes a lot of extra effort to deal with the navigation stuff.

score 0 · Answer 6 · answered Aug 01 '13 at 18:10

Just create a custom view for your home button. In this view you can combine both logo and the custom view you're trying to position on left. Then add tabs as normal

The only downside of this solution is that you'll need to maintain the state of the back button yourself (if you use it at all)

score 0 · Answer 7 · answered May 15 '15 at 06:51

First set "DisplayShowHomeEnabled" property of actionbar to "true": actionBar.setDisplayShowHomeEnabled(true);

and then:

    View homeIcon = findViewById(android.R.id.home);
        ((View) homeIcon.getParent()).setVisibility(View.GONE);
        ((View) homeIcon).setVisibility(View.GONE);

I hope it helps :)

How to customize Android ActionBar to show a custom view before the tabs?

7 Answers7

Linked