Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove shadow from Toolbar when Navigation Drawer is Open - Material Design support library

I am implementing Material Design into my app that has a navigation drawer. Amongst all the differing implementations of the Nav. Drawer and Toolbar with Material Design (see this post); I have chosen to keep the app feel similar to the ICS/Halo design and have the Nav Drawer slide out under the Toolbar. The problem is that the Toolbar dims with the shadow like the rest of the activity when the nav drawer is open. How would I keep the Toolbar from darkening? If you see the image in the post I linked above I am after #6, 3 or 5, but my looks more like #9 now.

Example (from post above):

What I'm after (no shadow on Toolbar):

enter image description here

What I currently get (Toolbar darkens when nav drawer is open):

enter image description here

Here is the code for my main activity's XML:

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.funkhaus.navdrawer.app.MainActivity">

<!-- As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions. -->
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- We use a Toolbar so that our drawer can be displayed
         in front of the action bar; Added for Material Design -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_awesome_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize" />

</FrameLayout>

<fragment android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    android:layout_gravity="start"
    android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" />

The notable part being that the <FrameLayout> whose ID is 'container' is where all my fragments are inflated, and its marginTop was set to the height of the Toolbar so its content would be below the Toolbar. Similarly, the Navigation Drawer fragment also has its marginTop set to the height of the Toolbar so it slides out below it.

like image 256
Flash Avatar asked Oct 30 '14 21:10

Flash


People also ask

How do I turn off Shadow Bar?

Use attribute app:elevation="0dp" to your Toolbar or AppBarLayout to remove the shadow. #. If you are using Toolbar only, then add attribute app:elevation="0dp" to Toolbar .

How do I get rid of the shadow bar on my Android?

By default, android provides shadow for action bar. This example demonstrates How to remove shadow below the action bar. Step 1 - Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 - Add the following code to res/layout/activity_main.

How do I get rid of App Bar elevation?

You can remove the elevation from Material UI's AppBar by setting the elevation prop to 0.


1 Answers

Thanks to @alanv I fixed my issue.

My post above shows my activity_main.xml code; I simplified it to this, removing the Toolbar view and removing the marginTop formatting:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.funkhaus.navdrawer.app.MainActivity">

<!-- As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" />

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

I created a toolbar.xml, which I now setContentView() on in my main Activity that <include>'s the activity_main.xml above:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">
    <!-- We use a Toolbar so that our drawer can be displayed
             in front of the action bar; Added for Material Design -->
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/my_awesome_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <include android:id="@+id/drawer_layout" layout="@layout/activity_main" />

</LinearLayout>

Finally, in my Activity's onCreate() I setContentView() on the toolbar.xml:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.toolbar);
    // Rest of code here....
like image 125
Flash Avatar answered Nov 08 '22 16:11

Flash