No shadow by default on Toolbar?
I'm updating my app with the new Toolbar from the support library v21. My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
And in my Activity - OnCreate method:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
I ended up setting my own drop shadow for the toolbar, thought it might helpful for anyone looking for it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_alizarin"
android:titleTextAppearance="@color/White"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- **** Place Your Content Here **** -->
<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@drawable/toolbar_dropshadow"/>
</FrameLayout>
</LinearLayout>
@drawable/toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="@android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
</shape>
@color/color_alizarin
<color name="color_alizarin">#e74c3c</color>
Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library.
Add the Design Support library as a dependency in build.gradle
:
compile 'com.android.support:design:22.2.0'
Add AppBarLayout
supplied by the library as a wrapper around your Toolbar
layout to generate a drop shadow.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
</android.support.design.widget.AppBarLayout>
Here is the result :
There are lots of other tricks with the design support library.
- http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
- http://android-developers.blogspot.in/2015/05/android-design-support-library.html
AndroidX
As above but with dependency:
implementation 'com.google.android.material:material:1.0.0'
and com.google.android.material.appbar.AppBarLayout