Mes Mes - 4 months ago 11
Android Question

Toolbar turns darker than normal while opening drawer

While I open the drawer the toolbar's colors turns way more darker than the color of the rest of the screen.

Initially Toolbar's background color is white. Any ideas why this is happening ?

The code I'm using is below :

<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_poll_container"
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:background="@color/white"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="false">

<LinearLayout android:id="@+id/ll_toolbar_container"
android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar android:id="@+id/tb_poll_toolbar"
android:gravity="center"
android:layout_width="match_parent" android:layout_height="wrap_content">

<TextView
android:id="@+id/tv_poll_toolbar_title"
android:gravity="center" android:layout_gravity="center"
android:textSize="@dimen/text_size_xxxlarge" android:fontFamily="sans-serif"
android:textColor="@color/black" tools:text="My Title"
android:layout_width="wrap_content" android:layout_height="wrap_content" />

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

</LinearLayout>

<FrameLayout android:background="@color/white"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent" android:layout_height="wrap_content">

<android.support.v4.view.ViewPager
android:id="@+id/vp_poll_viewpager"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent" />


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_gravity="center_horizontal"
android:layout_marginTop="48dp"
android:background="@drawable/background_line"
android:layout_width="144dp" android:layout_height="wrap_content">

<FrameLayout android:layout_width="36dp" android:layout_height="36dp"
android:layout_alignParentLeft="true">

<ImageView
android:id="@+id/pager_img_one"
android:layout_width="36dp" android:layout_height="36dp"
android:scaleType="centerInside"
app:srcCompat="@drawable/ic_active_nav" />

<TextView android:id="@+id/tv_poll_one"
android:textStyle="bold"
android:text="1" android:gravity="center"
android:textColor="@color/white"
android:layout_width="36dp" android:layout_height="36dp" />

</FrameLayout>

<FrameLayout android:layout_width="36dp" android:layout_height="36dp"
android:layout_centerInParent="true">

<ImageView
android:id="@+id/pager_img_two"
android:layout_width="36dp" android:layout_height="36dp"
android:scaleType="centerInside"
app:srcCompat="@drawable/ic_deactive_nav" />

<TextView android:id="@+id/tv_poll_two"
android:visibility="invisible" android:textStyle="bold"
android:text="2" android:gravity="center"
android:textColor="@color/white"
android:layout_width="36dp" android:layout_height="36dp" />

</FrameLayout>

<FrameLayout android:layout_width="36dp" android:layout_height="36dp"
android:layout_alignParentRight="true">

<ImageView
android:id="@+id/pager_img_three"
android:layout_width="36dp" android:layout_height="36dp"
android:scaleType="centerInside"
app:srcCompat="@drawable/ic_deactive_nav" />

<TextView android:id="@+id/tv_poll_three"
android:visibility="invisible" android:textStyle="bold"
android:text="3" android:gravity="center"
android:textColor="@color/white"
android:layout_width="36dp" android:layout_height="36dp" />

</FrameLayout>


</RelativeLayout>

<LinearLayout android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="wrap_content">

<LinearLayout android:id="@+id/pb_container"
android:layout_width="match_parent" android:layout_height="8dp"
android:background="@android:color/transparent"
android:gravity="bottom">

<ProgressBar android:id="@+id/progress_bar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:progressDrawable="@drawable/progress_bar_drawable"
android:indeterminate="false"
android:max="100" android:progress="0"
android:layout_width="match_parent" android:layout_height="8dp" />

</LinearLayout>

<TextView android:text="Uploading Video Progress"
android:textColor="@color/app_body_text_3" android:gravity="center_horizontal"
android:layout_width="match_parent" android:layout_height="wrap_content" />

</LinearLayout>


</FrameLayout>

<android.support.design.widget.NavigationView
android:id="@+id/nv_poll_navigation"
android:background="@color/white"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:fitsSystemWindows="false" android:layout_gravity="start" />



Answer

DrawerLayout should have two children: the main content view and the navigation drawer. https://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout

So you should wrap the main content with FrameLayout like this:

<android.support.v4.widget.DrawerLayout
        android:id="@+id/dl_poll_container"
        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:background="@color/white"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:fitsSystemWindows="false">

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <LinearLayout android:id="@+id/ll_toolbar_container"
                      android:orientation="vertical"
                      android:layout_width="match_parent" android:layout_height="wrap_content">
            ...
        </LinearLayout>

        <FrameLayout android:background="@color/white"
                     android:layout_marginTop="?attr/actionBarSize"
                     android:layout_width="match_parent" android:layout_height="wrap_content">
            ....
        </FrameLayout>
    </FrameLayout>

    <android.support.design.widget.NavigationView
            android:id="@+id/nv_poll_navigation"
            android:background="@color/white"
            android:layout_width="wrap_content" android:layout_height="match_parent"
            android:fitsSystemWindows="false" android:layout_gravity="start" />

</android.support.v4.widget.DrawerLayout>