CollapsingToolbarLayout | Scrolling and layout issues 2

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

Answers


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

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


Remove these two line from Imageview

 android:scaleType="centerCrop"
            android:fitsSystemWindows="true"

Need Your Help

Installed Postgres.app but it won't work

postgresql heroku psql

I just installed Postgres.app on my Mac but it won't work properly. I finished the installation and the app icon is on the menu bar and it says it is listening on port 5432, however, that is what h...

Export database schema into SQL file

sql sql-server database tsql export

Is it possible in MS SQL Server 2008 to export database structure into a T-SQL file?