Change tab color in Android

Question

I have these codes for my two tabs. I would like to change the color but I dont know how to do it. Should it be done in my java file, or in my xml ? Thank You

Here are my codes

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.widget.TabHost;

// This is now the first activity that you see when you enter the app, it derives from      TabActivity
public class TabsActivity extends TabActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    super.onCreate(savedInstanceState);



    // The activity displays a TabHost layout with a TabWidget below the actual  tab contents
    setContentView(R.layout.tabs);

    // Two tabs are added one displays the main list activity, the other an     info activity
    addNewTab("Kalender", MainActivity.class);
    addNewTab("Info", InfoActivity.class);
}


// This function defines and adds a tab to the interface
private void addNewTab(String name, Class<? extends Activity> activityClass)
{
    TabHost tabHost = getTabHost();

    // The new tab will display a separate activity, so it needs an intent for it
    Intent activityIntent = new Intent().setClass(this, activityClass);

    // The TabSpec sets the internal name and the visible name of the newly created    tab
    TabHost.TabSpec spec =     tabHost.newTabSpec(name).setIndicator(name).setContent(activityIntent);

    // Finally, the new tab is added to the TabHost
    tabHost.addTab(spec);
}
}

Answer 1

Hey if you want to change the tab color just like in Google Playstore try this:

public class MainActivity extends AppCompatActivity implements TabLayout.BaseOnTabSelectedListener {

private AppBarLayout appBarLayout;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private View mRevealView;
private View mRevealBackgroundView;

private int fromColor;

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

    appBarLayout = findViewById(R.id.main_appbar);
    toolbar = findViewById(R.id.main_toolbar);
    tabLayout = findViewById(R.id.main_tablayout);
    viewPager = findViewById(R.id.main_viewPager);
    mRevealView = findViewById(R.id.reveal);
    mRevealBackgroundView = findViewById(R.id.revealBackground);

    setUpTabs();

    setSupportActionBar(toolbar);

    fromColor = R.color.colorTabOne;
}

private void setUpTabs() {
    viewPager.setAdapter(new ViewPagerAdapter());
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.addOnTabSelectedListener(this);

    tabLayout.getTabAt(0).setText("TAB ONE");
    tabLayout.getTabAt(1).setText("TAB TWO");
    tabLayout.getTabAt(2).setText("TAB THREE");
}


@Override
public void onTabSelected(TabLayout.Tab tab) {
    switch (tab.getPosition()) {

        case 0:
            animateAppAndStatusBar(0, R.color.colorTabOne);
        break;

        case 1:
            animateAppAndStatusBar(appBarLayout.getWidth() / 2, R.color.colorTabTwo);
            break;

        case 2:
            animateAppAndStatusBar(appBarLayout.getWidth(), R.color.colorTabThree);
            break;

    }
}

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

}

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

}

private void animateAppAndStatusBar(int cx, final int toColor) {
    Animator animator = ViewAnimationUtils.createCircularReveal(
            mRevealView,
            cx,
            appBarLayout.getBottom(), 0,
            appBarLayout.getWidth() / 2);

    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            mRevealView.setBackgroundColor(getResources().getColor(toColor));
        }
    });

    mRevealBackgroundView.setBackgroundColor(getResources().getColor(fromColor));
    animator.setStartDelay(200);
    animator.setDuration(125);
    animator.start();
    mRevealView.setVisibility(View.VISIBLE);
    fromColor = toColor;
}

class ViewPagerAdapter extends FragmentPagerAdapter {

    ViewPagerAdapter() {
        super(MainActivity.this.getSupportFragmentManager());
    }

    @Override
    public Fragment getItem(int i) {
        switch (i) {
            case 0:
                return new TabOneFragment();

            case 1:
                return new TabTwoFragment();

            case 2:
                return new TabThreeFragment();

            default:
                throw new IllegalArgumentException("Invalid position " + i);
        }
    }

    @Override
    public int getCount() {
        return 3;
    }
}
}

You can check out my Github or Youtube tutorial

Answer 2

Changing text Color and Background color of TAB

    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
    {

        tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.WHITE); //Changing background color of tab

        TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); /*for Selected Tab changing text color*/
        tv.setTextColor(Color.BLACK);
    }

Answer 3

If you want to customize the look of your tabs, you should use your own tab widget. The thing is that most android widgets are themed using bitmaps, so you can't simply change the gradient color.

Some people suggest simply changing the backgroundColor of the standard widget, but it is going to look rather flat.

Using your own widget goes something like this:

// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                  res.getDrawable(R.drawable.ic_tab_artists))
              .setContent(intent);
tabHost.addTab(spec);

Also have a look at the Android style guide's tab section.

Answer 4

This is one way to make the background of a single tab have a color, and also to set one.

tabHost.getTabWidget().getChildAt(tabIndex).setBackgroundColor(color);