Include Floating Action Button on top of ListView

Question

I am trying to add a floating action button in one of my layouts. i created a separate layout for the floating action button to be included in the main layout of mine. but whenever i include it, it is not on top of the listview.

Floating Action Button XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="23dp"
    android:layout_marginEnd="22dp"
    android:clickable="true"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_menu_add" />
    </RelativeLayout>

Activity layout:

<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:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:weightSum="1"
android:background="@color/BG_beige">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:orientation="horizontal"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1.58"
        android:text="Name"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Price"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.51"
        android:text="Paid"
        android:textSize="20sp"
        android:gravity="center"/>



</LinearLayout>

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

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

 </LinearLayout>

So the resulting layout is this:

score 3 · Accepted Answer · answered May 14 '17 at 08:39

3

Wrap your layout inside FrameLayout and apply android:layout_gravity="bottom"

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <include
        layout="@layout/utility_fab"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom" />
</FrameLayout>

answered May 14 '17 at 08:39

rafsanahmad007

23,683
6
47
62

but won't frame layout destroy my current positioning? because im using linear – JJCADIZ May 14 '17 at 08:47
`FrameLayout` is only used to align listview and Floating action button...it will not affect linearlayout – rafsanahmad007 May 14 '17 at 09:51

score 1 · Answer 2 · edited May 23 '17 at 11:54

If you want to place one component on top of the other one, you can try to use FrameLayout, e.g. here you can find the example (see the accepted answer):

How to show one layout on top of the other programmatically in my case?

The other option is to use RelativeLayout (see the accepted answer):

how to put 2 layouts on top of each others

UPDATE: You can try to use the following code. Probably, you will have to do some additional setup yourself, but this is the general idea:

<FrameLayout 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">

    <LinearLayout
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:weightSum="1"
    android:background="@color/BG_beige">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.58"
            android:text="Name"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/textView15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Price"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/textView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.51"
            android:text="Paid"
            android:textSize="20sp"
            android:gravity="center"/> 
    </LinearLayout>

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 </LinearLayout>

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

</FrameLayout>

but won't frame layout destroy my current positioning? because im using linear — JJCADIZ, May 14 '17 at 08:47

score 1 · Answer 3 · answered May 14 '17 at 08:58

You have the RelativeLayout set wrong

<RelativeLayout>
    <Your main layout/>
    <Fab button/>
</RelativeLayout>

Currently you've told android to put the fab button and the parent RelativeLayout layout after the listview, I suspect it is outside of the screen

Include Floating Action Button on top of ListView

3 Answers3