Marco
Marco

Reputation: 625

Hide content from CoordinatorLayout when collapsed

I'm having troubles when i try to hide the content of the coordinator layout when collapsed.

For example:

Here i have my coordinator layout with my toolbar enter image description here

And when is collapses, it looks something like this

enter image description here

The problem is: i don't want that circle to be visible under my toolbar. What i need to do, is turn this toolbar transparent, to see everything under it while i'm scrolling. I've been searching on internet, but i haven't found anything who fits my needs.

Here's my code for CoordinatorLayout:

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:collapsedTitleTextAppearance="@style/TextStyle3"
        app:contentScrim="@color/ys_grey_asset_dark_transparency"
        app:expandedTitleGravity="bottom|center_horizontal"
        app:expandedTitleTextAppearance="@style/TextStyle1"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="100dp"
            android:scaleType="centerCrop"
            android:src="@color/ys_gridview_background"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

        <RelativeLayout
            android:id="@+id/rl_main_activity_background"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/logo_vertical_margin"
            android:background="@drawable/background_circle"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/img_main_activity_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_about" />
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/MyToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="50dp"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="enterAlways" />

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

Upvotes: 0

Views: 3978

Answers (2)

Mehta
Mehta

Reputation: 1226

set below scrollFlag to your RelativeLayout which contains ImageView:

 app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

Upvotes: 2

ʍѳђઽ૯ท
ʍѳђઽ૯ท

Reputation: 16980

I just changed and fixed some mistakes, now, it should work.Also, i don't think if this line is necessary for that ImageView:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleGravity="bottom|center_horizontal"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="100dp"
            android:scaleType="centerCrop"
            android:src="@color/colorPrimaryDark"
            app:layout_collapseMode="parallax" />

        <RelativeLayout
            android:id="@+id/rl_main_activity_background"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/ic_3d_rotation_black_36dp"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/img_main_activity_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/MyToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

Finally:

enter image description here

Upvotes: 3

Related Questions