user1840378
user1840378

Reputation: 349

AppBarLayout not collapsing completely and expanding only partially until scroll reaches the top

So I have a CoordinatorLayout with an AppBarLayout and CollapsingToolbarLayout. Here's what it looks like when its expanded(left image) and collapsed(right image)

enter image description here enter image description here

The first problem I'm having is that when I scroll down the blue FrameLayout containing the two textviews does not collapse. What I want is for only the toolbar to be visible when fully collapsed. I've tried a couple things like changing scroll flags and moving around view and viewgroups but no success. Here's the xml and I also have windowTranslucentStatus set to true and the toolbar title set to empty.

<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/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:fitsSystemWindows="true"
    >

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

        <ImageView
            android:id="@+id/main.imageview.placeholder"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/material_flat"
            app:layout_collapseMode="parallax"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:title=""
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:layout_collapseMode="pin"
            />
    </android.support.design.widget.CollapsingToolbarLayout>


    <FrameLayout
        android:id="@+id/main.framelayout.title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:background="?colorPrimary"
        android:orientation="vertical"
        app:layout_scrollFlags="scroll|enterAlways"
        >

        <LinearLayout
            android:id="@+id/main.linearlayout.title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:gravity="bottom|center"
                android:text="Information"
                android:textColor="@android:color/white"
                android:textSize="30sp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="4dp"
                android:text="Tagline"
                android:textColor="@android:color/white"
                />

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

<android.support.v4.widget.NestedScrollView
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="yu.heetae.android.materialdesign.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text"/>

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/main.framelayout.title"
    app:layout_anchorGravity="top|end"
    app:srcCompat="@android:drawable/ic_dialog_email"/>

The second problem I'm having is that when scrolling up the imageview expands about 60% of it's height and then when scrolling reaches the top the last 40% expands. What I want to happen is for the imageview to fully expand once scrolling instead of partially. Below are some images that help explain it. The left image is when you're scrolling up normally and the right image is when you finally scroll up to the top.

enter image description here enter image description here

Upvotes: 3

Views: 2232

Answers (1)

Swapnil Kadam
Swapnil Kadam

Reputation: 4293

I faced similar issue of partial opening of toolbar. I added snap to scroll_flags tag. I hope this is what you were asking.

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

Upvotes: 1

Related Questions