Develop Reference

Snackbar flickers if android:animateLayoutChanges is true on root layout

It seems like a simple Snackbar message looks pretty jarring if android:animateLayoutChanges is set to true. The Snackbar will flicker repeatedly throughout the animation. Removing the android:animateLayoutChanges parameter from the layout solves this issue but now I won't get to enjoy the benefits from it. It also works if I use android:animateLayoutChanges on a child view instead of the root view.
Is this a known issue and is there a way around it?
Here is an example layout which will demonstrate the issue if a snackbar is shown.
<?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:animateLayoutChanges="true">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="end"
app:fabCradleMargin="4dp"
app:fabCradleRoundedCornerRadius="16dp"
app:fabCradleVerticalOffset="4dp"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
app:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/colorAccent"
app:layout_anchor="#id/bottomAppBar"
app:srcCompat="#drawable/ic_add"
app:tint="#color/colorWhite" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Looks like an open bug. see here

Happened to me too, still not fixed of 30/07/2021. 😕
If applicable, the simplest workaround would be to put the part of layout that needs animating in a extra FrameLayout, for example like this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:theme="#style/AppTheme"
<-- Other views here, FragmentContainerView, AppBarLayout, ... -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<-- Place anything that you want animated here -->
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If you would happen to have some other container views in the "useless" FrameLayout you may get "UselessParent" prompt by Android Studio, you can just include this ignore in the child of the added FrameLayout: tools:ignore="UselessParent".

FloatingActionButton, layout_anchor and layout_gravity

A bit of a newbie here. I'm about two months into Android development, but I have years of development experience in other environments.
Okay. I have a FloatingActionButton which was not showing up where I expected it or wanted it. It's inside a CoordinatorLayout, along with an AppBarLayout/Toolbar, and following a ListView.
Here is the 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/fragment_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ViewVehicleList">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
android:title="Vehicle List"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<ListView
android:id="#+id/Vehicle_ListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#FFFFFF"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_AddVehicle"
style="#style/FloatingAddButton"
android:src="#drawable/ic_green_add"
android:layout_gravity="bottom|end"
app:layout_anchor="#id/Vehicle_ListView"
android:onClick="addVehicle"/>
</android.support.design.widget.CoordinatorLayout>
With this layout, the screen looks like this:
My layout_gravity says "bottom|end". I changed it to "bottom|right", but still I got the same result. I've read many tutorials, and researched through Stack Overflow, and have had no luck.
I managed to solve it by removing the anchor listed in the FAB element app:layout_anchor="#id/Vehicle_ListView", which seems to run a counter to what I've read: to use a FAB and position it properly you need to use layout_anchor and layout_gravity. Without the anchor tag, it looks like this:
So here's my question: Why is my anchor screwing up the positioning of my FloatingActionButton? What am I doing wrong?

You just need to add layout_anchorGravity.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_AddVehicle"
style="#style/FloatingAddButton"
android:src="#drawable/ic_green_add"
android:onClick="addVehicle"
app:layout_anchor="#id/Vehicle_ListView"
app:layout_anchorGravity="bottom|end" />

if you use constraint layout, you should set fab's top and bottom constraint to your desired layout edge like this. for example I have a cardview witch I want to anchor fab to it
<androidx.cardview.widget.CardView
android:id="#+id/mix_video_cardView/>
<com.google.android.material.floatingactionbutton.FloatingActionButto
app:layout_constraintTop_toBottomOf="#+id/mix_video_cardView"
app:layout_constraintBottom_toBottomOf="#+id/mix_video_cardView"
app:layout_constraintStart_toStartOf="#+id/mix_video_cardView"
app:layout_constraintEnd_toEndOf="#+id/mix_video_cardView"
/>

How to hide ToolBar when I scrolling content up?

I am trying to hide my tool bar when I scroll my text and image with content. Here I use scrollView for getting scroll content. When I scroll content up, how to hide the tool bar?
Here is my XMl code:
content_main.XML:
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:paddingTop="?android:attr/actionBarSize"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="#+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="23dp"
android:textStyle="bold"
android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "/>
<ImageView
android:id="#+id/imge"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/imag_bg"/>
<TextView
android:id="#+id/texttwo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="Pretty good, the Toolbar is moving along with the list and getting back just as we expect it to. This is thanks to the restrictions that we put on the mToolbarOffset variable.
If we would omit checking if it’s bigger than 0 and lower than mToolbarHeight then when
we would scroll
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing.
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug."/>
</LinearLayout>
<View
android:layout_width="wrap_content"
android:layout_height="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="hai"
android:layout_width="160dp"
android:layout_height="match_parent" />
<Button
android:text="hello"
android:layout_width="160dp"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
activity_main.XML
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />

you have to do many changes in your both layout. first use CoordinatorLayout in activity_main.XML like below(change theme as per your requirement).
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
in content_main.XML use android.support.v4.widget.NestedScrollView instead of ScrollView.
also use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "
android:textSize="25dp"
android:textStyle="bold" />
/// Add your other code here
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

