Create transparent toolbar over map fragment

Question

i have implemented a transparent toolbar as action bar and tried it with many fragments, they were working fine, but once I use map fragment in that screen the map fragment overlaps the transparent toolbar.Is there any way to save this issue...This the screen

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/rl_trip_details">

        <fragment
            android:id="@+id/rt_fragment_map_sample"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/hire"
            style="@style/CommonButtonStyle"
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="@dimen/spacing_5"
            android:text="@string/for_hire" />

        <RelativeLayout
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@color/black_70_alpha"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_gps"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/spacing_5"
                android:layout_marginTop="@dimen/spacing_5"
                android:src="@drawable/ic_gps_fixed_black_24dp"
                android:tint="@color/accent" />

            <View
                android:id="@+id/view1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/iv_gps" />


            <ImageView
                android:id="@+id/iv_network"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/iv_gps"
                android:layout_alignStart="@+id/iv_gps"
                android:layout_below="@+id/view1"
                android:layout_marginBottom="@dimen/spacing_5"
                android:src="@drawable/ic_network_wifi_black_24dp"
                android:tint="@color/green" />

            <View
                android:id="@+id/view2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/iv_network" />

            <ImageView
                android:id="@+id/iv_driver"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/iv_gps"
                android:layout_alignStart="@+id/iv_gps"
                android:layout_below="@+id/view2"
                android:layout_marginBottom="@dimen/spacing_5"

                android:src="@drawable/ic_account_circle_black_24dp"
                android:tint="@color/accent" />

            <View
                android:id="@+id/view3"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/iv_driver" />
        </RelativeLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_trip_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@color/white">

        <LinearLayout
            android:id="@+id/ll_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_5"
            android:orientation="horizontal"
            android:weightSum="2">

            <TextView
                style="@style/CommonTextViewPrimaryStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="Travel Time"
                android:textColor="@color/secondary_text"
                android:textSize="@dimen/font_16" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />

            <TextView
                android:id="@+id/textView"
                style="@style/CommonTextViewPrimaryStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="Waiting Time"
                android:textColor="@color/secondary_text"
                android:textSize="@dimen/font_16" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_header_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ll_header"
            android:layout_marginBottom="@dimen/spacing_5"
            android:layout_marginTop="@dimen/spacing_5"
            android:orientation="horizontal"
            android:weightSum="2">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="00:00:00"
                android:textColor="@color/accent"
                android:textSize="@dimen/font_22" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="00:00:00"
                android:textColor="@color/accent"
                android:textSize="@dimen/font_22" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@+id/ll_header_content"
            android:background="@color/pinkish_grey_48" />

        <LinearLayout
            android:id="@+id/ll_header_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ll_header_content"
            android:layout_marginTop="@dimen/spacing_5"
            android:orientation="horizontal"
            android:weightSum="2">

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />

            <TextView
                android:id="@+id/textView2"
                style="@style/CommonTextViewPrimaryStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="Distance"
                android:textColor="@color/secondary_text"
                android:textSize="@dimen/font_16" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />

            <TextView
                style="@style/CommonTextViewPrimaryStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="Fare"
                android:textColor="@color/secondary_text"
                android:textSize="@dimen/font_16" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_header_2_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ll_header_2"
            android:layout_marginBottom="@dimen/spacing_5"
            android:layout_marginTop="@dimen/spacing_5"
            android:orientation="horizontal"
            android:weightSum="2">

            <RelativeLayout
                android:id="@+id/rl_total_fare"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="@dimen/spacing_5"
                    android:layout_toLeftOf="@+id/tv_total_fare_content"
                    android:text="₹"
                    android:textColor="@color/red"
                    android:textSize="@dimen/font_22" />

                <TextView
                    android:id="@+id/tv_total_fare_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:text="0.00"
                    android:textColor="@color/accent"
                    android:textSize="@dimen/font_22" />
            </RelativeLayout>

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/pinkish_grey_48" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/tv_total_distance_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="@dimen/spacing_5"
                    android:layout_toRightOf="@+id/tv_total_distance_content"
                    android:text="@string/kms"
                    android:textColor="@color/accent"
                    android:textSize="@dimen/font_22" />

                <TextView
                    android:id="@+id/tv_total_distance_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0.00"
                    android:textColor="@color/accent"
                    android:textSize="@dimen/font_22" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

and this is my base layout

<?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:fitsSystemWindows="true"
tools:context="com.redtaxi.driver.activities.RTNavigationActivity">

<android.support.design.widget.AppBarLayout
    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.AppBarLayout>

<include layout="@layout/rt_content_navigation" />

Answer 1

Check out my below code :

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_400sdp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">


            <FrameLayout
                android:id="@+id/output_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:orientation="vertical" />


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


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

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

Replace MapFragment/SupportMapFragment using container id output_container. This code is working for me.

Answer 2

For AppCompatActivity :-     

Styles.xml :-     
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowActionBarOverlay">true</item>
</style>


In OnCreate() :- 
ColorDrawable colorDrawable = new ColorDrawable();
        colorDrawable.setAlpha(255);
        colorDrawable.setColor((Color.parseColor("#64000000")));
        getSupportActionBar().setBackgroundDrawable(colorDrawable);