White border for FloatingActionButton

Question

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"/>

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.

Could you edit your question to include what you mean by "it did not work" — Ajil O., Aug 11 '17 at 18:31
@AjilO.What I meant is, it did not add the border. Please see the project I created with this change - https://drive.google.com/open?id=0BxEa4zO6gm2FT1hkemtfUC1vSW8 — coder, Aug 11 '17 at 22:02

score 6 · Accepted Answer · answered Aug 11 '17 at 18:59

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/circle_white_border"
        android:padding="3dp">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:elevation="0dp"
            app:elevation="0dp"
            app:fabSize="normal" />
    </LinearLayout>

</RelativeLayout>

background for the floating action button

in the drawable fab_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <stroke
        android:width="4dp"
        android:color="@android:color/white" />
</shape>

Thanks for your help! This solution works fine in phones. But in tablets it add additional padding. — coder, Aug 11 '17 at 22:20
Issue was not in tablets. In pre-lollipop OS, there is an additional padding for FAB. This can be fixed by adding app:elevation="0dp" app:pressedTranslationZ="0dp" for FloatingActionButton. SO I am accepting this answer. Thank you so much! — coder, Aug 14 '17 at 17:34
Notice that the background drawable is set for the surrounding linear layout, not the fab itself. Otherwise it wouldn't work for me. — DanD, Feb 12 '18 at 18:03

score 0 · Answer 2 · answered Aug 11 '17 at 18:37

drawable circle_white_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="3dp"
        android:color="@android:color/white" />
</shape>

Floating Action Button in layout

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

Thank you for your help my friend!. This solution didn't work for me. Please find the attached project with the your solution implemented - https://drive.google.com/open?id=0BxEa4zO6gm2FT1hkemtfUC1vSW8 — coder, Aug 11 '17 at 19:43

score 0 · Answer 3 · answered Aug 11 '17 at 19:04

You can create this programmatically as:

ImageButton iV = (ImageButton) findViewById(R.id.myFab);
    int strokeWidth = 5;
    int strokeColor = Color.parseColor("#03dc13");
    int fillColor = Color.parseColor("#ff0000");
    GradientDrawable gD = new GradientDrawable();
    gD.setColor(fillColor);
    gD.setShape(GradientDrawable.OVAL);
    gD.setStroke(strokeWidth, strokeColor);
    iV.setBackground(gD);

Change the colors as per your requirement.

Arash · Answer 4 · 2018-09-14T12:23:08.350

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>

White border for FloatingActionButton

4 Answers4