Develop Reference

Set custom shadow to AppBarLayout or Toolbar

I want to set custom shadow to Toolbar. Currently is shown default shadow, but it not appropriate for me. So how can I set a custom shadow?
Activity layout:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>

Apply ThemeOverlay.AppCompat to appbar and toolbar
android:theme for appbar
android:popuptheme for toolbar

You can use the elevation attribute after API 21 (Android Lollipop). Which is the easiest way now. Before however ,you can add the shadow programmatically, for example using a custom view placed below the Toolbar.
#layout/toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#drawable/toolbar_dropshadow" />
#drawable/toolbar_dropshadow
<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>

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:background="#drawable/shadow"
android:layout_height="1dp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>

Finally I found it out. But this approach do not give the same shadow as BottomNavigationView has. This is a minor issue, but maybe you have suggestions?
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/PageBackground">
<FrameLayout
android:id="#+id/frameContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#drawable/app_bar_shadow" />
</RelativeLayout>
app_bar_shadow.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:startColor="#15000000"
android:endColor="#android:color/transparent"
android:type="linear" />
</shape>

Place Layout under the AppBar (like in Messenger)

Good afternoon,
I am trying to place a (Relative?Linear?Frame?)Layout under the AppBar and the above the ViewPager, like in the Facebook Messenger App.
Like "TOUS, MESSENGER, SMS" in the picture below :
Here is the code I tried, but it does not work, the Layout is not shown under the AppBar.
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/separator_color"/>
</android.support.design.widget.CoordinatorLayout>
And here is my "tous_messenger_sms" layout file (the problem is probably not that) :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginLeft="16sp"
android:layout_marginRight="16sp">
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/tous_btn"
android:text="TOUS"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_tous"
android:stateListAnimator="#null" />
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/messenger_btn"
android:text="MESSENGER"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_messenger"
android:stateListAnimator="#null" />
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/sms_btn"
android:text="SMS"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_sms"
android:stateListAnimator="#null" />
</LinearLayout>

Try this 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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/separator_color" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Transparent Toolbar with Fading color

I would like to have a transparent/translucent toolbar in my app, just like this one here:
What I have:
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:background="#drawable/toolbar_color"
app:elevation="0dp"
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="#null"
app:elevation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_activity_profil" />
</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="#4f000000"
android:endColor="#a8000000"
android:startColor="#00000000"
android:type="linear" />
</shape>
I spent many hours searching for a suitable solution, but I couldn't find anything helpful.
Thankful for any help!

I search in web and finally this layout its works.
with material effect.
<RelativeLayout
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">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="235dp"
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">
<ImageView
android:id="#+id/img_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:animationCache="false"
android:animationDuration="500"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/main" />
</android.support.design.widget.CoordinatorLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#25ffffff" />
</RelativeLayout>

CoordinatorLayout leaves empty bottom space

I'm developing and Android App using Xamarin. I'm using the ViewPager with TabLayout to make tab navigation, but my ViewPager, even with height="match_parent" does not fill the whole screen.
I believe it's some misconfiguration on CoordinatorLayout, but I can't find a way to fix it.
My layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:background="#android:color/holo_blue_bright">
<ImageView
android:background="#drawable/background_aulas"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:id="#+id/appbarlayout">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/aulas_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="75px"
local:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/aulas_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_weight="1"
android:background="#FF0000"
android:layout_alignParentBottom="#id/appbarlayout" />
</android.support.design.widget.CoordinatorLayout>
And here is a screenshot of my screen: http://imgur.com/nVaHzKK

Try the following.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:fitsSystemWindows="true"
android:background="#android:color/holo_blue_bright">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:id="#+id/appbarlayout">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/aulas_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="75px"
local:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/aulas_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
local:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_weight="1"
android:background="#FF0000"
android:layout_alignParentBottom="#id/appbarlayout" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Align Bottom almost get out of the screen to bottom when Using Toolbar Sliding

I have recently migrated my listview to recyclerview, so that I could have the effect on the toolbar that disappear to show only tabs / RecyclerView.
Thing is now, when I try to align an element to bottom, that element is getting out of the screen from the bottom.
I have to add like 60dp of margin bottom to fix it.
But in my FloatingActionButton, those 60dp affect animation, so I don't like it so much...
Does anyone know the trick???
Here is my code:
First Tab
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#CCC">
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lista_tiendas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:divider="#android:color/transparent"
android:dividerHeight="1.0sp" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="76dp"
android:src="#drawable/ic_add_white_24dp"
app:fab_type="normal"
app:fab_shadow="true"
app:fab_colorNormal="#color/spg_rosa"
app:fab_colorPressed="#color/spg_rosa_dark"
/>
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="right|bottom"-->
<!--android:src="#drawable/ic_add_white_48dp"-->
<!--app:backgroundTint="#color/spg_rosa"-->
<!--android:transitionName="#string/transition_add_pdv"-->
<!--app:borderWidth="0dp"-->
<!--app:elevation="8dp"-->
<!--app:fabSize="normal" />-->
</FrameLayout>
Second tab
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/maps_unavailable"
style="#style/placeholder_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/maps_unavailable"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="#dimen/map_pager_height"
android:layout_gravity="bottom"
android:layout_marginBottom="55dp"/>
</FrameLayout>
And the CoordinatorLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Any Idea???