Wednesday, 4 January 2023

How to make content draw behind a non full width Toolbar (Like new Gmail or Google App)

What I'm trying to implement is a Toolbar that is not full width (has a margin on all sides of 16dp) like the following:

Gmail - Please note that the recyclerview can be seen scrolling behind the toolbar Gmail

Google App - Same thing, the cards can be seen behind the toolbar. Google App

Additionally, these toolbars hide when scrolling down and appear when scrolling up.

The content of the toolbar is not what I'm worried about right now.

I'm assuming this is done using a Coordinator Layout so this is the skeleton I have:

  • Coordinator Layout
    • AppBarLayout
      • Toolbar
    • NestedScrollView (appbar_scrolling_view_behavior)
      • ConstraintLayout
<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:animateLayoutChanges="true"
    tools:context=".MainContentFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_margin="32dp"
        android:background="@android:color/transparent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/holo_red_dark"
            app:layout_scrollFlags="scroll|enterAlways">


        </androidx.appcompat.widget.Toolbar>

    </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">

        ...

This is the output before scrolling output

And after scrolling down output2

As you can see the space outside the toolbar is not transparent but has that grey background, since the content is going under it and cannot be seen.



from How to make content draw behind a non full width Toolbar (Like new Gmail or Google App)

No comments:

Post a Comment