CollapsingToolbarLayout is not behaving well

Question

I have problems to achieve a correct behaviour for my collapsingtoolbarLayout. I have researched many solutions provided by other users in stackoverflow, but till now, I haven't been able to solve it.

Here is the view when not collapsed:

Here is the view when collapsed:

Now the view I would like to achieve when collapsed. The weird thing is that after the user taps into the FABedit and scroll down, the desired results is achieved:

Manifest:

<activity
        android:name=".GDriveActivities.DeleteActivity"
        android:theme="@style/AppTheme.NoActionBar" />

Style.xlm:

    <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    <item name="android:statusBarColor">@null</item>
</style>

In the activity_detail.xml, I have tried with and without a FrameLayout. Without the frame layout, the collapsingtoolbarLayout become transparent when collapsed:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:transitionName="tMainHolder">

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/activity_background"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/header.collapsing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        android:background="@android:color/white"
        app:contentScrim="?attr/colorPrimary">

        <FrameLayout
            android:id="@+id/main.framelayout.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0">

            <include layout="@layout/activity_detail_project_detail"/>
            <include layout="@layout/activity_detail_editable_fields"/>

        </FrameLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/main.toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:popupTheme="@style/AppTheme.PopupOverlay"
            android:titleTextColor="@color/white"
            app:title=""/>

    </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"
    android:background="@color/activity_background"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/article_collection"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:requiresFadingEdge="vertical" />


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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_mode_edit_black_24dp"
    android:tint="@android:color/white"
    app:layout_anchor="@id/main.appbar"
    app:layout_anchorGravity="bottom|right|end"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="4dp" />


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

DetailActivity.java:

mAppBarLayout.addOnOffsetChangedListener(this);
...
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    int maxScroll = appBarLayout.getTotalScrollRange();
    float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;

    handleAlphaOnTitle(percentage);
    handleToolbarTitleVisibility(percentage);

}

private void handleToolbarTitleVisibility(float percentage) {
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {

        if(!mIsTheTitleVisible) {
            collapsingToolbarLayout.setTitle(mProject.getpName()+ ":Article Collection");
            mIsTheTitleVisible = true;
        }

    } else {

        if (mIsTheTitleVisible) {
            collapsingToolbarLayout.setTitle("");
            mIsTheTitleVisible = false;
        }
    }
}

private void handleAlphaOnTitle(float percentage) {
    if (percentage >= PERCENTAGE_TO_HIDE_TITLE_DETAILS) {
        if(mIsTheTitleContainerVisible) {
            mIsTheTitleContainerVisible = false;
        }

    } else {

        if (!mIsTheTitleContainerVisible) {
            mIsTheTitleContainerVisible = true;
        }
    }
}

I have also tried solutions like the ones proposed here and here.

Any idea what am I doing wrong? If you need also the layouts I have included in the activity_detail.xml, let me know and I will include it.

Thanks in advance for your time. I would much appreciate any help. I am completely blocked.

score 0 · Accepted Answer · answered Dec 09 '16 at 11:14

just put app:layout_collapseMode="pin" in your appbar this are well example just copy paest all xml files http://saulmm.github.io/mastering-coordinator

here code - https://github.com/saulmm/CoordinatorExamples

or you can also use ancher for your actionbar

 <?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:background="@android:color/background_light">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/ioexample.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/ioexample.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                tools:ignore="ContentDescription"
                />
        </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:layout_marginTop="56dp"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/ioexample.toolbar"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:background="@color/brand_primary"
        android:elevation="4dp"
        app:layout_collapseMode="pin"
        app:layout_anchor="@id/ioexample.appbar"
        app:layout_anchorGravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Light"
        style="@style/ToolBarWithNavigationBack">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="8dp"
            android:minHeight="?android:attr/actionBarSize"
            android:orientation="vertical"
            >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
                android:text="@string/example_title"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse"
                android:text="@string/example_subtitle"
                />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>

Thanks for your answer. It didn't work, but your code helped me to solve the problem. It was app:layout_collapseMode="pin", but also I had to delete android:fitsSystemWindows="true" in the CoordinatorLayout. I really appreciate your help. I would give you +1, but I don't have enough reputation. — user274051, Dec 09 '16 at 12:13

CollapsingToolbarLayout is not behaving well

1 Answers1