Material Design - AppCompat toolbar without shadow

Question

I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have a toolbar shadow like the previous action bar. but the toolbar by default has no shadow, and I tried the fixes mentioned in reddit . but no luck.

code to set the shadow:

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START); 

Toolbar layout:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:minHeight="?attr/actionBarSize" android:background="#F1F1F1" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="0dp" android:layout_margin="0dp" foreground="?android:windowContentOverlay"> 

action plan:

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity" android:layout_width="match_parent" android:id="@+id/drawer_layout" android:layout_height="match_parent"> <!-- activity view --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/toolbar" layout="@layout/toolbar" /> <FrameLayout android:id="@+id/fragment_container" android:layout_below="@id/toolbar" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> <!-- navigation drawer --> <RelativeLayout android:id="@+id/left_drawer" android:layout_gravity="start" android:layout_width="match_parent" android:background="#fff" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp" android:paddingBottom="8dp" android:divider="#eee" android:background="#EEE" android:id="@+id/drawer_header"> <ImageView android:id="@+id/user_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:contentDescription="@string/user_icon" android:src="@drawable/ic_action_person" android:paddingTop="0dp" android:paddingLeft="0dp"/> <TextView android:id="@+id/userName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/user_icon" android:gravity="center" android:layout_gravity="center_vertical" android:layout_centerVertical="true" android:textSize="14sp" android:text="@string/not_logged_in" android:paddingTop="0dp" android:paddingBottom="0dp"/> </RelativeLayout> <ListView android:id="@+id/drawer_list" android:layout_below="@+id/drawer_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="#eee" android:background="#fff" android:dividerHeight="0dp" /> </RelativeLayout> </android.support.v4.widget.DrawerLayout> 

Setting in style.xml file:

 <style name="myAppTheme" parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/primaryColor</item> <item name="colorPrimaryDark">@color/primaryColorDark</item> <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> <item name="android:windowContentOverlay">@drawable/drawer_shadow</item> </style> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/black</item> </style> 

Can anyone help?

thanks!

update 1: with Willis's suggestion, I get a shadow, but it’s not under the toolbar, but on the left of the toolbar.

Update 2: I noticed that if I don't set windowContentOverlay to toolbar.xml and styles.xml, the shadow is actually at the top of the toolbar.

Answer 1

These two are completely different shadows. vertical is DrawerLayout . He should have appeared next to the drawer. The horizontal line is part of windowContentOverlay for the API below LOLLIPOP (on LOLLIPOP it @null ).

When you work with the Toolbar widget, the toolbar is no longer part of the window decor, so the shadow starts at the top of the window above the toolbar, and not below (so you want windowContentOverlay be @null ). In addition, you need to add an additional empty View under the pre- LOLLIPOP , while its background will be set to vertical shadow stretch (8dp works best with a high gradient from #20000000 to #00000000 ). In LOLLIPOP you can set the height of 8dp in the toolbar.

Note. For best results, use the same gradient but horizontal as the shadow of the box.

Answer 2

You can set the amount of shadow using the setElevation method. For example:

 getSupportActionBar().setElevation(25); 

Increasing / decreasing the value passed to setElevation will increase / decrease the presence of the shadow effect.

Answer 3

To show the shadow under the toolbar, use the AppBarLayout, available in the Google Android Design Support Library. Here is an example of how to use it.

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent"/> </android.support.design.widget.AppBarLayout> 

To use the Google Android Design Support Library, enter the following command in the build.gradle file:

  compile 'com.android.support:design:22.2.0'