How to customize individual tabs? (changing background color, indicator color and text color)
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 View
s corresponding to the above id
s in your xml layout file (and not style
s).
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".
![Shishi](https://i.stack.imgur.com/6yCD5.jpg?s=256&g=1)
Shishi
I'm a dutch Game Development student at MBO level 4: Middle Management VET. It lasts 4 years and prepares for jobs with higher responsibility. It also opens the gates to Higher education(Bachelors degree). I am currently studying android and iOS app development at internship. My future goal is to work in Human Kinetic Technology in which they use MatLab.
Updated on July 09, 2022Comments
-
Shishi almost 2 years
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 :
ctv = new CustomView(context, R.attr.tabStyleAttr);
In this code it says : context cannot be resolved to a variable
I want to apply specific style to tabs and that's why setting theme doesn't work for me. Any alternative to my problem is welcome too of course.
I try to change the background color, indicator color and text color of actionbar tabs.
@Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { CustomView ctv; ctv = new CustomView(this, R.attr.tabStyleAttr); tab.setCustomView(ctv); mViewPager.setCurrentItem(tab.getPosition()); }
styles.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="Theme.Ab" parent="@android:style/Theme.Holo.Light"> <item name="android:actionBarStyle">@style/abStyle</item> <item name="@attr/actionBarTabStyle">@style/tabStyle</item> <item name="android:actionBarTabTextStyle">@style/tabTextColor</item> </style> <style name="abStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid"> <item name="android:background">@drawable/ab_solid_style</item> <item name="android:backgroundStacked">@drawable/ab_stacked_solid_style</item> <item name="android:backgroundSplit">@drawable/ab_bottom_solid_style</item> <item name="android:height">100dp</item> </style> <style name="tabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView"> <item name="android:background">@drawable/tab_indicator_ab_style</item> </style> <style name="tabTextColor" parent="@android:style/Widget.Holo.Light.ActionBar.TabText"> <item name="android:textColor">@android:color/white</item> </style> </resources>
MainActivity.java (onCreate)
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Create the adapter that will return a fragment for each of the three primary sections // of the app. mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager()); // Set up the action bar. final ActionBar actionBar = getActionBar(); //set custom actionbar actionBar.setCustomView(R.layout.titlebar); //Displays the custom design in the actionbar actionBar.setDisplayShowCustomEnabled(true); //Turns the homeIcon a View View homeIcon = findViewById(android.R.id.home); //Hides the View (and so the icon) ((View)homeIcon.getParent()).setVisibility(View.GONE); // Specify that we will be displaying tabs in the action bar. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Set up the ViewPager, attaching the adapter and setting up a listener for when the // user swipes between sections. mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mAppSectionsPagerAdapter); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { // When swiping between different app sections, select the corresponding tab. // We can also use ActionBar.Tab#select() to do this if we have a reference to the Tab. actionBar.setSelectedNavigationItem(position); } }); // For each of the sections in the app, add a tab to the action bar. for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) { // Create a tab with text corresponding to the page title defined by the adapter. // Also specify this Activity object, which implements the TabListener interface, as the // listener for when this tab is selected. Tab tab = actionBar.newTab().setText(mAppSectionsPagerAdapter.getPageTitle(i)).setTabListener(this); actionBar.addTab(tab); } }
This is what I want to make:
As for the new result using Views this happened
MainActivity.java
package com.example.android.effectivenavigation; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MainActivity extends FragmentActivity implements ActionBar.TabListener { AppSectionsPagerAdapter mAppSectionsPagerAdapter; //The viewpager displays on of the section at a time ViewPager mViewPager; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Create the adapter that will return a fragment for each of the three primary sections // of the app. mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager()); // Set up the action bar. final ActionBar actionBar = getActionBar(); //set custom actionbar actionBar.setCustomView(R.layout.titlebar); //Displays the custom design in the actionbar actionBar.setDisplayShowCustomEnabled(true); //Turns the homeIcon a View View homeIcon = findViewById(android.R.id.home); //Hides the View (and so the icon) ((View)homeIcon.getParent()).setVisibility(View.GONE); // Specify that we will be displaying tabs in the action bar. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Set up the ViewPager, attaching the adapter and setting up a listener for when the // user swipes between sections. mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mAppSectionsPagerAdapter); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { // When swiping between different app sections, select the corresponding tab. // We can also use ActionBar.Tab#select() to do this if we have a reference to the Tab. actionBar.setSelectedNavigationItem(position); } }); /*final Tab firstTab = actionBar.newTab() .setText(mAppSectionsPagerAdapter.getPageTitle(0)) .setTabListener(this) .setCustomView(R.id.nieuws_tab_layout); /*final Tab secondTab = actionBar.newTab() .setText(mAppSectionsPagerAdapter.getPageTitle(1)) .setCustomView(R.id.nieuws_tab_layout); final Tab thirdTab = actionBar.newTab() .setText(mAppSectionsPagerAdapter.getPageTitle(2)) .setCustomView(R.id.nieuws_tab_layout); actionBar.addTab(firstTab); actionBar.addTab(secondTab); actionBar.addTab(thirdTab);*/ // For each of the sections in the app, add a tab to the action bar. for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) { if(i == 0) { final View firstCustomView = new CustomView(this); //firstCustomView.setBackgroundColor(Color.BLUE); Tab tab = actionBar.newTab().setText(mAppSectionsPagerAdapter.getPageTitle(i)).setTabListener(this).setCustomView(R.layout.nieuws_tab_layout); actionBar.addTab(tab); } else { // Create a tab with text corresponding to the page title defined by the adapter. // Also specify this Activity object, which implements the TabListener interface, as the // listener for when this tab is selected. Tab tab = actionBar.newTab().setText(mAppSectionsPagerAdapter.getPageTitle(i)).setTabListener(this); actionBar.addTab(tab); } } } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { //CustomView ctv; //ctv = new CustomView(context, R.attr.tabStyleAttr); // When the given tab is selected, switch to the corresponding page in the ViewPager. //LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE); //View tabView = inflater.inflate(R.layout.nieuws_tab_layout, null); //tabView.setBackgroundColor(0xFF00FF00); //tab.setCustomView(tabView); mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } public static class AppSectionsPagerAdapter extends FragmentPagerAdapter { public AppSectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { switch (i) { case 0: // The first section of the app is the most interesting -- it offers // a launchpad into the other demonstrations in this example application. return new LaunchpadSectionFragment(); default: // The other sections of the app are dummy placeholders. Fragment fragment = new DummySectionFragment(); Bundle args = new Bundle(); args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, i + 1); fragment.setArguments(args); return fragment; } } @Override public int getCount() { return 3; } @Override public CharSequence getPageTitle(int position) { switch(position) { case 0: { return "Tab1"; } case 1: { return "Tab2"; } case 2: { return "Tab3"; } default: { return "Section " + (position + 1); } } } } public static class LaunchpadSectionFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_section_launchpad, container, false); // Demonstration of a collection-browsing activity. rootView.findViewById(R.id.demo_collection_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(getActivity(), CollectionDemoActivity.class); startActivity(intent); } }); // Demonstration of navigating to external activities. rootView.findViewById(R.id.demo_external_activity).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Create an intent that asks the user to pick a photo, but using // FLAG_ACTIVITY_CLEAR_WHEN_TASK_RESET, ensures that relaunching // the application from the device home screen does not return // to the external activity. Intent externalActivityIntent = new Intent(Intent.ACTION_PICK); externalActivityIntent.setType("image/*"); externalActivityIntent.addFlags( Intent.FLAG_ACTIVITY_CLEAR_WHEN_TASK_RESET); startActivity(externalActivityIntent); } }); return rootView; } } /** * A dummy fragment representing a section of the app, but that simply displays dummy text. */ public static class DummySectionFragment extends Fragment { public static final String ARG_SECTION_NUMBER = "section_number"; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_section_dummy, container, false); Bundle args = getArguments(); ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.dummy_section_text, args.getInt(ARG_SECTION_NUMBER))); return rootView; } } public class CustomView extends View { public CustomView(Context context) { super(context, null); } } }
tab_layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/nieuws_tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/nieuws" android:gravity="center_vertical" android:layout_marginTop="15dp" android:textColor="@android:color/white" android:textStyle="bold" android:background="@android:color/black" /> </LinearLayout>
-
Shishi over 10 yearsI'm not trying to use a whole theme as it would apply on all tabs. I want to apply a style to a individual tab.Using this gives a warning saying ctv is not used. using getActivity gives a error saying getActivity is undefined
-
desseim over 10 yearsAs I wrote
getActivity()
is used from inside aFragment
, if you're in anActivity
just usethis
. Furthermore, looking at the code you added, you construct aView
and affect it to a variable (ctv
), but that's all. You need to do something with it then, for example apply it as the view for a given tab. -
Shishi over 10 yearsI forgot to set the view indeed. Now that I have set the view it still doesn't change it to my color settings.
-
desseim over 10 years2 things: replace
@attr/actionBarTabStyle
key withandroid:actionBarStyle
in your styles xml ; make sure you applyTheme.Ab
as a style of either the app or theActivity
(and the rightActivity
, not another one) as I highlighted at the end of my answer ; now you should at least see your custom drawables as background of background tabs. After that you can try to set a specific style for highlighted tabs. -
desseim over 10 years@Shishi see the link I added at the end of my answer too, you should find everything you need there.
-
Shishi over 10 yearsI have added my onCreate function in which I initialize my tabs. I have seen the documents but I couldn't find anything per tab specific. All 3 tabs behave the same.
-
Shishi over 10 yearsI have added some extra information and I made a example picture
-
desseim over 10 years@Shishi See the updated top of my answer, it should allow to do what you're trying to do. And don't touch the tab view in the onSelected callback, remove that.
-
Shishi over 10 yearsBoth examples causes the app to crash I modified it doing this :
Tab tab = actionBar.newTab().setText(mAppSectionsPagerAdapter.getPageTitle(i)).setTabListener(this).setCustomView(R.layout.nieuws_tab_layout); actionBar.addTab(tab);
as for the other oneactionBar.newTab().setText(mAppSectionsPagerAdapter.getPageTitle(0)) .setTabListener(this).setCustomView(firstCustomView);
-
Shishi over 10 yearsas you can see I can now use the TextViews to cover the tabs color but it wont fill the tab. As for the hairline I would probably be able to use a ImageView below all TextViews so the last problem to solve would be to fill the tab.
-
desseim over 10 years@Shi To "fill" the tab with the background color set the background of the root layout (in your example the
LinearLayout
), here you just set the background of theTextView
which doesn't expand to the whole area of the tab. For the line, retrieve each tab and update their layout inonTabSelected()
. This is starting to drift quite a lot so if you have further questions e.g. regarding the layout of your custom view I'd suggest you open new questions about each of your problems :) Feel free to comment or update here though if you still have questions about "How to customize individual tabs" -
Tara over 7 yearsi am using tabLayout, and i want third tab text color should be in red color irrespective of selection/not. can you help me out?
-
Tara over 7 yearsI answered below, it will be helpful for others.
-
Ananya Srivastav over 7 yearswhat if i want to apply color to single tab and another different color to another tab
-
Tara over 7 yearsi have given color to only one tab with setCustomView(), you can design for number of tabs. You have to define different layouts for different tabs.
-
Ananya Srivastav over 7 yearsCan you give me an example as a reference
-
Tara over 7 yearstabLayout.addTab(tabLayout.newTab().setText("FirstTab").setcustomview(R.layout.customDesignForfirsttab)); tabLayout.addTab(tabLayout.newTab().setText("SecondTab").setCustomView(R.layout.tabview));