CollapsingToolbarLayout | Scrolling and layout issues 2

Question

Related Questions

CollapsingToolbarLayout | Scrolling and layout issues

Backgroud

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

1. Header Image (Currently just an ImageView)
2. Scrollable content

Issues

1. 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.

2. 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

3. 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

4. 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

Answer 1

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