How to hide TextView with animation after CollapsingToolbarLayout was collapsed?
TextView branchAddress, branchPhone and icon Search.
This is my xml code:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<ImageView />
<Toolbar />
<LinearLayout />
</CollapsingToolbarLayout>
</AppBarLayout>
<NestedScrollView />
</CoordinatorLayout>
Please help me. Thanks.
You can use addOnOffsetChangedListener to check your appbar is collapsed or not and change the visibility of textview.
Like Below:
appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener() {
override fun onStateChanged(
appBarLayout: AppBarLayout?,
state: State?
) {
if(state == State.COLLAPSED){
text = View.GONE
}else if(state == State.EXPANDED){
text.visibility = View.VISIBLE
}
}
})
There are a couple of issues you need to fix:
Defining a transparent color in app:contentScrim attribute: This should be an opaque color instead as it wraps the ImageView and the text using the app:layout_collapseMode="parallax" behavior. I used an arbitrary color for this.
Missing app:layout_collapseMode="parallax" in the LinearLayout of the couple of textViews that you want to hide.
Also you need to move the LinearLayout of the couple of textView's to be below the MaterialToolbar, as both has different collapsing behaviors.
Applying those changes:
<?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"
android:fitsSystemWindows="true"
tools:context=".presentation.common.view.Demo2HomeFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="@android:color/holo_blue_dark"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:statusBarScrim="@android:color/transparent">
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imgHeaderBackground"
android:layout_width="match_parent"
android:layout_height="192dp"
android:contentDescription="@null"
android:fitsSystemWindows="true"
android:foreground="@drawable/img_header_background_overlay"
android:scaleType="centerCrop"
android:src="@color/colorPrimary"
app:layout_collapseMode="parallax"
app:shapeAppearanceOverlay="@style/ImageviewRoundedBottom48dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_collapseMode="parallax"
android:layout_marginBottom="48dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/txtBranchAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{branch.address}"
android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
android:textColor="@color/white"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/txtBranchPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="{branch.phone}"
android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
android:textColor="@color/white"
tools:ignore="HardcodedText" />
</LinearLayout>
<ImageView
android:id="@+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:contentDescription="@null"
android:padding="8dp"
android:src="@drawable/ic_search" />
</LinearLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/imgBranchLogo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@null"
android:scaleType="fitStart"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:contentDescription="@null"
android:src="@drawable/abc_vector_test" />
</LinearLayout>
</com.google.android.material.appbar.MaterialToolbar>
</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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
