Grid View shows in front of tool bar not below

Question

I just Create a simple an xml file with a tool bar and grid view, the problem is the grid view show infornt of tool bar not below the tool bar like this Grid View

and this is my xml file

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="abtech.waiteriano.com.waitrer.MenuActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <GridView
        android:id="@+id/menuGridView"
        android:layout_width="match_parent"
        android:background="#d2d2d2"
        android:layout_height="fill_parent"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:layout_below="@+id/toolbar" />
</FrameLayout>

Answer 1

You have diferent options

• Change your FrameLayout for LinearLayout (orientation vertical)

• Change your FrameLayout for RelativeLayout and use 'layout_below'

I recommend you to use LinearLayout

Examples:

LinearLayout

<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="wrap_content"
    android:orientation="vertical"
    tools:context="abtech.waiteriano.com.waitrer.MenuActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <GridView
        android:id="@+id/menuGridView"
        android:layout_width="match_parent"
        android:background="#d2d2d2"
        android:layout_height="fill_parent"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:numColumns="3"
        android:stretchMode="columnWidth" />
</LinearLayout>

---

RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="abtech.waiteriano.com.waitrer.MenuActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <GridView
        android:id="@+id/menuGridView"
        android:layout_width="match_parent"
        android:background="#d2d2d2"
        android:layout_height="fill_parent"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:layout_below="@id/toolbar" />
</RelativeLayout>

Answer 2

FrameLayout is designed to display a single item.

Generally FrameLayout should be used to hold single child view.

You can however add multiple children to a FrameLayout and control their position within the FrameLayout.

So if you want to continue with FrameLayout then you can add LinearLayout or RelativeLayout as child inside FrameLayout as given below.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

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

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" />

<GridView
    android:id="@+id/menuGridView"
    android:layout_width="match_parent"
    android:background="#d2d2d2"
    android:layout_height="fill_parent"
    android:layout_margin="4dp"
    android:columnWidth="80dp"
    android:gravity="center"
    android:horizontalSpacing="5dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:layout_below="@+id/toolbar" />

Answer 3

Change FrameLayout to LinearLayout and set the orientation to vertical :

<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="wrap_content"
    android:orientation="vertical"
    tools:context="abtech.waiteriano.com.waitrer.MenuActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <GridView
        android:id="@+id/menuGridView"
        android:layout_width="match_parent"
        android:background="#d2d2d2"
        android:layout_height="fill_parent"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:layout_below="@+id/toolbar" />
</LinearLayout >