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

peer picture peer · Sep 8, 2015 · Viewed 22.8k times · Source

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)

Answer

Ankii Rawat picture Ankii Rawat · Sep 8, 2015

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>