Add a different color for each action bar tabs separately

Question

I need to add a different color for every tabs.

For Eg: like this below image

enter image description here

MainActivity.java:

// Add New Tab

actionBar.addTab(actionBar.newTab().setText("Home")
        .setTabListener(tabListener));

actionBar.addTab(actionBar.newTab().setText("News")
        .setTabListener(tabListener));
actionBar.addTab(actionBar.newTab().setText("Latest")
        .setTabListener(tabListener));

Home.java:

public class Home extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View v = inflater
                .inflate(R.layout.fragment_home, container, false);
        ((TextView) v.findViewById(R.id.textView)).setText("Home");


        return v;
    }
}

styles.xml:

<resources>

    <style name="AppBaseTheme" parent="android:Theme.Light">

    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

    </style>

</resources>

Right now I am created the three tabs.Now I need to add a different color for each tab separately.I need some suggestion regarding to this.Thank you.

have a look this is called tabwidget in android see this example we can create any type of tebwiget http://www.learn-android-easily.com/2013/07/android-tabwidget-example.html — Naveen Tamrakar, Nov 13 '14 at 06:22
@NaveenTamrakar it seems you doesn't understood my question.I need to add a color thats it.I am created the action bar tabs successfully. — Stephen, Nov 13 '14 at 06:26

score 1 · Accepted Answer · answered Nov 18 '14 at 12:02

yes,finally I done it.

MainActivity.java:

public class MainActivity extends FragmentActivity {
    static ViewPager Tab;
    TabsPagerAdapter TabAdapter;
    ActionBar actionBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        Tab = (ViewPager) findViewById(R.id.pager);

        Tab.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                actionBar = getActionBar();
                actionBar.setSelectedNavigationItem(position);
            }
        });

        Tab.setAdapter(TabAdapter);
        actionBar = getActionBar();
        // Enable Tabs on Action Bar
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.TabListener tabListener = new ActionBar.TabListener() {
            @Override
            public void onTabReselected(android.app.ActionBar.Tab tab,
                    FragmentTransaction ft) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                Tab.setCurrentItem(tab.getPosition());
            }

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

        LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

        ActionBar.Tab tab = actionBar.newTab().setText("Home")
                .setTabListener(new TabListener(this, Home.class.getName()));
        View tabView = inflater.inflate(R.layout.fragment_home, null);
        tabView.setBackgroundResource(R.drawable.gradient_shape); // set custom
                                                                    // color

        tab.setCustomView(tabView);
        actionBar.addTab(tab);

        tab = actionBar.newTab().setText("News")
                .setTabListener(new TabListener(this, News.class.getName()));
        View tabView2 = inflater.inflate(R.layout.fragment_news, null);
        tabView2.setBackgroundResource(R.drawable.gradient_shape2); // set
                                                                    // custom
                                                                    // color
        tab.setCustomView(tabView2);
        actionBar.addTab(tab);

        tab = actionBar.newTab().setText("Latest")
                .setTabListener(new TabListener(this, Latest.class.getName()));
        View tabView3 = inflater.inflate(R.layout.fragment_latest, null);
        tabView3.setBackgroundResource(R.drawable.gradient_shape3); // set
                                                                    // custom
                                                                    // color
        tab.setCustomView(tabView3);
        actionBar.addTab(tab);

    }

    public static class TabListener extends Fragment implements
            ActionBar.TabListener {

        public TabListener(MainActivity mainActivity, String name) {
            // this(mainActivity,name);
        }

        @Override
        public void onTabSelected(android.app.ActionBar.Tab tab,
                FragmentTransaction ft) {
            Tab.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(android.app.ActionBar.Tab tab,
                FragmentTransaction ft) {

        }

        @Override
        public void onTabReselected(android.app.ActionBar.Tab tab,
                FragmentTransaction ft) {

        }

    }

}

gradient_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="4dp" />

    <stroke
        android:width="1dp"
        android:color="#0078a5" />

    <gradient
        android:angle="90"
        android:endColor="#00adee"
        android:startColor="#0078a5" />

    <padding
        android:bottom="25dp"
        android:left="50dp"
        android:right="50dp"
        android:top="25dp" />

</shape>

Output:

enter image description here

Hope it will be helpful.

score 0 · Answer 2 · answered Nov 13 '14 at 07:39

You cannot set a different background color on the action bar tabs as they take the color from the action bar itself and thus, they can all be the same color - one color, as the action bar.

If you want to get each tab a different color then you will have to write custom views (Button widgets in a horizontal LinearLayout with view pager) to simulate the behavior of tabs.

Add a different color for each action bar tabs separately

2 Answers2

Linked