How to set TabLayout background to transparent

Question

I need to change TabLayout (extending HorizontalScrollView) background to transparent without changing primary color from styles. If I set a background to #00000000 it becomes primaryColor. If I set alpha to 0 - I get the same behavior.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:hapticFeedbackEnabled="true"/>

Is there any way to set background color transparent without changing styles colors?

Answer 1

Use:

 android:background="@android:color/transparent"

also in the AppBarLayout. to remove the shadow to make look better you can remove the elevation of the AppBarlayout with:

 app:elevation="0dp"

Answer 2

If you are using <android.support.design.widget.AppBarLayout />, you have to insert your TabLayout outside of it.

<!-- App Bar -->
<android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/app_bar"
            ......
            android:background="@color/app_bar_color"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>

<!-- Tab Layout -->
<android.support.design.widget.TabLayout
       android:id="@+id/tabs"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@android:color/transparent"
       android:hapticFeedbackEnabled="true"/>

The Result will be like this

Answer 3

Try this

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:alpha="0.3"
    android:background="@android:color/black"
    android:hapticFeedbackEnabled="true"/>

it works for me.