Search code examples
androidandroid-fragmentswebviewandroid-actionbartransparent

How to make toolBar and tabBar float over background


Below is a picture of my app UI (actionBar/toolBar + webView + tabs). As you can see, the AB/toolbar + tabs are transparent (black color hence no background) but it refuses to fold above my webView (EdgeScrollViewPager) in the background. I am setting the color to @null in both the toolbar and tabBar. I do not know what I do for logical errors in the code, ie why the actionBar/toolbar and tabBar do not lie on top of the dark blue background (webView).

enter image description here

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        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:orientation="vertical"
        tools:context="com.MainActivity">

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

        <com.ui.util.EdgeScrollViewPager
            android:id="@+id/content_main_viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:visibility="visible"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </com.ui.util.EdgeScrollViewPager>

        <android.support.design.widget.TabLayout
            android:id="@+id/content_main_tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextAppearance="@style/ML.Tab"
            app:tabPadding="0dp"
            app:tabIndicatorHeight="0dp"
            app:tabIndicatorColor="@null"
            android:visibility="visible"
            android:background="@null"
            app:background="@null">

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

    </LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    app:theme="@style/ML.Toolbar"
    app:popupTheme="@style/ML.Toolbar.PopupTheme"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways"
    >

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

</android.support.v7.widget.Toolbar>

style.xml

<style name="ML.Toolbar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@null</item>
        <item name="background">@null</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

Solution

  • Try this:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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"
        tools:context="com.MainActivity">
    
    <include layout="@layout/app_toolbar" />
    
    <com.ui.util.EdgeScrollViewPager
        android:id="@+id/content_main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:visibility="visible"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
    </com.ui.util.EdgeScrollViewPager>
    
    <android.support.design.widget.TabLayout
        android:id="@+id/content_main_tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="@null"
        android:visibility="visible"
        app:background="@null"
        app:tabGravity="fill"
        app:tabIndicatorColor="@null"
        app:tabIndicatorHeight="0dp"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabPadding="0dp"
        app:tabTextAppearance="@style/ML.Tab">
    </android.support.design.widget.TabLayout>