Develop Reference

CollapsingToolbarLayout expand only when at the top

I have some problems with AppBarLayout and CollapsingToolbarLayout. This is what currently happens:
https://www.youtube.com/watch?v=z4yD8rmjSjU
The downwards scrolling motion is exactly what I want. However when I scroll up again, the orange bar should appear immediately (which it does), but I want the ImageView to start appearing only when the user has scrolled to the very top. Can anyone help me to achieve this effect?
This is my layout xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:text="ImageView"
android:textSize="20sp"
android:textColor="#android:color/white"
android:gravity="center"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="145dp"
app:layout_collapseMode="parallax"
android:background="#444"/>
<TextView
android:text="Top bar"
android:textColor="#android:color/white"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:text="Bottom bar"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:textColor="#android:color/black"
android:layout_height="50dp"
android:background="#ddd"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>

Customisation of CoordinatorLayout behaviour is hard. You want the orange bar to appear immediately but ImageView only after the content is scrolled to the top, but these views belong to one parent CollapsingToolbarLayout and both get either the behaviour you have now or the opposite with enterAlwaysCollapsed flag. I see no way to separate the behaviour for these views without messing with CoordinatorLayout/CollapsingToolbarLayout Java API.
If simpler behaviour is not an option and noone here points out a simple solution, I suggest trying a relatively new MotionLayout instead of dancing with CollapsingToolbarLayout internals, you will save yourself a lot of time in the end. It will be a little harder at start but it provides clear ways for customisation. Here's a very good article that shows how to build a UX similar to CoordinatorLayout but using MotionLayout. And the second part of this article with some additional customisations.

I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.
Setting the OnOffsetChangedListener:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->
topbar.translationY = Math.min(image.height.toFloat(), - offset.toFloat())
})
Layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="#+id/topbar"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>

There are lots of effects on the scrolling behavior that can be achieved by setting different layout_scrollFlags. In your case, I think the flag you want is enterAlwaysCollapsed. Add the flag along with enterAlways instead of replacing all the flags.
scroll will make the toolbar scroll like the rest of the content, enterAlways will make the toolbar AND the rest of the CollapsingToolbarLayout to pop back immediately after scroll up, whereas enterAlwaysCollapsed only expands the CollapsingToolbarLayout after the page is scrolled all the way to the top.
Here's the effect that enterAlwaysCollapsed achieves.

I think you can manage that from your code ,I have tried that by simply detecting behavior of layout
app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
{
// Collapsed
}
else
{
//Expanded
}
}
});

Try this #Mark.I got the scroll you showed in the Video
<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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:layout_marginTop="56dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Button goes under a layout which is defined below it

Hi I have a fab button in my layout "addfab" which is showing correctly in most phones but in android 4.4 kitkat hides under a Relative layout that is defined under it in xml.They both are defined to be below one object Here is my xml.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fbutton="http://schemas.android.com/tools"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bar1"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:textAlignment="center"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/addfab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/bar1"
android:layout_marginRight="20dp"
android:layout_marginTop="130dp"
android:clickable="true"
android:elevation="2dp"
android:src="#drawable/logo_green"
app:fabSize="normal"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pic"
android:layout_below="#id/bar1"
android:background="#color/colorPrimary">
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:id="#+id/image_gol"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="5dp"
app:civ_shadow="false"
app:civ_shadow_radius="5"
app:civ_shadow_color="#9e9e9e"/>
</RelativeLayout>
What should I do? Why androids act differently?

Instead of RelativeLayout, use CoordinatorLayout:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
//Toolbar here
</android.support.design.widget.AppBarLayout>
// your fab and relativelayout here
</android.support.design.widget.CoordinatorLayout>
As the root level tag. You'll be able to anchor it(The FloatingActionButton) to the views you want by using:
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|right|end"
Attributes. This also allows you to have more functionality like hiding Toolbar or etc in future. You'll also need to change-remove old RelativeLayout's attributes later in order to use CoordinatorLayout.
Take a look: https://guides.codepath.com/android/floating-action-buttons

