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:

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:

Answer 1

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>