CODEWITHSUNDEEP
androidnavigation-drawer
Jans Rautenbach
Jans Rautenbach

Reputation: 469

Grey bar appears on navigation drawer

I recently implemented a navigation drawer into the main screen of my app. For some reason a small grey (or transparent black) bar is being rendered on top of it.
Screenshot:

Screenshot

Layout code:

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

    <LinearLayout
        ... >

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/appbar_padding_top"
            android:theme="@style/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:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/PopupOverlay"/>

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

        <android.support.v4.widget.DrawerLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/drawer_layout">

            <fragment
                ... />

            <android.support.design.widget.NavigationView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/navigation"
                android:layout_gravity="start">

                <ListView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/list_nav"/>

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

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

    </LinearLayout>

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

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

The Java portion is just your generic list-filling stuff. Let me know if you need more code.

How can I remove this weird bar?

Upvotes: 3

Views: 1519

Answers (3)

hc2hunter
hc2hunter

Reputation: 21

i add in my activity_main.xml line:

<com.google.android.material.navigation.NavigationView
...
     app:insetForeground="@android:color/transparent" />

and it works fine!

Upvotes: 1

mattlaabs
mattlaabs

Reputation: 486

For me, it worked to add 

app:insetForeground="@color/transparent"

to the NavigationView's XML definition.

Upvotes: 2

Mike M.
Mike M.

Reputation: 39201

NavigationView is a very specialized ViewGroup that builds its own internal structure from provided resources. It's not meant to be used as a regular ViewGroup. That is, it's not meant to have child Views added directly to it, either in layout XML, or in code.

This is not immediately apparent, though, since no fatal error will occur if you do add children to it manually. It is further muddled by the fact that Android Studio's recent Navigation Drawer templates use NavigationView as the default drawer View in the DrawerLayout, with no indication that it is not mandatory that the drawer be a NavigationView. A drawer can be virtually any kind of View or ViewGroup.

In this case, the shadow is apparently coming from something internal to the NavigationView. However, since it's not being used for any of its specialized features, the NavigationView can be removed completely, and the ListView can act as the drawer on its own.

Simply remove the <NavigationView> element, and any code associated with it. To setup the ListView as the drawer, set its layout_gravity attribute to start, and set its layout_width to an exact value; e.g., 240dp.

Upvotes: 1

Related Questions