Creating and positioning a Floating Action Button

Question

I'm trying to add a FAB to the bottom of a card view, like in this app: app image

The button does show up, but it does not overlap with the card view. I'm using Android Material Design Library. Here are my files:

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FFEB3B</color>
    <color name="colorAccentDark">#FBC02D</color>
</resources>

activity_main.xml:

    tools:context=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <LinearLayout
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/main_content"
        android:layout_below="@id/toolbar">

        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/stop_card"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="5dp"
            card_view:cardCornerRadius="4dp">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingTop="5dp"
                android:paddingRight="10dp"
                android:paddingBottom="5dp">

                <TextView
                    android:id="@+id/label_stop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Fermata"
                    android:textSize="25sp"
                    android:textStyle="bold"
                    android:singleLine="true" />

                <EditText
                    android:id="@+id/edit_stop"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="number"
                    android:ems="10"
                    android:layout_gravity="end" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="72dp" >

            <com.gc.materialdesign.views.ButtonFloat
                android:id="@+id/buttonFloat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:animate="true"
                materialdesign:iconDrawable="@android:drawable/ic_menu_search"
                android:layout_gravity="end"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true" />

        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "com.example.john.gttime"
        minSdkVersion 21
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.+'
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
    compile 'com.github.navasmdc:MaterialDesign:1.+@aar'
}

It's almost right, but it should be halfway over the card view. This is what I am getting in Android Studio preview:
result

This question has an answer at http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts — Mihir Shah, Oct 13 '15 at 17:12

score 3 · Answer 1 · answered Apr 18 '15 at 20:42

3

You could try to add a negative top-margin to the button or its parent so it would be shifted upwards. Since you seem to want to overlap it exactly half with the card you can add a android:layout_marginTop="-36dp" to the button's parent RelativeLayout, where 36dp is the half of its height:

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="72dp"
        android:layout_marginTop="-36dp">

        <com.gc.materialdesign.views.ButtonFloat
            android:id="@+id/buttonFloat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#1E88E5"
            materialdesign:animate="true"
            materialdesign:iconDrawable="@android:drawable/ic_menu_search"
            android:layout_gravity="end"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true" />

    </RelativeLayout>

answered Apr 18 '15 at 20:42

Floern

33,559
24
104
119

1

Thanks! In fact it works, but unfortunately the upper half of the button is under the card. How do I fix this? Thank you! – rubik Apr 18 '15 at 20:47
Does the CardView have some `elevation`? In that case you may have so set the same (or larger) elevation for your FAB. – Floern Apr 18 '15 at 20:50
It's weird... I added an elevation of 4dp to the CardView and 8dp to the button and the button disappeared from view. The same happened when I removed the CardView elevation! – rubik Apr 18 '15 at 20:56
1

You could also try to wrap the CardView and the FAB in a RelativeLayout and align them as you want, like this: https://gist.github.com/Floern/12e7d40ed3b6539e72e1 – Floern Apr 18 '15 at 21:10
Thanks for all the effort you're putting into this. Howerver, I still have problems. When I use your code the FAB is all the way down to the bottom of the screen. I couldn't move it up. – rubik Apr 18 '15 at 21:39
Hi @Floern Please help me in my Question as i was worked on that but not able to do the Layout i provided in image as follows: http://stackoverflow.com/questions/31238880/create-the-layout-with-cardview-and-floating-action-button-android – Rajan Bhavsar Jul 06 '15 at 07:26

Creating and positioning a Floating Action Button

1 Answers1