This is the best scenario to make use of CoordinatorLayout in your app. CoordinatorLayout is a super-powered FrameLayout which has got a lot of nifty animation tricks upon its sleeves.
The Design library introduces CoordinatorLayout, a layout which
provides an additional level of control over touch events between
child views, something which many of the components in the Design
library take advantage of.
You can start with this and this tutorial.

Wrap activity_main.xml in Coordinator Layout so it will be its parent layout.
<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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

You can find my solution about your question from here:
Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top
This's a working solutio but it's not the best way to implement this animation. With CoordiantorLayout you can relate your views and it's scrolling behaviors.
You can find more info from here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
When i have time i'll try to post a code example for you.

Just set flag to like app:layout_scrollFlags="scroll|enterAlways"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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:titleTextColor="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways"
/>

android Place content below toolbar

I have this layout:
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_favorite_outline_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Setting #string/appbar_scrolling_view_behavior attribute shifts the RecyclerView by the height of the Toolbar.
But what if I need the first element of the RecyclerView to be aligned to the status bar.
I want the Toolbar to cover (be above) the first element.
In other words, I don't want any offset which #string/appbar_scrolling_view_behavior behaviour entails.
Could you please tell me how to do that?

I had the same problem and I just wrapped the AppbarLayout and the rest of my views (in your case the recyclerview) in a RelativeLayout and it works fine. I don't know if there are any downsides with that approach.

The offset is not by #string/appbar_scrolling_view_behavior behaviour it's due to AppBarLayout it pushes the content down.
I'm not sure if there is any other better solution. But I'd suggest to remove the AppBarLayout to have your content go under the Toolbar. Moreover you might be need the scrolling behaviour for that you can check the library below.
It's been used by lots of apps like Jair Music Player even WhatsApp too uses it.
Library:
Android Observable Scroll View

Overlaying content above AppBarLayout using new Material Design

I want to achieve something like that. (not the FAB or the Snackbar). How can i create a layout, overlaying the AppBarLayout? Like this! (For Example)
Like Play Store:
My AppBarLayout with CoordinatorLayout and NestedScrollView with RelativeLayout as content looks like this:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_118sdp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/mpc_pink"
app:expandedTitleMarginStart="#dimen/_40sdp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<de.mypostcardstore.widgets.ItemImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#color/mpc_pink"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/article_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="#color/mpc_pink"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent".....>
It would be awesome if someone could help me out. I can not find anything on the internet...
Thanks in advance!

Just add something like
app:behavior_overlapTop="64dp"
to your NestedScrollView and it will be placed above the expanded toolbar.
In addition, you should add something like
app:expandedTitleMarginBottom="70dp"
to your CollapsingToolbarLayout so the title does not appear under your overlaid scroll content.

It's quite simple, really. You could achieve that by using a combination of ToolBar, FrameLayout, and your content view (could be a ListView like your first example, or anything).
The idea is to make your FrameLayout possess the same color as your ToolBar, giving the illusion of ToolBar being much larger than it is. Then all that is left to do is to make your content view be the last (or in API 21 and above: possess the highest elevation attribute) so that it would appear as if it floats above the aforementioned FrameLayout.
See my illustration below:
Now that you got the big idea, below is some real live XML snippet for doing such thing. (I actually use this layout in one of my apps) :
<!-- Somewhere in your layout.xml -->
....
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
<FrameLayout
android:id="#+id/v_toolbar_extension"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="#+id/tb_toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"/>
<!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
<FrameLayout
android:id="#+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tb_toolbar"
android:elevation="3dp"/>
....
Note that my ly_content has higher elevation value than that of v_toolbar_extension. This is what will give you that desired 'overlaid toolbar' effect.
Last but not least, you would want to add this line somewhere in your activity's onCreate() :
/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
What that codes woud do is to set your ToolBar elevation to zero; removing preset shadows that were given as a default to ToolBars. If you don't do this, said shadow will create a "seam" between your ToolBar and your FrameLayout, thus breaking the illusion of those two being the same.
p.s., It is also important to give your content view a padding on each side. Doing so, your content view will not cover the entire width of the screen (which would render this effect useless).
Note: I see some good answers here that mentioned the absence of FrameLayout and instead making the ToolBar taller. While in theory it might work as well as my proposed solution, you might have problems when trying to manipulate scrolling; by doing that, you won't be able to separate ToolBar and its extension. You'll be forced to either make the Toolbar static or scroll all of the ToolBar altogether (makes scrolling a bit weird).
Add to that, the fact that you can't easily assign a custom drawable into a Toolbar. Hence makes it hard to follow the Google Play example you've given above. While if you're using my solution, all you'd need to do is just make your Toolbar transparent and assign the drawable to the FrameLayout instead.

I had a similar requirement and I achieved it as below.
Your activity theme should extend Theme.AppCompat.Light.NoActionBar.
I created a Layout XML File as:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the Activity should be something like this:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
setSupportActionBar(maintoolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I got a view like this :

I did try to implement effects like you referred which is called Card Toolbar in Android, and it did work as expected. Here is my layout, Take a look at it:
<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="#color/background_material_light" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_double_height"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/cardview_toolbar_spacer"
android:layout_marginRight="#dimen/cardview_toolbar_spacer"
android:layout_marginTop="?attr/actionBarSize"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.12"
android:background="#android:color/black" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Hope you'll be inspired.