Reputation: 219
I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.
the code to set the shadow:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
The 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">
the activity layout:
<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 the style.xml:
<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 the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.
Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.
Upvotes: 7
Views: 8769
Reputation: 6693
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<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 Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'
Upvotes: 0
Reputation: 38243
Those two are completely different shadows. The vertical one is that of DrawerLayout
. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay
on APIs below LOLLIPOP
(on LOLLIPOP
it's @null
).
When you work with Toolbar
widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay
to be @null
). Additionally you need to add an extra empty View
below the toolbar pre-LOLLIPOP
with its background set to a vertical shadow drawable (8dp tall gradient from #20000000
to #00000000
works best). On LOLLIPOP
you can set 8dp elevation on the toolbar instead.
Note: Use the same gradient but horizontal as the drawer shadow for best results.
Upvotes: 4
Reputation: 5336
You can set the amount of shadow by using the setElevation
method. For example:
getSupportActionBar().setElevation(25);
Increasing/decreasing the value passed to setElevation
will consequently increase/decrease the presence of the shadow effect.
Upvotes: 2