CODEWITHSUNDEEP
androidcolorstabs
xsonz
xsonz

Reputation: 109

Android Change each tab individual background color

I am trying to setup three tabs,each in a different color. This is the look i am going for.

http://i60.tinypic.com/261ff5u.png

Here is the relevant code:

 // Initilization
    viewPager = (ViewPager) findViewById(R.id.pager);
    actionBar = getActionBar();
    mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

    viewPager.setAdapter(mAdapter);
    actionBar.setHomeButtonEnabled(false);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);


    LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

    ActionBar.Tab tab = actionBar.newTab()
            .setText("Tab1")
            .setTabListener(
                    new MyTabListener(this, UrgentFragment.class.getName()));
    View tabView = inflater.inflate(R.layout.ab_red, null);
    tabView.setBackgroundResource(R.drawable.red); // set custom color
    tab.setCustomView(tabView);
    actionBar.addTab(tab);

    tab = actionBar.newTab()
            .setText("Tab2")
            .setTabListener(
                    new MyTabListener(this, ImportantFragment.class.getName()));
    View tabView2 = inflater.inflate(R.layout.ab_yellow, null);
    tabView2.setBackgroundResource(R.drawable.yellow); // set custom color
    tab.setCustomView(tabView2);
    actionBar.addTab(tab);

    tab = actionBar.newTab()
            .setText("Tab3")
            .setTabListener(
                    new MyTabListener(this, InfoFragment.class.getName()));
    View tabView3 = inflater.inflate(R.layout.ab_green, null);
    tabView3.setBackgroundResource(R.drawable.green); // set custom color
    tab.setCustomView(tabView3);
    actionBar.addTab(tab);

Please help me out, I'd appreciate it.

P.S. Sorry for tinypic links, I can't post images directly (not enough reputations)

EDIT: I finally managed to get the look I was going for! So, to anyone who is looking for a solution to a same problem as I had, here is how I did it.

I had a custom theme in themes.xml and I added "MyActionBar" to styles

    <style name="CustomActionBarTheme"
    parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:radioButtonStyle">@style/RadioButtonRadioRed</item>
    <item name="android:listChoiceIndicatorSingle">@drawable/radiored_btn_radio_holo_light</item>
</style>

"MyActionBar" style now looks like this:

    <!-- ActionBar styles -->
<style name="MyActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">#f5f5f5</item>
    <item name="android:backgroundStacked">@drawable/all_colors</item>
</style>

The line of code you are interested in is "android:backgroundStacked". I created a png with colors I needed ("all_colors") and added it to backgroundStacked.

That's it.

This is the result:

http://i59.tinypic.com/9h50rt.png

Upvotes: 1

Views: 3308

Answers (1)

xsonz
xsonz

Reputation: 109

I finally managed to get the look I was going for! So, to anyone who is looking for a solution to a same problem as I had, here is how I did it.

I had a custom theme in themes.xml and I added "MyActionBar" to styles

<style name="CustomActionBarTheme"
parent="@android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:radioButtonStyle">@style/RadioButtonRadioRed</item>
<item name="android:listChoiceIndicatorSingle">@drawable/radiored_btn_radio_holo_light</item>

"MyActionBar" style now looks like this:

<style name="MyActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#f5f5f5</item>
<item name="android:backgroundStacked">@drawable/all_colors</item>

The line of code you are interested in is "android:backgroundStacked". I created a png with colors I needed ("all_colors") and added it to backgroundStacked.

That's it.

This is the result:

http://i59.tinypic.com/9h50rt.png

Upvotes: 3

Related Questions