How do you put a floating action button (FAB) above a ListView in a Fragment in xml?

Question

This is my XML but it complains that I have "two roots"..

<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/list"
    style="@style/ListView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_gravity="bottom|end"
    fab:elevation="6dp"
    fab:pressedTranslationZ="12dp"
    fab:backgroundTint="@color/accent"/>

If I wrap them both in another root such as RelativeLayout or FrameLayout my app crashes...

Caused by: java.lang.ClassCastException: android.widget.FrameLayout cannot be cast to android.widget.ListView

My ListView is populated by an adapter in my Fragment like so...

ListView mListView = (ListView) inflater.inflate(R.layout.main_list_fragment, container, false);

FloatingActionButton myFab = (FloatingActionButton) mListView.findViewById(R.id.fab);
myFab.setOnClickListener(new View.OnClickListener() {
  public void onClick(View v) {
    //// TODO: 23/09/15
  }
});

int[] to = new int[]{R.id.item};
String[] columns = new String[]{"name"};
listAdapter = new CustomAdapter(this.getActivity(), null, columns, to);
this.setListAdapter(listAdapter);

How do I structure my XML so that I have my FAB floating above the ListView?

Answer 1

Here's how I fixed the issue, please note that the Floating Action Button (FAB) in this case stays docked to the bottom right of the activity irrespective of the height of the list view.

activity_base.xml

Base activity which hosts DrawerLayout, Toolbar and NavigationView, see the FrameLayout with id "activity_content". This FrameLayout will be used at runtime to place layout containing ListView (I can also place GridView, based upon user preference here).

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/activity_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
>

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <FrameLayout
            android:id="@+id/activity_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <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_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        android:src="@mipmap/ic_action_shred_light" />

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"/>

content_main.xml Here is my subject ListView layout which I want to place in activity_base.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_base">

    <TextView
        android:id="@+id/address_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="/"
        android:textSize="13dp"
        />

    <ListView
        android:layout_height="0dip"
        android:layout_width="fill_parent"
        android:id="@+id/list_view"
        android:layout_weight="1"
        android:textFilterEnabled="true"
        android:fastScrollEnabled="true"
        android:drawSelectorOnTop="false" />

</LinearLayout>

Answer 2

You can use CoordinatorLayout layout as follow. What do you meant by above list view, if you meant at top of list then you have to change android:layout_gravity="top"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:background="@color/white"
    android:divider="@null"
    android:orientation="vertical">
    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@android:id/list"
        style="@style/ListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent”/>
</LinearLayout>

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_gravity="bottom|end"
    fab:elevation="6dp"
    fab:pressedTranslationZ="12dp"
    fab:backgroundTint="@color/accent”/>
</android.support.design.widget.CoordinatorLayout>