CollapsingToolbarLayout | Scrolling and layout issues 2

Question

Backgroud

I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size

Header Image (Currently just an ImageView)
Scrollable content

Issues

The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
- It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
- Just the Header Image should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.
- After both the Expanded Toolbar and the Toolbar itself become hidden
The Up Arrow does not show up in the Toolbar

Code

Layout.xml

<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: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">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="16dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/download"

                android:scaleType="centerCrop" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/anim_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <fragment
            android:id="@+id/detail"
            android:name="<package>.<fragment_name>"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.NestedScrollView>

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

OnCreate

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
    setSupportActionBar(toolbar);

    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Avengers: Age of Ultron");

}

1 2 3

4 5 6

Adding `exitUntilCollapsed` to the CollapsingToolbarLayout should fix one point at least. — natario, Jun 17 '15 at 22:16
Other thing you can remove is `layout_below` on the NestedScrollView. — natario, Jun 17 '15 at 22:36

ianhanniballake · Accepted Answer · 2015-06-18T00:07:27.387

33

Question 1

Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.

I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.

Question 2

collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).

In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.

Question 3

This is due to using scroll|enterAlways. Change your flags as per #2

Question 4

As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  setContentView(R.layout.test);

  final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
  setSupportActionBar(toolbar);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);

  CollapsingToolbarLayout collapsingToolbar =
      (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  collapsingToolbar.setTitle("Avengers: Age of Ultron");
}

edited Jun 18 '15 at 00:07

answered Jun 17 '15 at 23:55

ianhanniballake

191,609
30
470
443

OK, these fixed most of the issues... **except Q4** as the back arrow is NOT showing. I figured Q2 and Q3 where linked – Christopher Rucinski Jun 18 '15 at 00:11
NOTE: I had to do your fixes to **Q1 and Q2/3 at the same time**. Individually they cause layout issues. I think that was my issue before. – Christopher Rucinski Jun 18 '15 at 00:12
Also, I think some of the image is hidden behind the status bar, maybe I can set it to tranparent....got to look at how to do that..... – Christopher Rucinski Jun 18 '15 at 00:14
Alright, Google Android Developer Advocate!! Is my Q4 related to this known bug ... https://code.google.com/p/android/issues/detail?id=175240. Actually, I do remember seeing the **App Bar Action Overflow icon** before. With some changes, it disappeared, but I don't know what that change was. Maybe now with your suggestion, the back navigation and action overflow will appear??? – Christopher Rucinski Jun 18 '15 at 00:27
I have a problem my layout is not scrolling even after following this complete post – Gopal Singh Sirvi Jun 25 '15 at 11:06
@ChristopherRucinski Hi... to your Q4, I've just had similar problem and solved it by adding "android:fitsSystemWindows="true" to the Toolbar. – Luboš Staráček Jul 22 '15 at 09:05
on collapse i want to set the background image as the home icon image is it possible – Maheshwar Ligade Sep 02 '15 at 05:44
I'd like to add that dont set `setDisplayShowHomeEnabled(true)` for the Toolbar otherwise the title disappears. Only set `setDisplayHomeAsUpEnabled(true)` – Ali Kazi Jul 29 '16 at 02:37
@ianhanniballake : how to set collapsingToolbar.setTitle as two line . Ultron in one line and online in another line – DKV Aug 08 '16 at 11:05

score 0 · Answer 2 · edited Dec 22 '16 at 13:26

0

Remove app:contentScrim="?attr/colorPrimary" from your layout XML in CollapsingToolBarLayout tag. It will show the back button in toolbar

edited Dec 22 '16 at 13:26

FelixSFD

6,052
10
43
117

answered Dec 22 '16 at 13:22

Anish Bhandari

44
3