On the ThemeActivity of my app, it's toolbars color varies on the subject, it can be brown, red or pink. I would like to change the colors of the text and background of the current selected tab on the TabLayout so it could match with the color of the Toolbar and to change too the colors of the text and background of the others tabs (so they have a white background with dark text).
I'm following this answer, which is good, but as the TabLayout is defined by his style on the style.xml, I can't see how could I change the style everytime a tag is changed and the text color too.
What I have now:
(For all colors)
What I want:
The ThemeActivity class:
public class ThemeActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_theme);
initializeFields();
}
private void initializeFields() {
String theme = getIntent().getStringExtra("Theme");
mToolbar = findViewById(R.id.themeToolbar);
setSupportActionBar(mToolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setTitle(theme);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
setToolbarColor(theme);
mTabLayout = findViewById(R.id.themeTabLayout);
mViewPager = findViewById(R.id.themeViewPager);
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), ThemeActivity.this);
mViewPager.setAdapter(pagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
private void setToolbarColor(String theme) {
if (theme.equals("Feminismo")) {
mToolbar.setBackgroundColor(getResources().getColor(R.color.flatFeminism));
} else if (theme.equals("Racismo")) {
mToolbar.setBackgroundColor(getResources().getColor(R.color.flatRacism));
} else {
mToolbar.setBackgroundColor(getResources().getColor(R.color.flatLgbt));
}
}
class PagerAdapter extends FragmentPagerAdapter {
String tabTitles[] = new String[]{"Sobre", "Comunidades", "Artigos"};
Context context;
public PagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int i) {
switch (i) {
case 0:
return new AboutFragment();
case 1:
return new CommunityFragment();
case 2:
return new ArticlesFragment();
default:
return null;
}
}
@Override
public int getCount() {
return tabTitles.length;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
public View getTabView(int position) {
View tab = LayoutInflater.from(ThemeActivity.this).inflate(R.layout.custom_tab, null);
TextView tv = tab.findViewById(R.id.custom_text);
tv.setText(tabTitles[position]);
return tab;
}
}
}
The part on the style.xml of the TabLayout
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">@drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
The activity_theme.xml (pretty standard view)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ThemeActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/themeBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="@+id/themeToolbar"
layout="@layout/main_toolbar"></include>
<android.support.design.widget.TabLayout
android:id="@+id/themeTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/themeToolbar">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/themeViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/themeBarLayout"></android.support.v4.view.ViewPager>
</RelativeLayout>
The rest is the same as Daniel Nugent answered. (tab_background.xml, tab_background_selected.xml, tab_background_unselected.xml, only the unselected color I've changed to #ffffff)
