Collapsing toolbar not pin the card view

user_12261666 0
Viewed 1399

I have created a XML with appbar layout, collapsing toolbar layout with imageview and nested scroll view in order to preform parallax scrolling.

However, I want to add a cardview inside the collapsing toolbar and pin it using the collapsing mode. It can't pin after scroll up. I have no idea what I made wrong. Anyone can help?

Here is my XML code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">


    <com.google.android.material.appbar.AppBarLayout

        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FFFFFF">


        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin">

                //textview
            </androidx.cardview.widget.CardView>
            <ImageView
                        android:id="@+id/imageView7"
                        android:layout_width="360dp"
                        android:layout_height="360dp"
                        android:scaleType="centerCrop"
                        app:srcCompat="@drawable/logo"
                        tools:srcCompat="@drawable/logo" />




    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="false"
        android:overScrollMode="always"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            //my content
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>
android-collapsingtoolbarlayout parallax android
2 Answers

As far as I know, only Toolbar can be pinned inside of CollapsingToolbarLayout. Everything else collapses. So you either put your layout you want to pin inside of Toolbar Layout (not recommended, will change size of toolbar, and positions of nav buttons, etc.) or you move it outside of CollapsingToolbar.

Just remember that AppBarLayout acts like a vertical LinearLayout.

One possible idea, if you design allows it, is to remove CollapsingToolbarLayout and try to build your UI inside of AppBarLayout. You can control what goes away and what stays using layout_scrollFlags.

user_62723690

This is a very simple technique that you can apply

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/home_bg_color"
        tools:context=".ui.match_detailds.MatchDetailsActivity">
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinatorLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/app_barlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:theme="@style/AppTheme.AppBarOverlay">
                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/collaps_toolabar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true"
                    app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                    <androidx.appcompat.widget.Toolbar
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/_150sdp"
                        app:layout_collapseMode="pin"/>
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/_150sdp"

                        app:layout_collapseMode="pin">
                    </androidx.constraintlayout.widget.ConstraintLayout>

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/layout_currentMatch_item"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:layout_marginTop="@dimen/_150sdp"
                        app:layout_behavior="@string/appbar_scrolling_view_behavior"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="1">

                    </androidx.constraintlayout.widget.ConstraintLayout>

                </com.google.android.material.appbar.CollapsingToolbarLayout>
            </com.google.android.material.appbar.AppBarLayout>

            <androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true"
                android:id="@+id/nestedviewhome"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior">
                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.core.widget.NestedScrollView>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
user_91586880
Related