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:

• ActionBar - custom view with centered ImageView, Action Items on sides
• RelativeLayout/customview doesn't fill tab's width

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:

• https://groups.google.com/forum/#!msg/actionbarsherlock/i8JRUkBJjqk/ZzQV9xaM-lkJ
• https://groups.google.com/forum/#!topic/android-developers/FGEi72thLzE

Answer 1

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);

Answer 2

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