如何在Android中以编程方式更改TabLayout背景

Question

What i am doing is I am trying to change Toolbar , StatusBar and Tablayout color other than the default theme color pragmatically , i am able to successfully change the color of all widgets but getting some type of boundary of app theme's primary color in Tablayout don't know why ? can anyone tell me how to remove it ? Is any default style for it is defined as edges of Tablayout are also not rectangular.

Screen :

xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:id="@+id/app_bar_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".mainFlow.MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        android:background="@color/colorPrimaryDark"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/white"/>

</android.support.design.widget.AppBarLayout>


<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

Answer 1

Try this:

Your xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

and the selector res/drawable/tab_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

Or programmatically:

tabLayout.setBackground(ContextCompat.getDrawable(context, R.drawable.tab_color_selector));

Answer 2

I had the exact same problem. I wanted to change the entire tablayout not only the tab selected because I am using it with day/night mode. I solved it by checking the boolean that I have set for night theme prior to setting the content view in onCreate.

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

    SharedPreferences nightModeSwitchState = getSharedPreferences("NightModeSwitchState", 0);
    mNightModeSwitchState = nightModeSwitchState.getBoolean("NightModeSwitchState", false);

    if (mNightModeSwitchState) {
        setContentView(R.layout.activity_book_night);
    } else {
        setContentView(R.layout.activity_book);
    }

I have two layouts made both include tabLayouts. One of them references a style file for tabLayout set to night mode colors with the dark background and the layout references a style file set to regular colors for the tablayout.

<style name="CategoryTab" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    <item name="tabBackground">@drawable/tab_regular_theme</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

<style name="CategoryTabNight" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    <item name="tabBackground">@drawable/tab_layout_dark_mode</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

The style files reference different drawables that control the background colors as you can see above.. and here are the drawables...

Here is night mode drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/dark_grey" android:state_selected="true"/>
<item android:drawable="@color/dark_grey"/>
</selector>

Here is regular mode drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/app_bar" android:state_selected="true"/>
<item android:drawable="@color/app_bar"/>
</selector>

Everything else is the layouts are identical as not to mess anything up just the style files for the tablayouts are changed. I hope this makes sense. I tested it and it works for me. I have tried so many other things and nothing worked. It is important to call Shared Preference to get the value before checking the boolean. I hope this helps someone.

Answer 3

In my case, I've set tabs background color as transparent:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabBackground="@android:color/transparent"/>

and then I just set TabLayout background color in code:

tabs.setBackgroundColor()

Answer 4

You can set the theme for the TabLayout.

<style name="MyTabLayout" parent="android:Widget">
      <item name="tabBackground">@drawable/tab_background</item> 
</style>

and set this theme to your TabLayout.