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):
What I currently get (Toolbar darkens when nav drawer is open):
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.
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 .
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.
You can remove the elevation from Material UI's AppBar by setting the elevation prop to 0.
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....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With