Android - Positioning Floating Action Button problems with Percent Layouts and positioning

Question

I'm having an issue with the design support library's floating action button widget and the new percent layouts.

The support FAB doesn't appear to support the percent layouts which is causing problems in getting the layout to work properly.

I have a custom keyboard that I had made out of LinearLayouts where all the keys are spaced evenly depending on the size of the screen and the space I allot it. In the bottom right corner, I have a FAB to trigger the primary action.

Everything worked perfectly fine, but then I wanted to change it so it would turn into a material sheet like below as it currently triggers a pop up dialog.

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-TjBicTdvQjg4M1E/components-buttons-fab-transition_card_02.webm

I found the below library which does what I need.

https://github.com/gowong/material-sheet-fab

The library works, but in order to have the sheet view animate correctly it can't be contained within a LinearLayout like the FAB currently is. When it's set up like that, it can't show the sheet in the tiny layout.

I got it nearly working with the LinearLayouts by putting the other required code for the library to work, outside the LinearLayout inside a larger Relative Layout, but the FAB animation still didn't work correctly as it was contained in the linear layout, but the sheet animates the correct way.

I decided to try changing the entire keyboard over to the new percent layout, and came up with this.

<android.support.percent.PercentRelativeLayout 
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="fill_parent"
android:layout_below="@+id/title">

<TextView
    android:id="@+id/key_one"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/title"
    android:text="@string/number_one"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />


<TextView
    android:id="@+id/key_two"
    style="@style/keypad"
    android:layout_below="@id/title"
    android:layout_toLeftOf="@+id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_two"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_three"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/title"
    android:text="@string/number_three"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_four"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_one"
    android:text="@string/number_four"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />


<TextView
    android:id="@+id/key_five"
    style="@style/keypad"
    android:layout_below="@id/key_one"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_five"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_six"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_three"
    android:text="@string/number_six"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_seven"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_four"
    android:text="@string/number_seven"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_eight"
    style="@style/keypad"
    android:layout_below="@id/key_four"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_eight"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_nine"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_four"
    android:text="@string/number_nine"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<ImageView
    android:id="@+id/key_clear"
    style="@style/keypad"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_seven"
    android:src="@drawable/keypad_delete_selector"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_zero"
    style="@style/keypad"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/key_eight"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_zero"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<com.myapp.Fab
    android:id="@+id/fab"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_nine"
    android:src="@drawable/ic_action_send_now"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%"
    app:pressedTranslationZ="5dp" />
</android.support.percent.PercentRelativeLayout>

com.myapp.Fab> extends the support design libraries FAB so I can implement the AnimatedFab interface required for the library to work.

Since it doesn't work with percent layouts though, this is what happens

If I don't align the FAB to the bottom, then it just sits up in the top right corner, and I can't find a way to center it between the 0 and 9, but the size is right...

If I try to align it in addition to the right of 0 it doesn't change anything.

I've also tried wrapping the FAB in a frame layout, but that breaks the animation also.

Is there any way to somehow get the the percents working with the FAB (if that would even fix it, I have a feeling the FAB would just be huge then?) or to solve this while keeping the FAB in a relative layout so the sheet animations work correctly?

If not - I've looked at other options like a drawable background listed below, but it simply fills the whole space, I can't get it to size to the FAB appropriate size.

http://www.android4devs.com/2015/03/how-to-make-floating-action-button-fab.html

I tried putting an image view in there as well instead of the FAB, same issue.

Any help would be appreciated.

Thanks!