Bottom Toolbar doesnt show in Fragment with Grid View

Question

i have a massive problem with my second toolbar which should be on the bottom of my View. It just doenst show up, i spent hours trying to make it work already but cant figure out why the scrollable GridList in my Fragment overshadows it...

Take a look at my main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- This DrawerLayout has two children at the root  -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- This LinearLayout represents the contents of the screen  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/main_container"
        >
        <!-- The ActionBar displayed at the top -->
        <include
            layout="@layout/toolbar_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"/>

        <!-- The Toolbar displayed at the bottom -->
        <include
            layout="@layout/toolbar_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <!-- The navigation drawer that comes from the left -->
    <!-- Note that `android:layout_gravity` needs to be set to 'start' -->
    <android.support.design.widget.NavigationView
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/black_90percent"
        app:menu="@menu/drawer_view"
        app:itemTextAppearance="@style/TextAppearance.AppCompat.Subhead"
        app:itemIconTint="@drawable/drawer_item"
        app:itemTextColor="@drawable/drawer_item"
        app:itemBackground="@drawable/drawer_item_background"
        app:elevation="16dp"
    />
</android.support.v4.widget.DrawerLayout>

And here is my animation_fragment.xml (thats the layout of the fragment that gets loaded into the main_activity.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:layout_height="match_parent"
        tools:context="com.example.pymdev.pym.AnimationFragment">

        <GridView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:horizontalSpacing="4dp"
            android:numColumns="2"
            android:verticalSpacing="4dp" />

        <TextView
            android:id="@android:id/empty"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" />

    </FrameLayout>

I want to create something like this where you have a second tool on the bottom for controls. :

I am very close already, the grid with images works and all the styling of the scrollable items is good. The only problem is that bottom toolbar. Please help, i am totally stuck here.

Answer 1

Try RelativeLayout instead

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_container">
        <!-- The ActionBar displayed at the top -->
        <include
            layout="@layout/toolbar_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_alignParentLeft="true"/>

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:layout_below="@id/toolbar_top"
            android:layout_above="@id/toolbar_bottom"/>

        <!-- The Toolbar displayed at the bottom -->
        <include
            layout="@layout/toolbar_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_alignParentBottom="true"/>

    </RelativeLayout>

Answer 2

use layout weights for the height of your grid view:

<!-- This LinearLayout represents the contents of the screen  -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/main_container"
    >
    <!-- The ActionBar displayed at the top -->
    <include
        layout="@layout/toolbar_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- The main content view where fragments are loaded -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/background_dark"/>

    <!-- The Toolbar displayed at the bottom -->
    <include
        layout="@layout/toolbar_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

This way your grid view won't use the entire screen.