Best way to "emulate" a FloatingActionButton on Android? (Appcelerator Titanium)

As of today, there's no native support for FloatingActionButton on Appcelerator Titanium yet, so I was wondering which is the best way to emulate it.

I want to create a FloatingActionButton like this one:

I tried different approaches but none of them seem to be 100% accurate.

I've seen that there's a couple of modules on GitHub, but one of them does not accept icons or at least I don't know how to use them (https://github.com/k0sukey/be.k0suke.tifab) and the other one requires me to enable Hyperloop and disable LiveView (https://github.com/appcelerator-forks/loop-modules.Ti.FAB), which will slow down compilation times and thus making me waste a lot of time.

I also tried creating a circular view with an ImageView inside it, but it's not showing correctly, the backgroundColor is not covering all the View:

My code looks like this:

XML:

<View id="locateView">
    <ImageView id="locateUser" touchEnabled="false" />
</View>

JS:

// This is half of 32dp
Alloy.Globals.borderRadiusFAB = ( parseInt("32dp") * (Titanium.Platform.displayCaps.dpi / 160));

TSS:

"#locateView" : {
    bottom: "12dp",
    right: "12dp",
    height: "48dp",
    width: "48dp",
    borderRadius : Alloy.Globals.borderRadiusFAB,
    backgroundColor: '#80FFFFFF',
    touchFeedback: true,
    touchFeedbackColor: "#808080",
    elevation: 10
}

"#locateUser" : {
    height: "32dp",
    width: "32dp",
    image : "/icons/my_location.png"
}

I am using Titanium SDK 6.2.0.

Solution

I think the only issue is in using the ImageView which seems to have some background color. There are multiple ways to create this button, but here is a sample app which creates almost 99% similar FAB button.

https://drive.google.com/file/d/0B4ZdsEjK2ySIMXd1YS15ZTk1TDg/view?usp=sharing

It contains a sample source code of how you can create better FAB buttons for iOS & Android using single code-base. It also contains a Material Font file which shows how you can use Fonts to create vector image/icons instead of ImageView.

Here's the link to read more about using Labels in places of ImageView.

https://medium.com/all-titanium/cool-technique-to-use-vector-icons-using-iconic-font-files-aab4513aa8da

This sample code will create icons like below: