White border for FloatingActionButton

Viewed 5670

I need to create a FAB with white border and filled with a solid color (blue or grey).

xml

<android.support.design.widget.FloatingActionButton
        android:id="@+id/myFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

enter image description here

I tried the accepted solution suggested in How to change android design support library FAB Button border color?. But did not work (did not add border).

Any help would be really appreciated.

4 Answers

You can use foreground attribute therefore extra view and nested layouts won't needed:

<style name="bookingButton">
    <item name="android:src">@mipmap/fab_icon</item>
    <item name="android:layout_width">@dimen/fabDim</item>
    <item name="android:layout_height">@dimen/fabDim</item>
    <item name="android:layout_gravity">right|end|bottom</item>
    <item name="android:layout_margin">@dimen/fabMargin</item>
    <item name="android:scaleType">center</item>
    <item name="elevation">@dimen/fabElevation</item>
    <item name="pressedTranslationZ">@dimen/fabPressedTranslationZ</item>
    <item name="android:foreground">@drawable/circle_border</item>
    <item name="backgroundTint">@color/colorThird</item>
    <item name="borderWidth">@dimen/zero</item>
</style>

And circle_border.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/transparent"/>
    <stroke android:width="@dimen/strokeSecond" android:color="@color/white" />
</shape>
Related