스크롤시 애니메이션 (CollapsingToolbarLayout)

 

상품 상세화면에서 스크롤 상황에 따른 애니메이션 적용하기 ( 기본 머티리얼 기능 ) 

 

타이틀이 아래에 있는 이미지

 

타이틀이 툴바에 고정

 

 

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:collapsedTitleTextAppearance="@style/TextAppearance.MyApp.Title.Collapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="center|bottom"
            app:expandedTitleMarginBottom="50dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.MyApp.Title.Expanded"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:orientation="vertical"
                app:layout_anchor="@+id/appBarLayout"
                app:layout_anchorGravity="center">

	  	  <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="5dp"
                        android:background="@drawable/ic_tooltip_73dp"
                        android:gravity="center"
                        android:paddingHorizontal="5dp"
                        android:paddingBottom="5dp"
                        android:text="@{@string/format_view_count(output.mall.viewCount)}"
                        android:textColor="@color/bluey_grey"
                        android:textSize="11sp"
                        app:layout_constraintBottom_toTopOf="@+id/iv_profile"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        tools:ignore="SmallSp"
                        tools:text="30000명 보는중" />

                    <ImageView
                        android:id="@+id/iv_profile"
                        android:layout_width="84dp"
                        android:layout_height="84dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        bind:isRoundCorner="@{50}"
                        bind:placeholder="@{@drawable/ic_placeholder_profile}"
                        bind:src="@{output.mall.titleImage}"
                        tools:src="@drawable/ic_placeholder_profile" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/white"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_right_arrow_orange"
                app:navigationOnClickListener="@{() -> input.onBackPressed()}"
                app:title="@{output.mall.name}">

            </androidx.appcompat.widget.Toolbar>

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

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

	<RecyclerView/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>