Develop Reference

Elevation on Material Toolbar doesn't produce a shadow

Just as the title says, i've tried multiple combinations of android:elevation and app:elevation, i have no idea what is it, probably i missed something obvious.
xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.jabotmobile.MainActivity"
android:background="#color/white">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dark"
app:elevation="8dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="?attr/colorPrimary"/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/fragmentContainer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red_light"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:elevation="0dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

You have to add android:clipChildren="false" to the parent view.
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:clipChildren="false">
<com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.Toolbar
app:elevation="8dp"
/>
</com.google.android.material.appbar.AppBarLayout>
Also by default an alpha channel is applied to the shadow for api28+.
You can change this value adding in your app theme the android:spotShadowAlpha attribute (only for api28+):
<!--Alpha value of the spot shadow projected by elevated views, between 0 and 1.-->
<item name="android:spotShadowAlpha">0.x</item>

Can not change shadow on Toolbar with AppBar

I have Toolbar inside AppBarLayout and CoordinatorLayout. The designer wants to change elevation shadow to 1dp, but I can not change it for some reason.
If I add this on AppBarLayout then it removes shadow:
app:elevation="2dp"
If I remove it, then I have default 4dp elevation shadow.
I want to change it to 1dp.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/activityCategoryAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
app:elevation="#dimen/elevationSize"
>
<android.support.v7.widget.Toolbar
android:id="#+id/activityCategoryToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/Widget.MyApp.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/activityCategorySrl"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/activityCategoryRvPosts"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.SwipeRefreshLayout>

Change your AppBarLayout code to:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#animator/appbar_always_elevated"
android:theme="#style/AppTheme.AppBarOverlay">
And add appbar_always_elevated.xml in animator directory with this content:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="1dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>
It should work now.
You can change android:valueTo value to set shadow. Also, app:elevation is not working on new APIs.
#deprecated target elevation is now deprecated.
Source: https://chromium.googlesource.com/android_tools/+/refs/heads/master/sdk/sources/android-25/android/support/design/widget/AppBarLayout.java?autodive=0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F

Set logo as toolbar background in Android

I am attempting to set a logo as background in an Android toolbar. I've tried to put the image as a layer directly in the toolbar but this results in the logo not being centered. Here is the code I've got right now:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/Toolbar_background"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
And for the drawable Toolbar_background:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<item>
<shape android:shape="rectangle">
<solid android:color="?attr/colorPrimary" />
</shape>
</item>
<item>
<bitmap
android:contentDescription="Unleashed logo"
android:src="#drawable/unleashed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp" />
</item>
</layer-list>
This works but the logo is stretched in width and no padding is aplied, the bitmap takes up all spaces it can get.
https://www.imgdumper.nl/uploads9/5a796ede6c77c/5a796ede6bd4d-Capture.PNG

You can create custom toolbar.
Check below code.
toolbar_bg_image.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/colorAccent"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/toolbarTheme">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/_4sdp"
android:paddingRight="#dimen/_4sdp"
android:paddingStart="#dimen/_4sdp"
android:paddingEnd="#dimen/_4sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:scaleType="fitXY"
app:srcCompat="#drawable/unlashed"/>
</android.support.v7.widget.Toolbar>
</layout>
I suggest you to take your image without background and set background color as per your requirement in android:background="#color/colorAccent" property of toolbar.
You can also set margin and padding in ImageView as per your requirement.
Now you can include this toolbar in your layout file as below.
fragment_or_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_bg_image" />
</LinearLayout>
</layout>

You can try setting logo as below:
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/atc_toolbar"
android:background="?android:attr/colorPrimaryDark"
android:elevation="4dp"
android:navigationIcon="#android:drawable/ic_menu_compass"
android:logo="#android:drawable/ic_menu_view"
android:title="My application">
</Toolbar>

Elevation is not shown on toolbar in pre-lollipop devices

I want to show the same elevation effect on my toobar on a KitKat device as seen on a Lollipop device. Below are screenshots for both the KitKat and Lollipop devices. I have referred to this link but my problem is not solved yet.
Lollipop Device:
Kitkat Device:
ContentMain.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.global.market.checkinternet.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:background="#3F51B5"
style="#style/MyCustomTabLayout"
app:tabTextColor="#ffffff"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
tools:context="com.global.market.MainActivity">
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

As mentioned, elevation is not available below lollipop devices but, there are few alternative ways for doing that.
I've personally tried everything and none worked but could managed it by adding a layout-v19 folder in res folder of project. So, it will be a specific API-19 layout. There, you can add a view under Toolbar-AppbarLayout (depends on your design) with 4dp height or any other methods as following links:
https://github.com/vipulasri/Toolbar-Elevation-Pre-Lollipop
And this: https://mobikul.com/show-shadow-toolbar-api-21/
<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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Place Your Layout Here -->
<View
android:id="#+id/shadow_view"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/dropshadow" />
</FrameLayout>
</LinearLayout>
dropshadow.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#android:color/transparent"
android:endColor="#60555555"
android:angle="90"/>
</shape>
And in java-kotlin side, check if it is API-19, then inflate the layout there:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
v = inflator.inflate(R.layout.item_showdetail_asset_kitkat, this);
} else {
v = inflator.inflate(R.layout.item_showdetail_asset, this);
}
Hope this helps.

CollapsingToolbarLayout without shadow in expanded state

CollapsingToolbarLayout from appcompat shows shadow in collapsed state, but when expanded (or expanding in process) shadow disappear
My example code https://github.com/NaikSoftware/CollapsingToolbarWithImageAndTabs/tree/master/app
Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ua.naiksoftware.hidetabs.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_plus_tabs"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"
app:titleEnabled="false"
app:toolbarId="#+id/toolbar_wrapper">
<ImageView
android:id="#+id/appbar_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/header_back"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_wrapper"
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
android:layout_height="wrap_content"
android:minHeight="#dimen/tab_layout_height">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_black_24dp"
android:layout_margin="#dimen/fab_margin"
android:tint="#android:color/white"
android:layout_gravity="bottom|end"
app:elevation="#dimen/fab_elevation"
app:layout_behavior="ua.naiksoftware.hidetabs.FabSlidingBehavior"/>
</android.support.design.widget.CoordinatorLayout>
Collapsed
Expanded

I had the same issue and found a solution:
First you have to update to the latest Support Library (I use 24.1.0)
Then apply the stateListAnimator to your AppBarLayout:
example:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="320dp"
android:stateListAnimator="#drawable/appbar_always_elevated"
android:fitsSystemWindows="true">
and use this xml as animator:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="8dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>

You can find official stateListAnimator for AppBarLayout here
1. Put this appbar_elevation.xml into resources directory named animator-v21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="PrivateResource">
<item>
<objectAnimator
android:propertyName="elevation"
android:valueTo="#dimen/design_appbar_elevation"
android:valueType="floatType" />
</item>
</selector>
2. On AppBarLayout set android:stateListAnimator="#animator/appbar_elevation"

Just use
app:liftOnScroll="false"
on the AppBarLayout