Develop Reference

Android: Using jetpack navigation, how can you add a collapsingtoolbarlayout to your fragments without the back button breaking?

I have this collapsingtoolbar code below that was working perfectly. However when I switched to using Jetpack Navigation (Nav graph), hitting the back button on the app would cause every other view to suddenly shift down like so. How can i avoid this from happening?
Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/diningAppBar"
android:layout_width="match_parent"
android:layout_height="356dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/diningToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
>
<edu.msu.msumobile.ui.shared.CustomImageView
android:id="#+id/diningImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"/>
<TextView
android:id="#+id/diningHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="48dp"
android:paddingStart="#dimen/text_margin"
android:paddingEnd="#dimen/text_margin"
android:fitsSystemWindows="true"
android:layout_gravity="bottom|end"
android:gravity="bottom|end"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/diningDetailToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/diningDetailTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/textLightColor"
app:tabSelectedTextColor="#color/textSelectedColor"
app:tabTextColor="#color/textLightColor"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/diningViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The white area is added space after coming back from the fragment that contains the above code. It will persist across the entire app and only show correctly on the fragment that has this code:

Solved. Turns out that adding
android:fitsSystemWindows="true"
breaks jetpack navigation. Removing those from the above code removed the excess whitebar at the top of every other fragment.

How to change an image size perspective while scrolling?

Is there a way or a third party library that supports the image to be resizable while scrolling in Android, the same way contact images work in iPhone? I want the image to be large at first and to get smaller and smaller while scrolling down till it becomes of the smallest size and vise versa.

You can use a CoordinatorLayout. It allows you to specify how a view will behave as you scroll. In the example below, you can see that the view collapses, using layout_collapseMode. I suggest you check out this tutorial to learn more about what you can achieve with this kind of layout.
Here is the example XML (This example was taken from here):
<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:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
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/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"
>
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:lineSpacingExtra="8dp"
android:text="#string/lorem"
android:padding="#dimen/activity_horizontal_margin"
/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

SmoothAppBarLayout collapsed toolbar height is bigger than intended

I recently changed my AppBarLayout with SmoothAppBarLayout
It is smoother and faster so i am happy with the result. But this changed my toolbar height somehow and i couldn't yet fix it.
Collapsed ToolBar's height should be 'actionBarSize' but it is bigger than that.
It is not about toolbar title, disabling or changing the padding of it doesnt work. But it is about the behaviour.
Setting a new behavior like below solves the problem but I want a proper solution.
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
params.setBehavior(behavior);
First image shows the intended size, second shows the actual size.
Here is the part of my XML: (Didn't put all of it since it is pretty long)
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:minHeight="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:minHeight="210dp"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
<include
layout="#layout/get_quote_layout"
android:layout_width="match_parent"
android:layout_height="64dp"
app:layout_anchor="#id/nestedScrollView"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="pin" />
</android.support.design.widget.CoordinatorLayout>

I think the issue comes from fitSystemWindows. You can simplify your layout as below:
...
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
...

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);

Collapsible Toolbar with Custom View that Moves as Scrolling Happens and Gets Pinned (like in Phonograph)

I would like to achieve something similar to the following in my app, but I want the whole red area (where it says "Guardians Of The Gala..." in the screenshots below) to be a custom view. (Some elements would fade out as the toolbar is collapsed.)
``
`
I've been trying for hours and hours to get it to work, but to no avail.
Obviously, just putting it into <Toolbar> doesn't work, since it doesn't know that it's supposed to animate it:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
<include layout="#layout/link_view_title_bar"/>
I've tried doing most of the answers from here and here but nothing actually worked.
How could I do this, preferably using mostly XML and the Android Design Support library. Any help would be appreaciated.

<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/homeCollapseToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
//This can be changed to ImageView
<com.daimajia.slider.library.SliderLayout
android:id="#+id/homeSliderLayout"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:title=""
android:layout_width="match_parent"
android:layout_height="115dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" >
<ImageView
android:src="#drawable/ic_logo"
android:paddingLeft="10dp"
android:layout_gravity="center|top"
android:layout_width="wrap_content"
android:layout_height="35dp" />
</android.support.v7.widget.Toolbar>
//Instead of the TabLayout, put your Red Layout
<android.support.design.widget.TabLayout
android:id="#+id/homeTabLayout"
android:layout_marginBottom="15dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/homeViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>