Search code examples
androidandroid-coordinatorlayoutappbar

Why my content is showing below my Appbar?


I'm trying to add an AppBarLayout that, when there is no need to scroll (or content has not been scrolled), the elavation is 0, but when the user can scroll or have scrolled, then the elavation is shown (like Google Tasks app). In the new material Appbar documentation I found that adding the app:liftOnScroll="true" property to my Appbar will do the trick, but after adding that the content of my NestedScrollView shows above the toolbar:

enter image description here

The other problem I'm facing is, even if I don't use app:liftOnScroll="true" is that my NestedScrollView is not showing at the bottom of the Appbar: enter image description here

This is my Fragment's xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/white"
    android:fitsSystemWindows="true"
    tools:context=".ResetPasswordFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar_resetPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:liftOnScroll="true"
        >

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

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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollView_resetPassword"
        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="match_parent"
            android:orientation="vertical">

            <!-- Some Content -->

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

I know that if I add layout_marginTop="?attr/actionBarSize" to my NestedScrollView the problem will be kind of solved, but I've seen a lot of examples where they create the view that I want without adding that.

This is the style I'm using for my activity

<style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="android:statusBarColor">#fff</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/barlow</item>
    </style>

Thanks in advance!


Solution

  • appbar_scrolling_view_behavior works with CordinatorLayout . So you need to use CordinatorLayout as parent instead if ConstraintLayout..