How to integrate a floating action button into linear layout with toolbar

Question

I have the following list view to which I want to add a floating action button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/background_serious" >
    <include layout="@layout/toolbar"/>

    <ListView android:id="@id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000">
    </ListView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

</LinearLayout>

In the current form the button is not displayed at all. I tried changing LinearLayout to CoordinatorLayout as many examples feature it. But then I get an error:

java.lang.RuntimeException: Unable to start activity ComponentInfo{de.sudoq/de.sudoq.controller.menus.SudokuLoadingActivity}: android.view.InflateException: Binary XML file line #6: Error inflating class CoordinatorLayout
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
            ...
     Caused by: android.view.InflateException: Binary XML file line #6: Error inflating class CoordinatorLayout
            at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:757)
            ...
     Caused by: java.lang.ClassNotFoundException: Didn't find class "android.view.CoordinatorLayout" on path: DexPathList[[zip file "/data/app/de.sudoq-2/base.apk"],nativeLibraryDirectories=[/vendor/lib64, /system/lib64]]
            ...

I also tried FrameLayout but then the list goes over the toolbar(you can see the toolbar under transparent parts of list items, but they cover the toolbar, not the other way around)

Solution 1

Try to put ListView and FloatingActionButton inside FrameLayout

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:background="@drawable/background_serious" >

      <include layout="@layout/toolbar"/>
  <FrameLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">

          <ListView android:id="@id/android:list"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:cacheColorHint="#00000000">
          </ListView>

     <android.support.design.widget.FloatingActionButton
         android:id="@+id/fab"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="end|bottom"
         android:layout_margin="@dimen/fab_margin"
         android:src="@drawable/ic_done" />

  </FrameLayout>
</LinearLayout>

Solution 2

This worked for me:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context=".HomeFeedActivity">
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_action_add" />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:fitsSystemWindows="true"
    tools:context=".HomeFeedActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@null" />

</LinearLayout>

Solution 3

you need to use android.support.design.widget.CoordinatorLayout as your root layout instead of LinearLayout then only android.support.design.widget.FloatingActionButton will work

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/background_serious" >

// your code

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