Develop Reference

Moving A Button in CollapsingToolbarLayout

I'm trying to make toolbar button to stay at the bottom when collapsingToolbarLayout is expanded and moves up and get pinned when the collapsingToolbarLayout is collapsed. The way it behave now is always pinned on top. Here is what I have:
<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/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The toggle button always stays on top place, I want it to behave similar to WhatsApp edit button in group detail when it moves up and down as you expand the toolbar layout.

Solved it by taking the button out of the toolbar and putting it a child of the CollapsingToolbarLayout with margin bottom and collapsing mode as pin
<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/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right|bottom"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

For complex behaviors you need to code this in behavior classes
Step # 1:
Create a Custom Behavior
public class BottomBarBehavior extends CoordinatorLayout.Behavior<LinearLayout> {
private int defaultDependencyTop = -1;
public BottomBarBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BottomBarBehavior() {
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, LinearLayout child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, LinearLayout child, View dependency) {
//do something with the layout. see commented
return true;
}
}
Step # 2
Assign the behavior to the toolbar.
Either via xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
**app:layout_behavior=".BottomBarBehavior"**
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
More info here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html

Try this, I hope it will help you ...
<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/col"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<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"
app:elevation="4dp"
android:transitionName="#string/pic_transition_name"
app:layout_collapseMode="parallax">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/clpsToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/CollapsedText"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
>
<ImageView
android:id="#+id/iv_gallery"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<Button
android:id="#+id/mmv_toggle_detail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center|bottom"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
in JavaClass you will add below code .
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed
} else if (verticalOffset == 0) {
// Expanded
if (yourBtn.getVisibility()==View.VISIBLE) {
yourBtn.setVisibility(View.INVISIBLE);
}
} else {
// Somewhere in between
if (yourBtn.getVisibility()==View.VISIBLE) {
yourBtn.setVisibility(View.INVISIBLE);
}
}
}
});

How using Coordinator Layout load from Detail activity

i have a problem with my Coordinator layout xml, it takes from detail activity class. I don't know if click the item of RecyclerView and then my app force close.. Please tell me what is wrong with my class and my xml.
here the code of detail class
public class DetailActivity extends AppCompatActivity {
private CoordinatorLayout coordinatorLayout;
private CollapsingToolbarLayout collapsingToolbarLayout;
private Toolbar toolbar;
TextView nameTxt,propTxt,descTxt;
ImageView img;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
Intent i=this.getIntent();
String name=i.getExtras().getString("NAME_KEY");
String propellant=i.getExtras().getString("PROPELLANT_KEY");
String desc=i.getExtras().getString("DESCRIPTION_KEY");
String imageurl=i.getExtras().getString("IMAGEURL_KEY");
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
initToolbar();
coordinatorLayout =(CoordinatorLayout) findViewById(R.id.coordinator);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.maincollapsing);
collapsingToolbarLayout.setTitle("NAME_KEY");
nameTxt= (TextView) findViewById(R.id.nameTxtDetail);
propTxt= (TextView) findViewById(R.id.propellantTxtDetail);
descTxt= (TextView) findViewById(R.id.descDetailTxt);
img= (ImageView) findViewById(R.id.mainbackdrop);
nameTxt.setText(name);
propTxt.setText(propellant);
descTxt.setText(Html.fromHtml(desc));
PicassoClient.downloadImage(this,imageurl,img);
}
private void initToolbar(){
toolbar = (Toolbar) findViewById(R.id.maintoolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.sample_actions, menu);
return true;
}
}
and this my xml code :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator"
android:background="#android:color/background_light"
tools:context="com.tutorials.hp.ditkeu.m_DetailActivity.DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainappbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/maincollapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="10dp"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsedAppBarTopic">
<ImageView
android:id="#+id/mainbackdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/placeholder"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/maintoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/nameTxtDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:layout_alignParentStart="true"
android:paddingLeft="5dp"
android:text="Judul Berita"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/input_register_bg" />
<TextView
android:id="#+id/propellantTxtDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="5dp"
android:text="Tanggal "
android:textAppearance="? android:attr/textAppearanceSmall"
android:textColor="#color/input_register_bg" />
<TextView
android:id="#+id/descDetailTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Isinya... "
android:textColor="#color/input_login"
android:paddingLeft="5dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

