Custom background for Action bar tabs with Sherlock Fragment in Android

Question

I've created a class with Sherlock Fragment to enable the Swipe view with ViewPager. Now I'm trying to change the tab background which was possible in tabspec using setBackgroundResource() method but It's not working. I would like to add custom background for each tabs while its being focused/selected/not selected.

I tried using a selector but It didn't worked

<item android:drawable="@drawable/selected" android:state_selected="true"/>
<item android:drawable="@drawable/not_selected" android:state_selected="false"/>

mActionBar.setStackedBackgroundDrawable(getResources().getDrawable(
                R.drawable.tab_indicator)); 

Here is my main class

public class MainActivity extends SherlockFragmentActivity {

    // Declare Variables
    ActionBar mActionBar;
    ViewPager mPager;
    Tab tab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Get the view from activity_main.xml
        setContentView(R.layout.activity_main);

        // Activate Navigation Mode Tabs
        mActionBar = getSupportActionBar();
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Locate ViewPager in activity_main.xml
        mPager = (ViewPager) findViewById(R.id.pager);

        // Activate Fragment Manager
        FragmentManager fm = getSupportFragmentManager();

        // Capture ViewPager page swipes
        ViewPager.SimpleOnPageChangeListener ViewPagerListener = new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                // Find the ViewPager Position
                mActionBar.setSelectedNavigationItem(position);
            }
        };

        mPager.setOnPageChangeListener(ViewPagerListener);
        // Locate the adapter class called ViewPagerAdapter.java
        ViewPagerAdapter viewpageradapter = new ViewPagerAdapter(fm);
        // Set the View Pager Adapter into ViewPager
        mPager.setAdapter(viewpageradapter);

        // Capture tab button clicks
        ActionBar.TabListener tabListener = new ActionBar.TabListener() {

            @Override
            public void onTabSelected(Tab tab, FragmentTransaction ft) {
                // Pass the position on tab click to ViewPager
                mPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(Tab tab, FragmentTransaction ft) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onTabReselected(Tab tab, FragmentTransaction ft) {
                // TODO Auto-generated method stub
            }
        };

        // Create first Tab
        tab = mActionBar.newTab().setText("Tab1").setTabListener(tabListener);
        mActionBar.addTab(tab);

        // Create second Tab
        tab = mActionBar.newTab().setText("Tab2").setTabListener(tabListener);
        mActionBar.addTab(tab);

        // Create third Tab
        tab = mActionBar.newTab().setText("Tab3").setTabListener(tabListener);
        mActionBar.addTab(tab);

    }

}

Answer 1

This is based on something I just did (and my, what a pain it was). I haven't tried compiling this but hopefully it helps. Good Luck!

In main activity's onCreate method, replace your addTab statements with this:

    ActionBar.Tab tab1 = mActionBar.newTab().setTabListener(tabListener);
    //Create a temporary RelativeLayout and inflate it with your custom layout
    RelativeLayout rl1 = (RelativeLayout) getLayoutInflater().inflate(R.layout.tabLayout, null);

    //Set the title of the tab
    TextView t1 =  (TextView) rl1.findViewById(R.id.tab1_text);
    t1.setText("Tab1 Title");
    t1.setMinimumWidth(150);//Prevents the tabs from becoming too small on larger screens, Change as needed

    //Set the background of the tab to the layout you just created
    tab1.setCustomView(rl1);
    //Add the tab to your ActionBar
    mActionBar.addTab(tab1);

tab1Layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:background="@drawable/yourDrawable"
android:layout_margin="0dp">

<TextView
    android:id="@+id/tab1_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    style="@style/yourStyleIfYouWantToUseOne"
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:gravity="center|center_horizontal"
    android:textStyle="bold"/>
</RelativeLayout>

Basically, we're creating a "fake" tab by just putting a TextView in a layout and adding a background.

As and additional note, your drawable needs to include a selector for both the selected and unselected drawables. If you need an example, look at what is generated by the Android Asset Studio , which is what I used to make my tabs.

Repeat this for as many tabs as you need.

If any part of this is vague or confusing, feel free to ask questions. ;)