Search code examples
androidbackgroundtransparencyandroid-support-libraryandroid-4.4-kitkat

Android elements have white background behind the text on pre-lollipop and lower api versions


I use TabLayout for ViewPager

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_color_selector" />

but here's the result

elements with white background at kitkat

tab_color_selector has 2 items with state_selected="true" and default. I also tried using tags like theese, but with no success:

android:background="@android:color/holo_blue_dark"
app:tabBackground="@android:color/holo_blue_dark"
app:tabIndicatorColor="@android:color/holo_blue_dark"

Project includes all neccessary dependencies afaik

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:cardview-v7:25.3.1'
compile 'com.android.support:design:25.3.1'
compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:support-v4:25.3.1'

also tried

vectorDrawables.useSupportLibrary = true

Works perfectly at lollipop and newer api's. elements displays great at api 22

as you can see, tere is also png image in toolbar's menu that also doesn't have transparent background. I add imade like that

toolbar.getMenu().getItem(0).setIcon(R.drawable.ic_menu);

xml:

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

I really need help. If you have any ideas why background isn't transparent, please, let me know. Thank you

UPD:

I found that my base application theme has background tags (I accidentally recently added them and completely forgot about it). Removing them solved the issue.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:background">@android:color/white</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:colorBackground">@android:color/white</item>
</style>

However, it is strange that they worked only on pre-lollipop api.

I suppose Mahesh's answer would also work. So I learned a lesson: check your styles, if something is not displayed correctly:)


Solution

  • Use custom style like

     <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_color_selector"
    
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            style="@style/MyCustomTabLayout"
            />
    

    and in your style file

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTabText</item>
        <item name="tabSelectedTextColor">@color/ColorPrimary</item>
    </style>