I am trying as best I can to style the ActionBar (i.e. an android.support.v7.widget.Toolbar) in my app, but it just won't work. I am following the official documentation when trying to achieve this. What I am really trying to do is to make the title color white. It is currently displayed in black. My target API is 11.
What am I doing wrong?
res/values/themes.xml
<resources>
<!-- Base theme applied no matter what API -->
<style name="MMTheme.Base" parent="Theme.AppCompat.Light">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColor">#color/mm_dark_gray</item>
<item name="colorPrimary">#color/mm_brown</item>
<item name="colorPrimaryDark">#color/mm_dark_gray</item>
<item name="colorAccent">#color/mm_green</item>
<item name="android:actionBarStyle">#style/MMActionBar</item>
<item name="android:actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="android:actionMenuTextColor">#color/mm_green</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MMActionBar</item>
<item name="actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="actionMenuTextColor">#color/mm_green</item>
</style>
<style name="MMTheme" parent="MMTheme.Base"></style>
<!-- ActionBar style -->
<style name="MMActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/mm_green</item>
<item name="android:titleTextStyle">#style/MMActionBarTitleText</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/MMActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MMActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/mm_white</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
<!-- ActionBar tabs text -->
<style name="MMActionBarTabText" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/mm_green</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
</resources>
The inflated android.support.v7.widget.Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mm_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
In the Activity
// Setup main Toolbar
Toolbar toolbar = (Toolbar) mInflatedActivity.findViewById(R.id.mm_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.ic_launcher);
I have tried everything I can think of and searched a lot online, but I cannot make it work. What am I missing?
Current result is (nevermind the search icon):
Adding style="#style/MMActionBar" to the xml properties of the android.support.v7.widget.Toolbar results in this:
Changing main parent theme to Theme.AppCompat.Light.DarkActionBar does nothing.
Just use this in yout layout xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red600"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Set theme in xml itself to ThemeOverlay.AppCompat.Dark.ActionBar which will make title text white.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
And I guess this is the right way to theme Toolbar, since according to official Android Developer blog
Styling of Toolbar is done differently to the standard action bar, and
is set directly onto the view.
Here's a basic style you should be using when you're using a Toolbar
as your action bar:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
The app:theme declaration will make sure that your text and items are
using solid colors (i.e 100% opacity white).
I have faced same problem. The following solution solved my problem.
For this you need to make changes at two places.
1.Modify your toolbar xml like this,
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:id="#+id/TV_tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My App Name"
android:textSize="18sp"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
Modify like this in your activity file.
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
Thats it. This will make your title color white. Cheers..!
Use this to change colors of the letters on the toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
Is there any way to change right padding of text in ActionBar ?
Here my code :
Styles
<style name="ABTheme" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
<item name="android:textSize">14sp</item>
<item name="android:paddingRight">20dp</item>
</style>
Menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/test"
android:title="Test"
app:showAsAction="always|withText" />
</menu>
Try to use Android Toolbar with AppCompat v21 insdead of ActionBar.
In your main view layout put somewhere the following code:
<android.support.v7.widget.Toolbar
android:id=”#+id/my_awesome_toolbar”
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:paddingRight="#dimens/YOUR_PADDING"
android:minHeight=”56dp”
android:background=”#color/colorPrimary” >
<!-- Put whatever you want here -->
</android.support.v7.widget.Toolbar>
Then in your Activity or Fragment set Toolbar as ActionBar
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
}
U can add menu as in ActionBar if U want. Set custom title and add any paddings to it (but dont forget to set no title style) or getSupportActionBar().setDisplayShowTitleEnabled(false);.
More information here.
I try to custom the ActionBar.
In the Fragment , I use the following code to set ActionBar.
ActionBar actionBar = getActivity().getActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setHomeButtonEnabled(false);
actionBar.setCustomView(R.layout.actionbar);
The actionbar.xml is like the following:
<?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/bar_background" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:src="#drawable/bar_icon"/>
</RelativeLayout >
But it show like the following picture:
Why the menu button didn't change the Background? Did I missing something ?
CustomView is for putting your custom views (e.g. created classes) - Buttons, styled TextViews, other widgets etc. You are looking just for background, so you might use:
actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.bar_background));
or (better, prefered) style your ActionBar with styles:
<resources>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
<style name="MyActionBarTheme" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/bar_background</item>
</style>
</resources>
with new AppCompat you might use custom, easily colored Toolbar (doc here)
I am using a custom actionbar view, and as you can see in the screenshot below, there is a blank gray space in the actionbar. I want to remove it.
What have I done:
res/values-v11/styles.xml
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarStyle">#style/ActionBarStyle</item>
</style>
res/values/my_custom_actionbar.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:height">60dp</item>
</style>
</resources>
Manifest
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="19" />
<application
android:icon="#drawable/ic_launcher"
android:label="#string/AppName"
android:theme="#style/AppBaseTheme" >
<!-- activities... etc -->
</application>
MainActivity
public void onCreate(Bundle bundle) {
super.onCreate(bundle);
ActionBar actionbar = getSupportActionBar();
actionbar.setDefaultDisplayHomeAsUpEnabled(false);
actionbar.setDisplayHomeAsUpEnabled(false);
actionbar.setDisplayShowCustomEnabled(true);
actionbar.setDisplayShowHomeEnabled(false);
actionbar.setDisplayShowTitleEnabled(false);
actionbar.setDisplayUseLogoEnabled(false);
actionbar.setHomeButtonEnabled(false);
// Add the custom layout
View view = LayoutInflater.from(this).inflate(R.layout.actionbar, null, false);
actionbar.setCustomView(view);
}
I have found a recent post, that is pointing out that there is an issue with the latest release. I have also updated ADT and SDK to Android 5.
Android ActionBar's custom view not filling parent
I don't know what should I do.
Edit (partial solution):
Not working on Android <= API 10.
Android Lollipop, AppCompat ActionBar custom view doesn't take up whole screen width
What have I changed:
Use the latest sdk version:
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="21" />
Add a toolbarStyle:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarStyle">#style/ActionBarStyle</item>
<item name="android:toolbarStyle">#style/ToolbarStyle</item>
<item name="toolbarStyle">#style/ToolbarStyle</item>
</style>
<style name="ToolbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="contentInsetStart">0dp</item>
<item name="android:contentInsetStart">0dp</item>
</style>
If you are adding the Toolbar via XML, you can simply add XML attributes to remove content insets.
<android.support.v7.widget.Toolbar
xmlns:app="schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp" />
try this:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
View customView = getLayoutInflater().inflate(R.layout.main_action_bar, null);
actionBar.setCustomView(customView);
Toolbar parent =(Toolbar) customView.getParent();
parent.setPadding(0,0,0,0);//for tab otherwise give space in tab
parent.setContentInsetsAbsolute(0,0);
The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.
Change this to align to the keyline.
Update for support library v24.0.0:
To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.
It turned out that this is part of a new Material Design Specification introduced in version 24 of Design library.
https://material.google.com/patterns/navigation.html
However, it is possible to remove the extra space by adding the following property to Toolbar widget.
app:contentInsetStartWithNavigation="0dp"
Before :
After :
I found an other resolution (reference appcompat-v7 ) that change the toolbarStyle ,following code:
<item name="toolbarStyle">#style/Widget.Toolbar</item>
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="contentInsetStart">0dp</item>
</style>
Just add app:contentInsetStart="0dp" to the XML attribute of the toolbar.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:paddingLeft="0dp">
This should be good enough.
Just Modify your styles.xml
<!-- ActionBar styles -->
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
Only add app:contentInsetStart="0dp" to the toolbar remove that left space.
So your Toolbar definition look like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:contentInsetStart="0dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
and it look like this
Instead of adding a toolbar in the layout, you can set your custom view as shown below.
Toolbar parent = (Toolbar) customView.getParent();
parent.setContentInsetsAbsolute(0,0);
If you check the documentation of toolbar, by default it has style defined and there is an item contentInsetStart.
<item name="contentInsetStart">16dp</item>
If you want to override this padding then it can be done in two ways.
1.Override the style and add your own style with contentInsetStart and contentInsetEnd values
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
2.In XML you can directly define the contentInsetStart and contentInsetEnd values
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_height="?attr/actionBarSize">
<!--Add your views here-->
</androidx.appcompat.widget.Toolbar>
Using AppCompatAcitivty you can use just by
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
View logo = getLayoutInflater().inflate(R.layout.custom_toolbar, null);
mToolbar.addView(logo, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
mToolbar.setContentInsetsAbsolute(0,0);
You need to add this line app2:contentInsetStart="0dp" in your toolbar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app2="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app2:contentInsetStart="0dp"/>
this work for me
toolbar.setPadding(0,0,0,0);
toolbar.setContentInsetsAbsolute(0,0);
Setting "contentInset..." attributes to 0 in the Toolbar didn't work for me. Nilesh Senta's solution to update the style worked!
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarStyle">#style/Actionbar</item>
<item name="android:titleTextStyle">#style/ActionbarTitle</item>
</style>
<style name="Actionbar" parent="Widget.AppCompat.ActionBar">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
java (onCreate)
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(
ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT
);
View view = LayoutInflater.from(this).inflate(R.layout.actionbar_main, null);
actionBar.setCustomView(view, layoutParams);
In xml add these two attribute for Toolbar tag:
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
and inside code add these lines:
// remove extra padding of toolbar
toolbar.setContentInsetsAbsolute(0, 0);
toolbar.setPadding(0, 0, 0, 0);
Tested on mobile and tablet devices both.
Kotlin
supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM;
supportActionBar?.setCustomView(R.layout.actionbar);
val parent = supportActionBar?.customView?.parent as Toolbar
parent?.setPadding(0, 0, 0, 0)//for tab otherwise give space in tab
parent?.setContentInsetsAbsolute(0, 0)
I did not find a solution for my issue (first picture) anywhere, but at last I end up with a simplest solution after a few hours of digging. Please note that I tried with a lot of xml attributes like app:setInsetLeft="0dp", etc.. but none of them helped in this case.
Picture 1
the following code solved this issue as in the Picture 2
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//NOTE THAT: THE PART SOLVED THE PROBLEM.
android.support.design.widget.AppBarLayout abl = (AppBarLayout)
findViewById(R.id.app_bar_main_app_bar_layout);
abl.setPadding(0,0,0,0);
}
Picture 2
Create toolbar like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>
please follow this link for more - Android Tips
only adding android:padding="0dp" work for me
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="60dp"
android:padding="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
ActionBar ab = getSupportActionBar();
ab.setDisplayShowHomeEnabled(true);
ab.setDisplayShowCustomEnabled(true);
setDisplayShowTitleEnabled(true);
View customView = getLayoutInflater().inflate(R.layout.activity_main,null); //here activity_main.xml is the GUI design file.
ab.setCustomView(customView);
Toolbar parent =(Toolbar) customView.getParent(); //use V7 Toolbar import
parent.setContentInsetsAbsolute(0, 0);
setPadding(5,0,0,0);
ab.setIcon(R.mipmap.ic_launcher);
You can just use relative layout inside toolbar view group in your xml file and adjust the positions of widgets as you require them for your use case.No need to create custom layout & inflate it and attach to toolbar. Once done in your java code use setContentInsetsAbsolute(0,0) with your toolbar object before setting it as support action bar in your layout.
It would be better to add a background item into the style of the app actionbar to consistent with the background color of the customized actionbar:
<item name="android:background">#color/actionbar_bgcolor</item>
After android 6.0, the actionbar even has a margin-right space and cannot be set. Add a right margin adjusting in the activity like this: (the view is the customized actionbar or a right button in it)
int rightMargin = Build.VERSION.SDK_INT>=Build.VERSION_CODES.M ? 0 : 8; // may the same with actionbar leftMargin in px
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
p.setMargins(p.leftMargin, p.topMargin, rightMargin, p.bottomMargin);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1){
p.setMarginEnd(rightMargin);
}
view.setLayoutParams(p);
The actionbar machenism is just supported after Android 3.0+ app. If we use a toolbar (of support lib v7) instead, we should layout it in each xml of each activity, and take care of the issue of overlapping with system status bar in the Android 5.0 or later device.
I'm using ActionBar.Tab setCustomView() method with this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background_grey" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Test Tab"
android:textColor="#color/background_dark_green"/>
</RelativeLayout>
this is my function setting the ActionBar:
public void setActionBar()
{
ActionBar actionBar = getSupportActionBar();
//actionBar.hide();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
//set action bar navigation mode
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//set tabs
//home tab
Tab tab = actionBar.newTab().setText(TAB_HOME).setTabListener(new PicoTabListener<StartFragment>(this, StartFragment.class));
tab.setCustomView(R.layout.tab_background);
actionBar.addTab(tab);
//events tab
tab = actionBar.newTab().setText(TAB_EVENTS).setTabListener(new PicoTabListener<EventsFragment>(this, EventsFragment.class));
actionBar.addTab(tab);
//enter event code
tab = actionBar.newTab().setText(TAB_CODE).setTabListener(new PicoTabListener<EnterCodeFragment>(this, EnterCodeFragment.class));
actionBar.addTab(tab);
}
and my activity layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the main layout of the application -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_basic_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background_dark_green" >
</RelativeLayout>
The results seams to look like this (The upper left tab with the gray background):
How can i make my custom view to fill whole tab and work properly ?
I'm using support package v7 for Android 2.3
Just ran into this myself and figured out the solution. You should create a style for the tabview that clears the background and the padding and use it in your theme.
styles.xml:
<style name="Custom.ActionBar.TabView.Empty" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#null</item>
<item name="android:padding">0dp</item>
</style>
themes.xml:
<style name="Theme.Custom" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
<item name="actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
</style>
To every created tab object just add layoutParams:
..
tab.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
actionBar.addTab(tab);
You have to rely on android:margin and android:padding when dealing with actionbarcompat's setCustomView
keeping in mind that it seems like the root element's padding, width, height, and margin, gets ignored.
If you're still having the issue, I found a way to get the whole space : ActionBar Tab with custom View not centered