app:elevation="0dp" hide layout inside toolbar

I have take custom layout inside the toolbar and perform action according to it.
but in some case i want make toolbar transparent so when i have set app:elevation="0dp" than it will hide my custom layout but still action will performed when click on that area.
I have used following layout inside toolbar.
Edited
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#null"
android:padding="#dimen/activity_vertical_margin"
android:src="#drawable/ic_menu" />
<FrameLayout
android:id="#+id/frmNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/iv_menu"
android:layout_toRightOf="#+id/iv_menu"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:padding="#dimen/padding_5">
<ImageView
android:id="#+id/iv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#null"
android:padding="#dimen/padding_5"
android:src="#drawable/ic_notification" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="#dimen/padding_5"
android:background="#drawable/bg_bage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/eight"
android:textColor="#android:color/white"
android:textSize="#dimen/font_8" />
</FrameLayout>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/frmNotification"
android:contentDescription="#null"
android:src="#drawable/logo_header" />
<ImageView
android:id="#+id/ivElasticSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/padding_10"
android:paddingRight="#dimen/padding_15"
android:src="#drawable/ic_search" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
How to overcome this issue because in some scenario we want transparent toolbar but icon inside it should be display.
Here I have attached image how actually look like.

Your idea of app:elevation="someValue" is wrong, it does not hide the toolbar.The attribute app:elevation is used to show how much you want to make the toolbar or any other view that supports that attribute raised above the surface. Consider the surface as the floor on which the views are placed, now if you want to show some view like toolbar raised to other views you use that attribute.
if you want to make it transparent do it like this.
According to Material Design Guidelines, the elevation for appbar should be 4dp. So you should not set it to 0dp.

Use android:background="#null" instead of app:elevation="0dp".
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null">
EDIT
You want to remove the shadow of the toolbar. To do that use app:elevation="0dp" only for appbar layout. Your code before revision shows you used for both toolbar and appbar. Remove it for toolbar.
UPDATE
I tested the code and the following code seemed to do the work.
<?xml version="1.0" encoding="utf-8"?>
<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:background="#drawable/testbg">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<!-- Rest of the code -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
OUTPUT IMAGE

Two Toolbars, Only the second one should collapse on scroll in CoordinatorLayout

I have the following code inside a CoordinatorLayout. What this code basically does is that it has two toolbars on top of one another See Image Here. What I plan to achieve is that when users scroll down, only the second toolbar collapses.
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_home_appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:theme = "#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_filters"
android:background="#color/colorAccent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/category"
android:textSize="12dp"
style="#style/FlatButton"
android:id="#+id/toolbar_category_btn"
android:textColor="#android:color/white"
android:layout_height="wrap_content" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/filter"
android:id="#+id/toolbar_filter_btn"
android:textSize="12dp"
android:textColor="#android:color/white"
style="#style/FlatButton"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

You can use CollapsingToolbar layout to achieve this. Its one of the material design UI component they have released when you want to collapse any view over scroll. Follow the below link to understand how it works,
https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
use toolbar instead of imageview in the example.

XML - Listview being cut by viewpager

I'm using a viewpager to show fragments on my app, but I'm having some issues with the XML, I would like to fix my code because when I run the fragments, the viewpager doesn't show the the last part of the design, I'm using a listview on each fragment, and the last row is being cut. What do I need to change on my code to fix that?
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#c42542">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:background="#d12240"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Live rooms"
android:textColor="#ffffff"
android:textSize="18dp" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="23dp"
android:src="#mipmap/ic_share" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:src="#mipmap/ic_search" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<!-- Scrollable View -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Thank you.

Hey it seems this can occur when using ListView within the CoordinatorLayout, but you can fix it by simply changing it to a RecycleView. There's also a solution for Android 5.0+. Check out Sha's answer here for more info.

Assign bottom margin to Listview.
<ListView
android:paddingBottom= "20dp"/>