Content overlapping when using Toolbar with static and scrolling content

Question

My app uses a regular toolbar with a drawer for navigation. It consists of fragment replacing to display different views while utilizing a single activity. However, when I try to display content using any fragment it overlaps with my toolbar.

What I have done to fix this is set the margin-top of all my fragments to the height of my toolbar. This fixes it but not when scrolling as seen here:

I have tried many different options but without success. Now for the code. Going from the top I have my activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    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"
    tools:context=".MainActivity"
    android:id="@+id/drawer">

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/drawer_toolbar" />

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/content_main" />

    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        app:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_header"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />
</androidx.drawerlayout.widget.DrawerLayout>

As you can see I include the toolbar and below it my content_main.xml.

drawer_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red_500"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"/>

</LinearLayout>

And the content_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container_fragment" />

</LinearLayout>

Within this file, there is a <FrameLayout> which I use as a container to swap fragments in and out. As stated before all my fragments have this issue, but at the moment it only shows with my fragment that scrolls content shown below in my fragment_write.xml. This is the fragment shown above in the gif:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/mtrl_toolbar_default_height"
        tools:context=".ui.journalentries.WriteFragment">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:text="@string/date"
            android:textSize="18sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/journal_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="@string/journal_placeholder_date"
            android:textColor="@color/black"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title" />

        <TextView
            android:id="@+id/journal_label_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="@string/journal_label_title"
            android:textSize="18sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/journal_date" />

        <EditText
            android:id="@+id/journal_write_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:autofillHints="false"
            android:ems="10"
            android:hint="@string/journal_placeholder_title"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/journal_label_title" />

        <TextView
            android:id="@+id/journal_label_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="@string/journal_label_text"
            android:textSize="18sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/journal_write_title" />

        <EditText
            android:id="@+id/journal_write_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:autofillHints="false"
            android:ems="10"
            android:gravity="start|top"
            android:hint="@string/journal_placeholder_text"
            android:inputType="textMultiLine"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.497"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/journal_label_text" />

        <Button
            android:id="@+id/save_entry"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="8dp"
            android:text="@string/save"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/journal_write_text" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

I'm not sure what I'm missing. Any help is much appreciated.

Answer 1

Issue has been fixed. It did not necessarily have anything to do with my toolbar, but it was an issue with the way my NestedScrollView was setup in the fragment_write.xml file.

I had the fix using android:layout_marginTop="@dimen/mtrl_toolbar_default_height" on the nested ConstraintLayout, while it should have been on the NestedScrollView itself.

The resulting fragment_write.xml file looks something like this:

<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/mtrl_toolbar_default_height"
    android:fillViewport="true"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".ui.journalentries.WriteFragment">

    (...)

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>