How to set TabLayout background to transparent

Question

I need to change the background of the TabLayout (extension HorizontalScrollView) to transparent, without changing the main color of the styles. If I set the background to # 00000000, it will become 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 a way to set the background transparency without changing the colors of the styles?

Answer 1

If you use <android.support.design.widget.AppBarLayout /> , you need 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 2

Using:

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

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

  app:elevation="0dp" 

Answer 3

Try it

 <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.