ActionBar with custom layout does not occupy full screen width on Android 4.4.2 (KitKat)

Question

I want to display an Action Bar with a custom layout. The custom layout has three ImageViews, one in the centre and the other two on the left & right ends of the action bar. There must be no back button or action items.

Here is what I've used:

android.support.v7.app.ActionBar actionBar = getSupportActionBar();

actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);

ActionBar.LayoutParams lp = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
View actionBarView = LayoutInflater.from(this).inflate(resource, null); 
actionBar.setCustomView(actionBarView, lp);

The custom layout is inflated correctly, but does not occupy the full width of the screen. This happens on Android 4.4.2 (KitKat). On Gingerbread, the above arrangement works properly.

I've tried the recommended solutions in the following discussions:

However the problem remains. There has to be a way to force the layout to occupy the complete screen width.

I am using the Action Bar from the V7 AppCompat library. Does anyone know a way around this ??

EDIT 1:

Here is the XML layout file:

<RelativeLayout 
            xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="fill_horizontal"
            android:orientation="horizontal">

                    <ImageView
                         android:id="@+id/left_icon"
                         android:background="@drawable/leftbutton"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_marginLeft="10dp"
                         android:layout_alignParentLeft="true"
                         android:layout_centerVertical="true"
                         android:adjustViewBounds="true"
                         android:scaleType="centerInside"
                         android:clickable="true"
                         android:onClick="leftButtonPressed"
                         android:hapticFeedbackEnabled="true"
                    />

                    <ImageView
                         android:id="@+id/center_icon"
                         android:background="@drawable/centertitle"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_centerInParent="true"
                         android:adjustViewBounds="true"
                         android:scaleType="centerInside"
                    />

                    <ImageView
                         android:id="@+id/right_icon"
                         android:background="@drawable/rightbutton"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_marginRight="10dp"
                         android:layout_alignParentRight="true"
                         android:layout_centerVertical="true"
                         android:adjustViewBounds="true"
                         android:scaleType="centerInside"
                         android:clickable="true"
                         android:onClick="rightButtonPressed"
                         android:hapticFeedbackEnabled="true"
                    />
                </RelativeLayout>

Here is what it looks like on Gingerbread (2.3.5):

As you can see, its inflating correctly. And here's how it looks on Kitkat (4.4.2):

You can see that there's a slight gap on the right and the layout is not occupying the complete width.

I dont believe there's a problem with the layout (its inflating correctly on Android 2.3.5), but I could be wrong. Tell me if I'm crazy.

EDIT 2:

Thanks to Doctoror Drive and this post, I was able to get the result I wanted. I know its a bit strange: why use an Action Bar if you are not going to have any navigation or action items, but this is what I need for my particular problem. I have a TabHost with a stack of sliding Fragments in each tab, and the top LinearLayout (i.e. the Action Bar) needs to change its appearance when different Fragments are displayed.

EDIT 3:

Here are some more links for understanding this further:

In addition to posting your layout, it may be useful to see a screenshot of what you ARE getting as an ActionBar. — Matt, May 21 '14 at 15:20

score 2 · Answer 1 · answered Dec 26 '14 at 11:41

2

In my case I have solved the issue bypassing the invocation of the LayoutInflater.

So one should simply replace this code:

View actionBarView = LayoutInflater.from(this).inflate(R.layout.custom_actionbar, null); 
actionBar.setCustomView(actionBarView, lp);

with this code:

actionBar.setCustomView(R.layout.custom_actionbar);

answered Dec 26 '14 at 11:41

Luca Fagioli

12,722
5
59
57

1

Unfortunately I haven't had the time to verify this ... I had already solved the problem using the earlier answer ... but thanks anyway for taking the time to post this. It will surely help others! – Yash Sampat Jan 07 '15 at 17:44
1

This is the way to go – Andrew Aug 09 '15 at 20:20
but sometimes we need to inflate the view previously (to change some text) – JCarlosR Feb 22 '16 at 15:03

score 1 · Accepted Answer · answered May 22 '14 at 07:46

It's not a gap, it's a menu overflow button to the right. If you look closely you can see three dots button.

You've chosen the wrong theme because you can hardly see it. Use Theme.Compat.Light.DarkActionBar if your ActionBar is dark and you need the light theme.

On devices that don't have physical menu button (mostly new ones) the menu overflow button is shown.

You can't remove it unless you disable menus.

You can use splitActionBarWhenNarrow uiOptions which will split the ActionBar so that the menu part will be at the bottom one, but that will be only for vertical orientation of medium screens and probably not what you need.

Take a look at the ActionBar Patterns doc and Menus UI doc

Holy cow ... there is indeed that 3-dot indicator on the right !!! Scared the bleep out of me when you pointed it out. Thanks so much, Doctoror Drive, I got the result I wanted and its working perfectly now! — Yash Sampat, May 22 '14 at 09:42

ActionBar with custom layout does not occupy full screen width on Android 4.4.2 (KitKat)

2 Answers2

Linked