one of the reasons you are calling
setSupportActionBar(toolbar);
before
initToolbar();
Actually u are calling setSupportActionBar(toolbar) twice in onCreate and in initToolbar() Do thisremove setSupportActionBar(toolbar) and getSupportActionBar().setDisplayHomeAsUpEnabled(true) from onCreate

Coordinatorlayout+collpasingtoolbar+recyclerview+editText not working as expected

First of all sorry to bring up another similar issue. But none of the other questions could answer my challenges. I created a github project here
https://github.com/winster/collapsingtoolbar.
activity_scrolling.xml
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
android:layout_above="#+id/footer">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
android:background="#color/colorPrimary"
android:alpha="1"
android:layout_alignParentBottom="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<EditText android:id="#+id/data"
android:layout_width="0dp"
android:layout_height="24dp"
android:hint="Enter data"
android:paddingLeft="10dp"
android:background="#null"
android:layout_marginRight="10dp"
android:layout_marginLeft="16dp"
android:lines="1"
android:layout_weight="3" />
<Button android:id="#+id/btn_send"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:text="SEND"
android:textSize="16dp"
android:textColor="#color/colorPrimary" />
</LinearLayout>
</RelativeLayout>
content_scrolling.xml
<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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="0dp"
android:scrollbars="vertical" />
</RelativeLayout>
ScrollingActivity.java
public class ScrollingActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private MyAdapter mAdapter;
private ArrayList<Card> arrayList;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
arrayList = new ArrayList<>();
mAdapter = new MyAdapter(this, arrayList);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setStackFromEnd(true);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.setAdapter(mAdapter);
}
#Override
protected void onResume() {
super.onResume();
for(int i=0;i<60;++i) {
arrayList.add(new Card("TEXT "+i));
}
mAdapter.notifyDataSetChanged();
if (mAdapter.getItemCount() > 1) {
((LinearLayoutManager)recyclerView.getLayoutManager()).setStackFromEnd(true);
recyclerView.getLayoutManager().smoothScrollToPosition(recyclerView, null, mAdapter.getItemCount() - 1);
//recyclerView.scrollToPosition(mAdapter.getItemCount()-1);
}
}
}
AndroidManifest.xml
<activity
android:name=".ScrollingActivity"
android:label="#string/app_name"
android:windowSoftInputMode="adjustPan">
Now there are 3 problems
RecyclerView is not scrolled to bottom though I tried different options such as stackFromEnd and smoothScrollToPosition
1.1
Keeping the appbar in expanded mode, if you tap on the EditText, Toolbar is not collapsed, instead it just scrolls up, but a portion of toolbar is visible as header
2.1
Keeping the appbar in collapsed mode, on tap of EditText scrolls the toolbar to top and is not visible.
3.1

Remove line android:fitsSystemWindows="true"
and remove status bar color or change color from transparent color to some
other color and change in Valus/styles.xml(v21).
Hope this may help U
if not try Changing app:layout_scrollFlags="scroll|exitUntilCollapsed"
to app:layout_scrollFlags="scroll|exitUntilCollapsed"|snap

AutoScroll Toolbar text when using CollapsingToolbarLayout

