MaterialDesignLibrary FloatButton

Question

I'm updating an old existing app to be 4+ only and am trying to introduce a flavour of Material Design for < Lollipop. To that end, I am using MaterialDesignLibrary to add a few elements - in particular, the floating button.

The floating button displays OK, along with its animation, but I cannot get its bottom position displaying correctly.

Despite the recommendation that the component should be put in the right-bottom of the screen, I am trying to put the component in the right-bottom of my container wrapper... The right positioning works ok, but the bottom positioning seems to take from the wrong element.

Here is my xml for the section in the screen:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:layout_marginTop="10dip" >

        <RelativeLayout
            android:id="@+id/llFeelingContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/light_background"
            android:baselineAligned="true"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tvFeelingTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="3dip"
                android:paddingLeft="5dip"
                android:textSize="16sp" />

            <View
                android:id="@+id/vSeparatorTop"
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:layout_below="@id/tvFeelingTitle"
                android:background="@color/material_lightgreen_100" />

            <LinearLayout
                android:id="@+id/llCircleContentHolder"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@id/vSeparatorTop"
                android:baselineAligned="false"
                android:orientation="horizontal"
                android:paddingBottom="5dip"
                android:paddingTop="3dip" >

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="pain"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circlePain"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="energy"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circleMood"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="mood"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circleEnergy"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>
            </LinearLayout>

            <View
                android:id="@+id/vSeparatorBottom"
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:layout_below="@id/llCircleContentHolder"
                android:background="@color/material_lightgreen_100" />

            <TextView
                android:id="@+id/tvFeelingSubTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/vSeparatorBottom"
                android:paddingBottom="3dip"
                android:paddingLeft="5dip"
                android:text="How are you feeling now?"
                android:textSize="16sp" />
        </RelativeLayout>

        <com.gc.materialdesign.views.ButtonFloat
            android:id="@+id/buttonFloat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginTop="20dp"
            android:background="#1E88E5"
            materialdesign:animate="true"
            materialdesign:iconDrawable="@drawable/fab_ic_add" />
    </FrameLayout>

Here is a shot of where the Floating Button appears, and where it should appear:

You'll see in the code that I have tried negative margins and padding, but nothing I've tried has had any effect.

The Floating Button should appear aligned with the bottom of tvFeelingSubTitle; what has gone wrong?

UPDATE The suggestion from mistwalker did work, in as much as the button now aligns itself to the bottom. However, it expands the height of the bottom container to match the height of the button:

I tried a number of different variations on the suggestion, which either squashed the button to fit a fixed height container, or overwrote the content completely.

The layout I am wanting to create is more like this:

Maybe this isn't possible and I'm wasting my time and yours...

What do you think?

Answer 1

Try putting

android:layout_below="@id/vSeparatorBottom" android:align_baseline=@id/tvFeelingSubTitle android:alignParentRight="true"

and remove the margin attributes plus the alignParentBottom one.

That should do it.

ADD: About your second question - You are seeing that because your floating action button(FAB) is INSIDE your RelativeLayout. Instead have FrameLayout as the outermost parent and the RelativeLayout (minus the FAB) and FAB as siblings. Then adjust the style on the FAB to sit in the bottom right corner of your FrameLayout with layout_gravity=bottom|right and any margins you may want to add.