I have a TabLayout with a ViewPager in my Android app. It is set up with an icon with some text below for each tab. What I want to do now is to change the color of the selected tab so that it stands out a bit more. The icons are gray, but I want the selected tab to be green. For this I have a separate Drawable (png file) for each color.
It kinda works, but it adds a new View to the tab at every select/unselect instead of changing it. Here is the code in question (this is a custom Fragment class):
private ViewPager mViewPager;
private MyPagerAdapter mAdapter;
private TabLayout mTabLayout;
private int mCurrentItem = 0;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.my_fragment, container, false);
mViewPager = (ViewPager) view.findViewById(R.id.my_pager);
mTabLayout = (TabLayout) view.findViewById(R.id.my_tablayout);
return view;
}
#Override
public void onResume()
{
super.onResume();
final MyActivity myActivity = (MyActivity) getActivity();
mCurrentItem = 0;
mAdapter = new MyPagerAdapter(getChildFragmentManager(), myActivity);
mViewPager.setAdapter(mAdapter);
mViewPager.setCurrentItem(mCurrentItem);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.removeAllTabs();
mTabLayout.addTab(mTabLayout.newTab()
.setTag(0)
.setCustomView(R.layout.my_tablayout_tab_recipes_selected));
mTabLayout.addTab(mTabLayout.newTab()
.setTag(1)
.setCustomView(R.layout.my_tablayout_tab_shopping_list));
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager){
#Override
public void onTabSelected(TabLayout.Tab tab)
{
super.onTabSelected(tab);
if (tab.getTag() == null)
{
return;
}
switch ((TabConstants.TAGS) tab.getTag())
{
case 0:
tab.setCustomView(R.layout.my_tablayout_tab_recipes_selected);
break;
case 1:
tab.setCustomView(R.layout.my_tablayout_tab_shopping_list_selected);
}
mViewPager.setCurrentItem(tab.getPosition());
myActivity.supportInvalidateOptionsMenu(); // Invalidate Toolbar
}
#Override
public void onTabUnselected(TabLayout.Tab tab)
{
super.onTabUnselected(tab);
if (tab == null || tab.getTag() == null)
{
return;
}
switch ((TabConstants.TAGS) tab.getTag())
{
case 0:
tab.setCustomView(R.layout.my_tablayout_tab_recipes);
break;
case 1:
tab.setCustomView(R.layout.my_tablayout_shopping_list);
break;
}
}
});
}
Here are a few images of what's happening. The right View is inflated every time, but it is added instead of replacing the previous View.
Initially:
First tab change:
Second tab change:
Update (solution):
Here is an example of the StateListDrawable I ended up using for the tabs.
Drawables:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/selected" />
<!-- Inactive tab -->
<item android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/unselected" />
<!-- Pressed tab -->
<item android:state_pressed="true"
android:drawable="#drawable/selected" />
</selector>
Text colors:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:color="#color/my_selected_color" />
<!-- Inactive tab -->
<item android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:color="#color/my_unselected_color" />
<!-- Pressed tab -->
<item android:state_pressed="true"
android:color="#color/my_selected_color" />
</selector>
You should use a StateListDrawable for your images within each tab.
For example, let's say in your my_tablayout_tab_recipes there is your knife and spoon image.
You should assign an xml file as a background for that image, in which you could decide the selected and unselected version of your image.
Reference
There's no need to change by yourself the background images for selected and unselected state; the android system will take care of that for you.
Related
Sorry if this question have been asked before.
I want to change icon when it is selected in tab of tab layout. How can I do this using selector?.
I have two tabs in my application on selected state icon should change.
1. create a custom tab selector- You need to add both state selected true and false
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home_fill"
android:state_selected="true"/>
<item android:drawable="#drawable/home_line"
android:state_selected="false"/>
</selector>
2. Add the custom tab selector drawable as the icon for tabItem
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/footer"
app:tabIndicatorColor="#color/female_colour">
<android.support.design.widget.TabItem
android:id="#+id/tab_home"
android:layout_width="#dimen/_25dp"
android:layout_height="#dimen/_25dp"
android:padding="#dimen/_4dp"
android:icon="#drawable/tab_home"
/>
</android.support.design.widget.TabLayout>
Code is Tested on Android version 7.1.1
Please try this
tabLayout.getTabAt(0).setIcon(R.drawable.selector);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.setIcon(selectedImageResources[tab.getPosition()]);
getSupportActionBar().setTitle(pageTitles[tab.getPosition()]);
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.setIcon(imageResources[tab.getPosition()]);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
To make tab selector and deselector you can use this way
1.Create Custom view and Inflate it:
private View getTabView(int imgDrawable) {
View view = getLayoutInflater().inflate(R.layout.tab_view, null);
ImageView imgTab = (ImageView) view.findViewById(R.id.imgTab);
imgTab.setImageDrawable(getResources().getDrawable(imgDrawable));
return view;
}
2.Create drawable Selector
tab_home_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_home_selected" android:state_selected="true" />
<item android:drawable="#drawable/ic_home_deselected" />
</selector>
3.Insert in tab:
tabDashboardLayout = (TabLayout) findViewById(R.id.tabDashboardLayout);
//Adding the tabs using addTab() method
View tabView = getTabView(R.drawable.tab_home_selector);;
tabDashboardLayout.addTab(tabDashboardLayout.newTab().setCustomView(tabView));
For individual tab you to have create individual drawable selector and add to tab
please Check these question you will get your answer
TabLayout selected Tab icon is not selected on start up:
Change icon and title color when selected in android design library TabLayout
I have a TabLayout (design support library) which is tied up to a ViewPager containing three tabs. I have designed a custom layout and set that to each tab in the TabLayout. I have been trying to change the background color of the currently selected tab. The color only wraps up around the text in the tab but doesn't occupy the entire tab space.
Below are the code snippets of my activity and the custom layout file.
Activity code
public class CustomTabLayoutActivity extends AppCompatActivity {
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_tab_layout);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
setupTabLayout();
viewPager.setCurrentItem(0);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
for (int i = 0; i < tabLayout.getTabCount(); i++) {
if (i == position) {
tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
} else {
tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
}
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setupViewPager(ViewPager viewPager) {
CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
pagerAdapter.addFragments(new OneFragment(), "ONE");
pagerAdapter.addFragments(new OneFragment(), "TWO");
pagerAdapter.addFragments(new OneFragment(), "THREE");
viewPager.setAdapter(pagerAdapter);
}
private void setupTabLayout() {
TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
customTab1.setText("ONE");
tabLayout.getTabAt(0).setCustomView(customTab1);
customTab2.setText("TWO");
tabLayout.getTabAt(1).setCustomView(customTab2);
customTab3.setText("THREE");
tabLayout.getTabAt(2).setCustomView(customTab3);
}
}
Custom Layout file for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#ffffff"
android:text="Test"
android:textColor="#android:color/black"
android:textSize="20sp" />
Here is the screenshot of the tabs after running the above code.
As you guys can see, the color only occupies the text in the tab but not the entire tab space. How to achieve this? Any ideas/suggestions would help me a lot. Thanks in advance.
Define a selector as a drawable, and also have a drawable for the selected/unselected states.
For this solution, I started with the code from this answer, and then added the functionality that changes the background color for the current Tab.
First, the selector, tab_background.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="#drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
Then, tab_background_selected.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d13fdd1a" />
</shape>
Then, tab_background_unselected.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
Finally, in your styles.xml, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor property in the TabLayout will now be ignored:
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">#drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
Result with the example colors above:
Additional Note:
Tested with the 23.3.0 versions of the support library components:
dependencies {
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'
compile 'com.android.support:recyclerview-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:support-v4:23.3.0'
}
you should use:
app:tabBackground="#drawable/tab_selector"
android:background="#color/colorNormal"
tab_selector.xml (in Drawable Folder):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/colorSelected"/>
<item android:state_selected="false" android:drawable="#color/colorNormal"/>
</selector>
Tabs with Ripple effect:
In addition to Daniel Nugent's answer It would be beautiful to add a ripple effect to tabs. In order to achieve this, you must add these two drawables to drawable-v21 folder:
tab_background_selected.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#63D25B"> <!-- ripple color -->
<item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>
tab_background_unselected.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#606FC7"> <!-- ripple color -->
<item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>
I know that its quite late to answer this question, but have a different & simple answer without creating any new background or selector.
Tab-Layout have default padding of 12dp at its start & end. Just set
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
to fill color in your tab.
How to change color of tab when its selected, see below screen shot:
i am showing Orange color in ActionBar, in a same way i wanna show orange color in place of light blue.
To show Orange color in ActionBar background, i am using below code:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#FF4444</item>
</style>
</resources>
I really recommend you to use the Actionbar Style Generator.
With that tool you can easily theme your graphic elements in your toolbar.
put this function and call it to yout Activity and pass tabhost as a parameter
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.header_blank); // unselected
}
tabhost.getTabWidget().setCurrentTab(0);
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundResource(R.drawable.tab_selected_new); // selected
// //have
// to
// change
}
call this as following way
setTabColor(tabHost);
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
#Override
public void onTabChanged(String arg0) {
setTabColor(tabHost);
}
});
hope this is useful to you
myTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
#Override
public void onTabChanged(String tabId) {
int tab = myTabHost.getCurrentTab();
View view = myTabHost.getTabWidget().getChildAt(tab).setBackgroundColor(Color.CYAN);
}
});
use this code in order to change the color of selected tab:-
tabLayout.setTabTextColors(Color.parseColor("color_for_unselected_tab"), Color.parseColor("color_for_tab"));
for tab-indicator
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#627179")));
To change tab bar background:
actionBar.setStackedBackgroundDrawable(new ColorDrawable(yourOwnColor));
Create an selector file which consist your desire color apply on tab xml like below:
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) Josh Clemm 2010
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true" android:state_focused="false"
android:state_pressed="false" android:drawable="#drawable/dm_tab_highlight" />
<!-- Inactive tab -->
<!-- <item android:state_selected="false" android:state_focused="false" -->
<!-- android:state_pressed="false" android:drawable="#drawable/tabbarbg" /> -->
<!-- Pressed tab -->
<item android:state_pressed="true" android:drawable="#drawable/dm_tab_highlight" />
</selector>
You can use this code and set icon alpha , it look like one is selected and other are disable.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position) {
case 0:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 1:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 2:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 3:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(255);
break;
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
// you can change tab text and indicator using this
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/gray2"
app:tabSelectedTextColor="#color/orange2"
app:tabIndicatorColor="#color/orange2"/>
</com.google.android.material.appbar.AppBarLayout>
you can use like this
tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_background" />// for selected
<item android:drawable="#drawable/tab" /> // for normal
</selector>
you can use this code and set the background of your item_tab xml file
tab_selection.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false"
android:drawable="#drawable/tab_bg_selected" />
<item android:state_selected="false" android:state_pressed="false"
android:drawable="#drawable/tab_bg_unselected" />
<item android:state_pressed="true"
android:drawable="#drawable/tab_bg_pressed" />
</selector>
Use this line app:tabSelectedTextColor="#color/colorPrimaryDark" in your xml
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="scrollable"
android:layout_alignParentBottom="true"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabIndicatorColor="#color/colorPrimaryDark"
>
</com.google.android.material.tabs.TabLayout>
In Android, I have a GridView - each cell in the GridView is an ImageView. When a user clicks on a cell, I would like that cell to be "selected" (have its background turn blue), and all other cells to "unselect" (have their backgrounds turn white).
I have implemented the following background drawable, but it only changes the background while the cell is pressed:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/iconborder_selected" /> <!-- pressed -->
<item android:drawable="#drawable/iconborder_unselected" /> <!-- default -->
</selector>
EDIT: Here is my adapter code for the GridView.
class IconAdapter extends BaseAdapter {
private Context context = null;
private List<Drawable> icons = new ArrayList<Drawable>();
public IconAdapter(Context context) {
this.context = context;
for (Field f : R.drawable.class.getFields()) {
String path = f.getName();
if (path.contains("icon_")) {
int id = context.getResources().getIdentifier(path, "drawable",
context.getPackageName());
Drawable drawable = context.getResources().getDrawable(id);
icons.add(drawable);
}
}
}
#Override
public int getCount() {
return icons.size();
}
#Override
public Object getItem(int position) {
return icons.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView iv = new ImageView(context);
iv.setImageDrawable(icons.get(position));
iv.setBackgroundResource(R.drawable.iconborder);
return iv;
}
}
You should add state_selected too:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/iconborder_selected" /> <!-- selected -->
<item android:state_pressed="true"
android:drawable="#drawable/iconborder_pressed" /> <!-- pressed -->
<item android:state_pressed="false"
android:drawable="#drawable/iconborder_unselected" /> <!-- default -->
</selector>
Try in the XML declaration of the GridView to put these lines:
<GridView
<!-- Some stuff here, like id, width, e.t.c. -->
android:drawSelectorOnTop="true"
android:listSelector="path_to_your_selector"
/>
And your selector should contain something like this:
<item android:state_pressed="true">
<shape>
<!-- Or a drawable here -->
</shape>
</item>
<item android:state_focused="true">
<shape>
<!-- Or a drawable here -->
</shape>
</item>
<item android:drawable="#android:color/transparent" />
Hi i'm trying to change the color of my tab widget but when i run the app it doesnt change does anyone know why?
heres my code where i try to change the color of my tabhost both unselected and selected
public static void setTabColor(TabHost tabhost) {
for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
{
tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#666666")); //unselected
}
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("#FFFFFF")); // selected
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tablayout);
checkInternet();
checkPreferences();
TabHost tabHost = getTabHost();
// setTabColor(tabHost);
// Tab for Photos
TabSpec resultsspec = tabHost.newTabSpec("Results");
// setting Title and Icon for the Tab
resultsspec.setIndicator("Results", getResources().getDrawable(R.drawable.miresults_tab));
Intent photosIntent = new Intent(this, MIResults.class);
resultsspec.setContent(photosIntent);
// setTabColor(tabHost);
// Tab for Songs
TabSpec Fixturesspec = tabHost.newTabSpec("Fixtures");
Fixturesspec.setIndicator("Fixtures", getResources().getDrawable(R.drawable.mifixtures_tab));
Intent songsIntent = new Intent(this, MIFixtures.class);
Fixturesspec.setContent(songsIntent);
TabSpec tablespec = tabHost.newTabSpec("Table");
tablespec.setIndicator("Table", getResources().getDrawable(R.drawable.mitable_tab));
Intent videosIntent = new Intent(this, MITable.class);
tablespec.setContent(videosIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(resultsspec);
tabHost.addTab(Fixturesspec);
tabHost.addTab(tablespec);
}
You'll need to create a drawable selector, similar to:
mytab.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_v4" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_v4" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true" android:drawable="#drawable/tab_press" />
</selector>
to handle each of the states of the tab. Each of the drawables, like tab_focus, is a 9-patch png.
You'll also need to override the tab layout to reference your drawable resource. I'd use a style with a parent that references the android default, then override the background property to reference your "drawable/mytab".