CollapsingToolbarLayout issue, LinearLayout is also showing when it's collapsed & Toolbar background not working

22 Views Asked by At

Hi dear android developer, hope you are doing well.

I'm having problem to achieve one thing while i'm working on my project.

When I scroll my RecyclerView, then the CollapsingToolbarLayout collapsed and expanded, but my title Toolbar shows on the top of the LinearLayout (id: "search_header"). And in the background of Toolbar, the LinearLayout keeps showing, but it should be hidden. And another problem is, when CollapsingToolbarLayout is expanded, the title should show by taking more space in bottom of LinearLayout . Let me share two screenshot.

When expanded: on expanded

When Collapsed: on collapsed

My XML Code:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_centerInParent="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:toolbarId="@id/fakeTitle"
            app:titleCollapseMode="scale"
            app:collapsedTitleTextAppearance="@color/white"
            app:collapsedTitleGravity="start"
            app:expandedTitleGravity="center"
            app:contentScrim="@color/light_background"
            app:titleTextEllipsize="middle"
            app:collapsedTitleTextColor="@color/white"
            app:expandedTitleTextColor="@color/white"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap">


            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/fakeTitle"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                app:title="Result List"
                app:layout_collapseMode="pin"
                />

            <LinearLayout
                android:id="@+id/result_search_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/light_background"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:foreground="@color/transparent"
                android:paddingHorizontal="16dp"
                app:layout_collapseMode="parallax">

                <androidx.appcompat.widget.AppCompatSpinner
                    android:id="@+id/cityNameSpinner"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="6"
                    android:foreground="?selectableItemBackground"
                    android:gravity="start"
                    android:paddingVertical="16dp"
                    android:spinnerMode="dialog" />

                <Spinner
                    android:id="@+id/bloodGroupSpinner"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:foreground="?selectableItemBackground"
                    android:paddingVertical="16dp"
                    android:spinnerMode="dialog" />

                <Button
                    android:id="@+id/searchDonors"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/deep_background"
                    android:text="Search" />
            </LinearLayout>




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


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_results_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

As I told you my problem, or I'm not being able to achieve my target, I need your help to finalize my project.

  1. I need the title Toolbar shown bottom of my LinearLayout by taking more space on top.
  2. And secondly, when CollapsingToolbarLayout collapsed, the Toolbar should be shown on left, and the LinearLayout should be hidden.

And I don't want to use programming language (Java or Kotlin here) here. I need to complete this with XML. And I think it's possible.

Thanks in advance. Hope you will find me the best solution.

0

There are 0 best solutions below