Search code examples
androidandroid-toolbar

Android toolbar not getting its background transparent


I have a layout with a toolbar and a navigation drawer:

<?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:background="@android:color/transparent"
          android:fitsSystemWindows="true"
          android:orientation="vertical"
          tools:context="com.my.app.GUI.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/mainBackground"
    android:contentInsetEnd="0dp"
    android:contentInsetLeft="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetStart="0dp"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <FrameLayout
            android:id="@+id/frameLayoutTitleBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:padding="10dp">

            <ImageView
                android:id="@+id/imageViewHamburger"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/icon_hamburger_menu"/>

            <TextView
                android:id="@+id/textViewToolbarTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:gravity="center"
                android:text="TITLE"
                android:textColor="@android:color/white"
                android:textSize="@dimen/very_large_font_size"/>

        </FrameLayout>

        <ImageView
            android:id="@+id/imageViewToolbarRightSide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/frameLayoutTitleBar"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/frameLayoutTitleBar"
            android:layout_marginRight="10dp"
            android:visibility="invisible"
            app:srcCompat="@drawable/icon_hamburger_menu"/>

        <View
            android:id="@+id/viewTitleUnderLine"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_alignParentBottom="true"
            android:background="@color/secondaryBackground"/>

    </RelativeLayout>

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

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
</FrameLayout>
</LinearLayout>

This all layout is later then added as an include to another layout which includes the layout for the navigation drawer.

In my code I'm setting the images, strings and also the toolbar's background. The background is set like this:

public static void setTitleBarBackgroundColor(int color)
{
    if(toolBar != null)
    {
        toolBar.setBackgroundColor(color);
    }
}
...
MyToolBarClass.setTitleBarBackgroundColor(getResources().getColor(android.R.color.transparent));

When invoking this, the color does change but instead of being transparent, the toolbar (or something else) is changing to some color similar to gray and I can also see 3 faded icons of 2 people like the old MSN messenger icon, a chat icon and a wheel settings icon, which probably came with the toolbar. If I'm setting the color of the toolbar to something else then there's no problem and it's being set to that color.

Why won't the toolbar background change to transparent so I can see what's below it?


Solution

  • I have finally realized that the toolbar is indeed getting transparent, but the problem is that the content window is below it as can be seen by the layout I've written.. the content window is below it as it's inside a LinearLayout. After changing the LinearLayout to a FrameLayout which means the tool bar is now on top of the content and not above it, everything worked