Develop Reference

Shadow/Elevation from Collapse Tool Bar Don'tWork With Recycler View?

I'm studying the Udacity Material Design for Android Course.
In the classes "Making Scrollable Dinamic Surface" I learn how make a action bar that change size with scrolling.
But this example works with a ScrollView for the content.
When I try to use a RecyclerView I lost the Shadow effect between action bar and content.
Should I set something different?
Thanks.
XML Code with ScrollView and Recycler View(commented):
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?colorPrimary">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/glasses_dogs" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:navigationIcon="#drawable/ic_arrow_back_black_24dp"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--<android.support.v7.widget.RecyclerView-->
<!--android:id="#+id/main_home_list"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:nestedScrollingEnabled="true"-->
<!--app:layout_behavior="#string/appbar_scrolling_view_behavior" />-->
<ScrollView
android:layout_width="match_parent"
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
<TextView
android:layout_marginTop="16dp"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Body1"
android:text="#string/cupcake_ipsum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp" />
</ScrollView>
</android.support.design.widget.CoordinatorLayout >

I found a solution for this.
In your XML you can add a Animator (last line)
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#color/neah_screen_bg_white"
android:stateListAnimator="#animator/appbar_always_elevated">
You create this XML file in res/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="4dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>

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.

Fading android.support.v7.widget.Toolbar

I want to create a profile activity which toolbar should look somehow like this:
So far I have this:
Also I don't understand how to get rid of this shadow or overlay effect, maybe this would already solve my problem.
activity_activity_profil.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"
android:fitsSystemWindows="true"
tools:context="com.appmac.ron.app_newsfeed.ActivityProfil">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="#drawable/toolbar_color"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_activity_profil" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
toolbar_color.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#7b7b7b"
android:endColor="#2b2b2b"
android:startColor="#ffffff"
android:type="linear" />
</shape>
UPDATE:
The Shadow is gone, now i would like to make my Toolbar transparent, like this:
I have this right now:
If more code is needed just tell me and I'll update it.
Thankful for any help!

Set the elevation to 0dp on your AppBarLayout:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
You might want to move the background to the AppBarLayout as well.

How to add bottom shadow to tab layout or Toolbar in android

Hi i need add shadow under my tab layout (like in skype).
My activity xml:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize" />
<FrameLayout
android:layout_width="match_parent"
android:layout_below="#+id/tab_layout"
android:id="#+id/tabContainer"
android:layout_height="match_parent" />
</RelativeLayout>
When i add android:elevation="10dp" to Tablayout, shadow was added bottom and top .. I need just bottom. See image...
How can i do this ?
Thanks in advance.

Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.
android:elevation="10dp"
EDIT:
add it to both your tablayout and toolbar
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="10dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="10dp"/>

This is a Great option to add shadow below Toolbar
Add a view below the tablayout of your desired layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#+id/tab_layout"
android:background="#drawable/toolbar_dropshadow" />
<FrameLayout
android:layout_width="match_parent"
android:layout_below="#+id/tab_layout"
android:id="#+id/tabContainer"
android:layout_height="match_parent" />
</RelativeLayout>
then create a xml in drawable like this
#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>
Change the startcolor and endcolor as u want to apply

You can add TabLayout as a child in AppBarLayout which has a shadow by default or you can specify the shadow depth by app:elevation="xdp"
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="xdp">
<android.support.v7.widget.Toolbar
...
/>
<android.support.design.widget.TabLayout
...
/>
</android.support.design.widget.AppBarLayout>

Try to add a simple View between TabLayout and Toolbar. Set background for that View as gradient which mimics shadow.
Shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90">
</gradient>
</shape>

There is actually a quite simple solution:
Just put the Toolbar and the TabLayout inside of an AppBarLayout.
For example:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ToolbarTheme"
app:titleTextAppearance="#style/ThemeOverlay.AppCompat.ActionBar"
android:background="#color/colorPrimary"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
This works perfectly for me and it's the common way to combine the App-/Toolbar and the TabLayout.

Just add one line and it will work.
android:elevation="5dp"
See full code:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutSave"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:elevation="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:tabIndicatorColor="#1d1d1f"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#1d1d1f"
app:tabTextColor="#888888" />

Add elevation into your Tablayout. Material Design
android:elevation="15dp"

Use app:elevation="0dp" to remove the shadow.

How to add a gradient to a ImageView nested in a CollapsingToolbar

I'am working on an Android app with material design. I have a detail view with a CollapsingToolbarLayout and a ImageView (works fine so far). Unfortunately the title is not readable if there is a bright image.
So far I tried to add a gradient (Add gradient to imageview) but this solution didn't work for me because of the CollapsingToolbarLayout.
Here you can see my code:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_height="256dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/primary"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="50dp"
app:expandedTitleMarginStart="50dp"
>
<!--<View
android:background="#drawable/actionbar_gradient_dark"
/>-->
<ImageView
android:id="#+id/backimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/detailToolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
Does anyone know a solution for this issue?

Wrap your ImageView in a FrameLayout and add a View with a background:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/backimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/image"
app:layout_scrollFlags="scroll|enterAlways" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/actionbar_gradient_dark" />
</FrameLayout>
Make sure your gradient is something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black" />
<corners android:radius="0dp" />
</shape>