I have a problem that I can't solve with Android. I have an UI composed by a Toolbar, a SearchView below toolbar and a TabLayout below SearchView.
I am trying to make sure that when scrolling, both the TabLayout and the SearchView above hide behind the toolbar and are not visible. At the same time, I need the toolbar title to start with a font size and while scrolling, the size changes until it is the size I define. For the latter I have tried with: app:collapsedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Collapsed" app:expandedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Expanded" and works. However I have played a lot with scrollFlags but I have not found a way to hide the TabLayout and the SearchView behind the toolbar while the latter is also collapsed. The most I have achieved is that they hide but the toolbar remains static. Any ideas? I leave some images of how I currently have it. Initial state image / Image after scroll
As you can see the first image is the initial state and the second one is when the user scrolls and the toolbar keeps static, does not collapse. I need the toolbar to collapse changing the font size and the searchview and tablayout hide behind Toolbar.
This is my current XML code for that result:
<RelativeLayout
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:background="@color/foundation"
android:id="@+id/coordinatorLayout">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="@color/foundation">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/foundation"
app:toolbarId="@id/toolbar"
app:collapsedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Collapsed"
app:expandedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dimen2XLarge"
android:layout_marginTop="?actionBarSize"
android:layout_marginBottom="?spacerSmall">
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/foundation"
android:paddingStart="0dp"
android:paddingEnd="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/app_ic_back"
app:titleTextColor="?android:textColorPrimary">
<com.flasher.finder.ui.custom.UnderlinedButton
android:id="@+id/discardButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="@dimen/dimenMedium"
android:paddingStart="@dimen/dimenMedium"
android:layout_gravity="end"
style="@style/Widget.Finder.Button.Link"
android:text="@string/app_finder_all_files_text"/>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
layout="@layout/skeleton_files_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/appbarLayout"/>
<com.finder.ui.custom.state.StateView
android:id="@+id/errorStateView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_centerInParent="true"
android:layout_marginStart="?spacerMedium"
android:layout_marginEnd="?spacerMedium"
android:visibility="gone" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/bottomCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/appbarLayout">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="@color/foundation">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/foundation"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/searchViewContainer"
android:layout_width="match_parent"
android:layout_height="36dp"
android:layout_marginStart="@dimen/dimenMedium"
android:layout_marginEnd="@dimen/dimenMedium">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="@dimen/dimenMedium"
android:paddingEnd="@dimen/dimenMedium"
android:textColor="@color/textSupport"
android:textSize="17sp"
android:textAppearance="@style/TextAppearance.Finder.Subtitle2.Regular"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:drawableStartCompat="@drawable/app_ic_finder_search"
android:drawablePadding="@dimen/dimenMedium"
android:text="@string/app_finder_search_text"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="36dp"
android:background="@color/foundation"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/dimenLarge"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
On the other hand, I found many examples on the internet of TabLayout + Toolbar + CollapsingToolbar but in all cases what is hidden is the toolbar and the TabLayout remains visible and I need the opposite.