How to achieve transparent background for tab layout in collapsing toolbar ? and give a background or gradient effect to collapsing toolbar android?

Question

My app contains a collapsing toolbar with a tablayout. The tabs have an own background color, my @color/colorPrimary. Now I would like to 'merge' the tablayout and collapsing toolbar and it should both be transparent, so the background image reaches from the toolbar down including the tabs. Like it is not divided by the background anymore.

Some what like this is needed:

And this is what my app now looks like:

My code is as follows:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f3f3f3"
    tools:context="example.jocelinthomas.dictionary.WordMeaningActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="5dp"
            app:expandedTitleMarginStart="10dp"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/ExpandedTitleText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="180dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                android:scaleType="centerCrop"/>

            <ImageButton
                android:id="@+id/btnSpeak"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="bottom|right"
                android:layout_margin="15dp"
                android:background="@drawable/speaker"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            style="@style/TabStyle"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="@color/colorPrimary"
            app:tabGravity="center"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@color/white">

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

    </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.v4.view.ViewPager>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share" />


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

I want a b/g image or gradient effect to my collapsing toolbar and the tab layout background should be transparent as shown in the first image, How should I achieve this?

Answer 1

IT IS TOO EASY
Use this line of code inside TabLayout

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