How to customize individual tabs? (changing background color, indicator color and text color)

Question

In this link : How do I apply a style programmatically?

Kevin Grant gave a explaination to this question my problem with his code is the context part. To be precise

Answer 1

I was using Tablayout, which is privided by AndroidStudio library. while adding tabs Just use setCustomView() to each and every tab which you would like to customize. something like below

    tabLayout.addTab(tabLayout.newTab().setText("FirstTab"));  // default tab
    tabLayout.addTab(tabLayout.newTab().setText("SecondTab").setCustomView(R.layout.tabview));  // Customized tab

And below is the layout design for particular Tab to fill our requirement, Here I am just makeing the Tab text color Different

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark">  <!-- TabLayout default color in my case -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Procurement"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small"
    android:textColor="@color/tab_selection"  <!-- textcolor which ever you like-->
    android:textStyle="bold"/>

</LinearLayout>

Answer 2

Just set your custom view at the tab creation time, something like:

final Tab firstTab = actionBar.newTab()
                              .setText(mAppSectionsPagerAdapter.getPageTitle(0))
                              .setCustomView(R.id.custom_tab_view_red);
final Tab secondTab = actionBar.newTab()
                               .setText(mAppSectionsPagerAdapter.getPageTitle(1))
                               .setCustomView(R.id.custom_tab_view_blue);
// etc

actionBar.addTab(firstTab);
actionBar.addTab(secondTab);
// etc

in inCreate().

You'll also have to define Views corresponding to the above ids in your xml layout file (and not styles).

Or, if you want to create the view directly:

final View firstCustomView = new CustomView(this);
firstCustomView.setBackgroundColor(Color.BLUE);  // or with drawable or resource
final Tab firstTab = actionBar.newTab()
                              .setText(mAppSectionsPagerAdapter.getPageTitle(0))
                              .setCustomView(firstCustomView);
actionBar.addTab(firstTab);
// then same for other tabs, just with another color

---

Leaving the below information for reference:

To define one such view, you need to specify it an Android Context. This is usually the Activity where the tabs will be displayed. Supposing that you initialize your tabs in an Activity, simply pass the Activity instance as a Context:

ctv = new CustomView(this, R.attr.tabStyleAttr);

if from inside the Activity, or for example:

ctv = new CustomView(getActivity(), R.attr.tabStyleAttr);

if from inside a Fragment, etc.

As for setting a specific style for action bar tabs, no need to go create a custom view programmatically as you're trying to. Read up a little about the action bar first, then check the example they provide. As you can see, you'll be able to specify the tab style in xml:

In your manifest file, you can apply the theme to your entire app:

<application android:theme="@style/CustomActionBarTheme" ... />

Or to individual activities:

<activity android:theme="@style/CustomActionBarTheme" ... />

for example.

For a complete example matching perfectly your use case, see this Android doc article: https://developer.android.com/training/basics/actionbar/styling.html#CustomTabs . Notice the usage of state-lists to achieve the "when selected style".

Answer 3

if another one using TabLayout as in my case i used this snippet

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.setCustomView(R.layout.chat_tab);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.setCustomView(null);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });