back button not showing up in CollapsingToolbarLayout

Question

Hi I am doing a simple app to try out material design. Unfortunately, following the incredible tutorial here and trying out the samples here (These are incredible sources for FYI in material design) I am struggling to make my app toolbar to work perfectly as it should. For instance, the back button right next to the title on collapse in not showing up. BUT I can simply click that area where it should be and it responded.

So therefore the button is there but it is not showing up and I cannot figure out why. Also, as the toolbar collapsed, the toolbar doesn't change its color to primary color I set. contentScrim doesn't seem to react on collapse mode but I will post another question for this.

Here is what it currently looks like:

Now on collapse, the title is noticeably far to the right. The button is there, I can click it, it returns to my app's homescreen but the back icon is not there.

Here is the layout file for the 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".HomeScreenActivity"
    android:weightSum="1">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_note"
        android:layout_width="match_parent"
        android:layout_height="168dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout_note"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_note"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <ImageView
                android:src="@drawable/backgroud_note"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                app:layout_collapseMode="parallax"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        ...    
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar_note"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_send_white_24dp" />

</android.support.design.widget.CoordinatorLayout>

I am using API 22 build 23.0.2 all of my support libraries are at 23.1.0

Answer 1

I found the answer, it seems the tutorial doesn't work for my case since probably they do a different method on how to load the image backdrop. I simply put mine into the drawable-xxxhdpi folder and load it via android:src attribute I am not very sure if this makes difference at all. I peeked at the sample project and they defer the loading/caching of images at runtime in onCreateView() using Glide. I did otherwise. I guess this is the convention on huge file size for material backgrounds?

It appears to me it involves how the actual layout is positioned. I positioned the ImageView below the toolbar. So the imageview gets rendered first, I believe. The ImageView is always there even though the Toolbar entered. This must be the reason why the contentScrim looked like it failed to recognize that it is already on Toolbar mode. The ImageView is blocking the entire Toolbar!

So I placed the ImageView below the Toolbar. This time, Toolbar gets to show up first and then the image. It worked!

Here is my new layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".HomeScreenActivity"
    android:weightSum="1">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_note"
        android:layout_width="match_parent"
        android:layout_height="168dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout_note"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:src="@drawable/backgroud_note"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_note"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                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="fill_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        ...    
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar_note"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_send_white_24dp" />

</android.support.design.widget.CoordinatorLayout>

I am thinking maybe if I could delay the loading of image a bit (like deferring the image loading at onCreateView()) making way for the toolbar to show up first, maybe it won't matter how I positioned my elements inside the CollapsingToolbarLayout. But this is just my rough guess. I can always be wrong.

Answer 2

Just use app:layout_collapseMode="pin"inside Toolbar! It's work fine) Thanks