I have CollapsingToolbarLayout with long title with Toolbar inside.
Because of title is too long, its end is replaced by three dots. The problem is when CollapsingToolbarLayout is collapsed and Toolbar has CollapsingToolbarLayout's title, is still has three dots. I want to make title of Toolbar autoscroll if it's long.
My XML:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/recyclerview_background"
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="190dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorAppPrimary"
app:expandedTitleMarginEnd="8dp"
app:expandedTitleMarginStart="36dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="190dp"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_bg_3"
app:layout_collapseMode="parallax" />
<ImageView
android:id="#+id/imageViewPhoto"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_below="#+id/imageViewPhoto"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text=""
android:textColor="#color/white"
android:textSize="16sp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:ellipsize="marquee"
android:fitsSystemWindows="true"
android:gravity="top"
app:layout_collapseMode="pin">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:gravity="center"
android:textColor="#color/white"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTheme.TabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:tabIndicatorColor="#color/colorAppPrimary"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/tabs" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
Expanded CollapsingToolbarLayout:
Toolbar:

I have tested it and it is working. Have a look and see if it suits your need.
Add this text in your Toolbar View
<TextView
android:id="#+id/toolbar_title"
android:text="This will run the marquee animation forever"
android:textSize="#dimen/abc_text_size_title_material_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true" />
then in your activity class, add this line of code after
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
My Full code is below.
layout file
<?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.inducesmile.toolbartesting.MainActivity">
<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="?attr/colorPrimary"
android:scrollHorizontally="true"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<TextView
android:id="#+id/toolbar_title"
android:text="This will run the marquee animation forever"
android:textSize="#dimen/abc_text_size_title_material_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<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>
and the Activity class
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
This solution was partly from here
Update
I have add addOnOffsetChangedListener to AppBarLayout to detect when the CollapsingToolbarLayout is expanded or collapsed.
First instantiate the AppBarLayout
private AppBarLayout mAppBarLayout;
private TextView toolBarText;
the inside onCreate method
toolBarText = (TextView)findViewById(R.id.toolbar_title);
mAppBarLayout = (AppBarLayout)findViewById(R.id.app_bar);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
Toast.makeText(MainActivity.this, "Vert " + verticalOffset, Toast.LENGTH_LONG).show();
if(verticalOffset == 0){
// Expanded
toolBarText.setText("");
}else{
//collapsed
}
}
});
Check if it works for you

to remove the title of Toolbar when CollapsingToolbarLayout expanded add this snippet:
final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout)
findViewById(R.id.collapsing_toolbar_layout);
mAppBar.addOnOffsetChangedListener(new OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (collapsingToolbar.getHeight() + verticalOffset <
2 * ViewCompat.getMinimumHeight(collapsingToolbar)) {
mTitleTV.setVisibility(View.VISIBLE);
mTitleTV.animate().alpha(1).setDuration(600);
} else {
mTitleTV.animate().alpha(0).setDuration(600);
}
}
});

Coordiantor Layout not working with Listview

I have a listview which is the scrolling part in my activity .The problem is my listview is not scrolling .I have to hold the the appbarlayout to scroll.Here is my code-
The mainactivity.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" android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_collapseMode="parallax">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:fitsSystemWindows="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_gravity="bottom"
android:paddingBottom="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Followers"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Points"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Following"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<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>
The java code-
public class MainActivity extends AppCompatActivity {
ListView listView;
String[] strings={"Something","Everything","Nothing","Ok","Maybe","Whatever","Does it matter","Mybe again","Nothing","Nothing","Nothing","Nothing"};
ArrayAdapter<String> adapter;
com.facebook.drawee.view.SimpleDraweeView image;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
image= (SimpleDraweeView)findViewById(R.id.image_view);
image.setImageURI(Uri.parse("https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"));
listView= (ListView) findViewById(R.id.list_view);
adapter=new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,strings);
listView.setAdapter(adapter);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
}
My gradle dependency-
compile 'com.android.support:design:23.1.0'

This is because ListView does not support the NestedScrollingChild interface, which is required to deliver the scroll events that AppBarLayout and others rely on to manage their positioning.
The simplest option is to switch your usage from ListView to RecyclerView—which already implements the necessary interfaces. A more complicated choice would be to attempt to extend ListView and implement NestedScrollingChild from the support library (docs).