Why are my Gridview elements overlapping the Toolbar in the android?

Question

I have been using FrameLayout as parent view to display Gridview elements where I want to display them below Toolbar but it's not getting displayed below Toolbar but overlapping the Toolbar like this.

Below is code of my xml layout file fragment_user.xml

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

    <!-- Add the Toolbar -->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle"
        android:title="Lingo"
        android:titleTextColor="@color/new_design_darker_shade">

        <androidx.appcompat.widget.SearchView
            android:id="@+id/searchView"
            android:layout_marginStart="50dp"
            android:layout_marginEnd="40dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFF"
            android:queryHint="Search..."
            android:iconifiedByDefault="false" />
    </androidx.appcompat.widget.Toolbar>

    <!-- NestedScrollView to contain the GridView and make it scrollable -->
    <androidx.core.widget.NestedScrollView
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp"
        android:fillViewport="true">

        <!-- Your GridView -->
        <GridView
            android:id="@+id/mainSpecimens"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="?android:actionBarSize"
            android:clipToPadding="false"
            android:horizontalSpacing="6dp"
            android:numColumns="3"
            android:verticalSpacing="6dp" />
    </androidx.core.widget.NestedScrollView>
</FrameLayout>

Answer 1

The NestedScrollview has it's height set to match parent. So it will fill out the whole screen.

Replace the top level FrameLayout with a ConstraintLayout and place the toolbar and NestedScrollview below each other.

Answer 2

FrameLayout drawn its child views in a stack.

LinearLayout drawn its child views vertically/horizontally.

ConstraintLayout drawn its child views with constraints to each other or to ConstraintLayout itself.

It's best that you have a basic understanding of these layouts, because they're currently the most common layouts in uses. You can build any kind of UIs with only just LinearLayout and FrameLayout or ConstraintLayout.

Update your xml:

<LinearLayout 
    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:orientation="vertical">

...

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
...

Setting android:layout_height="0dp" and android:layout_weight="1" will make the child view to take all the available space.