Custom View for ActionBar.Tab not displaying correctly

Question

I currently have an actionBar implemented with tabbed navigation, and want to now customize the tabs themselves. I created a custom XML layout for each tab to have a textview and a clickable ImageButton, and used the ActionBar.Tab.setCustomView to set it. The problem is that none of the attributes for the layout seem to have any effect(such as alignment). Any help would be appreciated!

Here is an image showing what's produced: Image of what is being produced

My Custom Tab Layout XML file

<?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:orientation="horizontal" >
<TextView 
    android:id="@+id/tab_title"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    />   
<ImageButton 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_action_refresh"/>

</RelativeLayout>

ActionBar code:

final ActionBar actionBar = getActionBar();

            //Because there is no 'parent' when navigating from the action bar, the home button for the Action Bar is disabled.    
            actionBar.setHomeButtonEnabled(false);

            //Specify that the actionBar will include a tabbed navigation
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);


        // Setting up the ViewPager rowingViewPager, attaching the RowingFragmentPagerAdapter and setting up a listener for when the
        // user swipes between sections.
            rowViewPager = (ViewPager) findViewById(R.id.pager);  
            rowViewPager.setAdapter(rowAdapter);
            rowViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener()
            {
                @Override
                public void onPageSelected(int position) 
                {
                    actionBar.setSelectedNavigationItem(position); 
                }
            });


        // For loop to add tabs for each fragment to the actionBar
            for (int tab_counter = 0; tab_counter < rowAdapter.getCount(); tab_counter++) 
            {
                Tab new_tab = actionBar.newTab();
                new_tab.setCustomView(R.layout.custom_tab);
                TextView tab_title = (TextView) new_tab.getCustomView().findViewById(R.id.tab_title);
                tab_title.setText(rowAdapter.getTabTitle(tab_counter));
                new_tab.setTabListener(this);
                // Add tab with specified text as well as setting this activity as the TabListener.
                actionBar.addTab(new_tab);


            }

        rowViewPager.setOffscreenPageLimit(2); //Sets the number of off-screen fragments to store and prevent re-load. Will increase if future fragments are added.
    }

Answer 1

The problem lies in not customizing the actionBar layout itself, but rather altering the style. The default ActionBar has a property where the padding on the left and right is 16dp. You can do whatever you want in your tab layout, but it will not override this.

To do this, I simply wrote a new style in styles.xml for the ActionBar Tab where I overrode that padding and applied it to the actionBarTabStyle attribute in the application theme. Here is my new styles.xml which shows the change.

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    </style>


    <style name="ActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
</style>

</resources>