Custom view for ActionBar.Tab not displaying correctly

Question

I currently have an actionBar implemented with tab support, and now you want to customize the tabs themselves. I created my own XML layout for each tab to have a textual view and an interactive ImageButton, and used ActionBar.Tab.setCustomView to set it. The problem is that none of the layout attributes seem to have any effect (like alignment). Any help would be appreciated!

Here is an image showing what happened: 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 is not in setting the actionBar layout itself, but in changing the style. By default, an ActionBar has a property in which the space on the left and right is 16dp. You can do whatever you want in the tab layout, but this will not be undone.

To do this, I simply wrote a new style in styles.xml for the ActionBar tab, where I redefined this add-on and applied it to the actionBarTabStyle attribute in the application theme. Here is my new styles.xml that 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> 

Answer 2

Its very simple to just remove the ImageView from your custom view and add it as drawable top / left / bottom / right for the textview

t

 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/your_img" android:text="Tab1" />