Search code examples
javaandroidandroid-coordinatorlayoutandroid-appbarlayoutcoordinator-layout

AppBarLayout not allowing other Views to match_parent


I'm using a layout with an AppBarLayout containing a Toolbar and a TabLayout, a ViewPager and a FloatingActionMenu.

My problem is that using an AppBarLayout causes other Views inside the CoordinatorLayout to not match the entire screen when using layout_height=match_parent, instead this other Views match what's left of the parent excluding the AppBarLayout. This behavior is perfect for my ViewPager, because otherwise its content would be covered by the AppBarLayout, but I need my FloatingActionMenu to match the entire screen, so that when my menu opens I can dim the screen.

So my question is: How do I make it so my FloatingActionMenu takes over the entire screen?

My XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
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:fitsSystemWindows="true"
tools:context="com.example.Home">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppBaseTheme.ToolbarPopup"
        app:theme="@style/AppBaseTheme.Toolbar">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabTextAppearance="@style/AppBaseTheme.TabText"
        app:theme="@style/AppBaseTheme.Toolbar"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/home_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<com.example.FloatingActionMenu
    android:id="@+id/fam"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom|end"
    android:padding="@dimen/fab_margin"
    app:menu_backgroundColor="#BB8b8b8b">

    <com.example.FloatingActionButton
        android:id="@+id/fab"
        style="@style/MenuButtonsStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</com.example.FloatingActionMenu>

Using a RelativeLayout as my root view or using a LinearLayout to hold my Toolbar and TabLayout would solve my problem, but I need to use CoordinatorLayout and AppBarLayout to add scrolling functionality.

EDIT:

After testing in different devices I found out that this problem only happens on newer versions, as you can see in the next photos.

On API 19: Older version: API 19

On API 23:

Newer version: API 23


Solution

  • The problem was that I wasn't specifying an android:elevation for my FloatingActionMenu, so the AppBarLayout was appearing on top of the Menu