Hide TabLayout and SearchView behind toolbar while toolbar collapses and change font size

23 Views Asked by At

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.

0

There are 0 best solutions below