Develop Reference

Extra space between Collapsing Toolbar Title when expanded

I am facing problem for reducing left spaces of the Collapsible Toolbar Layout title. I want to align the title just below of the back button and I am unable to reduce the space. Thanks in advance. Here is the code.
<?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:background="#color/white"
android:fitsSystemWindows="true"
tools:context="com.example.ManualConfigActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/scale_140dp"
android:background="#color/white"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="#dimen/scale_0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center_horizontal"
app:expandedTitleGravity="bottom"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/tv_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#drawable/ic_back"
/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/content_scrolling"
layout="#layout/menu_content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

You forget to add app:layout_scrollFlags="scroll|enterAlways" in CollapsingToolbarLayout
& if possible please attach the issue picture because it is easy to understand others

Disable toolbar scrolling when pressing on it

I tried to find someone with the same question but didn't really know what to search for. If someone else finds a simliar question, just let me know!
I've implemented the toolbar from the design library as follows:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/mainTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
and the toolbar layout:
<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/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
The AppBarLayout is a direct child to the CoordinatorLayout. Below the AppBar I have a RecyclerView that correctly lets the AppBar collapse when scrolling up.
However I'm able to press directly on the AppBar and then move my finger up and that way the toolbar collapses even though my RecyclerView is completely empty. I can expand it again by scrolling down on the toolbar again. This behavior doesn't happen when scrolling where the RecyclerView is.
I hope my problem is understandable. I'm using version 25.1 of the support library.
Thanks!
Edit: I tried the solutions below. Didn't change anything. Down below I added a video to show what my issue is. So it's really about the situation when the screen is not full (so no elements from the RecyclerView goes off the screen): If that's the case I don't want the Toolbar to hide at all. In other words: Only hide the toolbar if any elements from RecyclerView go off the screen.
https://drive.google.com/file/d/0Bzrw-IuZ9USuMURVVkRfb3dkRTQ/view?usp=sharing
If any more code is needed from my side just let know.

Try this
The entire project is at this location:
https://github.com/slidenerd/Android-Design-Support-Library-Demo
The below code works for me(This Git project belongs to slidenered. Thanx to him):
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="slidenerd.vivz.navigationviewdemo.FourthActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
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|right"
android:layout_margin="16dp"
android:src="#drawable/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />

if u want to fixed the toolbar when appbar is scrolled
try this:
<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="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
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.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
put your toolbar under a CollapsingToolbarLayout and app:titleEnabled="false"
By setting it to false, you'll get the desired behaviour. The title stays fixed at the top of the screen.
you can do it programetically also:
CollapsingToolbarLayout.setTitleEnabled(false);

CollapsingToolBarLayout has dual toolbar

I am having issues with implementing CollapsingToolbarLayout. I have this problem:
Yes, I've got to place the view in the layout, but it collapses below the original toolbar (or ActionBar for that matter) as shown in the image below. I have no idea how to fix this.
Thanks for any help. I am using Android Studio 2.1.1.
Here is my 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"
tools:context=".ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/app_bar_layout"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/featuredImage"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:contentDescription="#string/article_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/article_container" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_share_variant" />
</android.support.design.widget.CoordinatorLayout>

I found out where I went wrong. I had left out the theme statement in the manifest. All I had to do was add the line android:theme="AppTheme.NoActionBar" to my activity in the manifest.
However, this brought up two new issues:
The new ToolBar scrolls out of view (does not stick to the top.)
The back button that should lead me to my previous activity is gone. However, I'll ask this as a separate question if I do not get the solutions from researching.

Hide ToolBar on View scroll

I'm using Fragment and RecyclerView inside.
I would like to hide Fragment's toolBar while I'm scrolling RecyclerView. It's work by design, but Toolbar hiding not completely.
How to solve this problem?
Start scroll point:
Final scroll point:
Here is 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.avalank.financy.Main2ActivityTest">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<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/container"
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="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

You can use the CollapsingToolbar for achieveing such functionality. You can find a good tutorial here.

You are right, i've tried that and that worked without below code in the Styles.xml:
<item name="android:windowTranslucentStatus">true</item>
Finally, check this answer with two methods/tricks to do that: https://stackoverflow.com/a/35241363/4409113
Also, you can use CollapsingToolbarLayout with some flags like:
app:layout_scrollFlags="scroll|snap"
Also, let's mention that i've deleted this line:
android:paddingTop="#dimen/appbar_padding_top"

How to make AppBarLayout to completely disappear with windowTranslucentStatus set to true

I'm developing an Android app using the new design library. I would like to create a similar scrolling effect that is used in the new Google Photos app. I would like the AppBarLayout to scroll off of screen completely so that the recycler view would scroll behind the status bar.
I've set windowTranslucentStatus to true in the app's theme. Here's the xml of the main activity:
<?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">
<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.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Here's what this looks like when scrolled down:
The Toolbar doesn't completely disappear.
Thanks for help!

Here's what i used in my application
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

This was about as close as I could get with the CoordinatorLayout (just playing with the margins on the toolbar)... not close enough imo:
<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:fitsSystemWindows="true"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:paddingTop="25dp"
android:layout_width="match_parent"
android:layout_height="81dp"
android:layout_marginTop="-28dp"
android:background="#00ffffff"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:background="#ffffff"
android:fitsSystemWindows="true"
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="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_headphones_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I think it will be easier to do it manually...
Do you have any ideas or progress?

In my case I added fitSystemWindows="false" to CoordinatorLayout and fitSystemWindows="true" to its child - in your case to the RecyclerView. On NavigationView, DrawerLayout, AppBarLayout and Toolbar its "true". I've tried diferent values and then something breaks in my case. Android 5.1.1 and the latest support libraries (23.0.1). Hope it helps.

Use common pattern of AppBarLayout that comes from the app template when you create an Android project in Android Studio. Just few changes in XML layout and Java code:
XML Layout:
<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"
>
<FrameLayout
android:id="#+id/toolbar_container"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</FrameLayout>
</android.support.design.widget.AppBarLayout>
Java Code:
ViewCompat.setOnApplyWindowInsetsListener(toolbar, new OnApplyWindowInsetsListener() {
#Override
public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
toolbarContainerLayout.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);
return insets;
}
});

Add fitsSystemWindows="true" for your AppBarLayout and CoordinatorLayout.