How to change android design support library FAB Button border color?

Question

I want to change fab button border color. border color is white, inside color is black or transparent

I'd like my button to look like this:

Solution 1

fab.xml in drawable

<?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/buttton_float"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_social_notifications"
        android:background="@drawable/fab"
        android:layout_margin="@dimen/fab_margin"
        android:layout_gravity="bottom|right"
        app:fabSize="normal"
        app:backgroundTint="@android:color/white"
        app:rippleColor="@android:color/black"
        app:borderWidth="0dp"
        app:elevation="2dp"
        app:pressedTranslationZ="12dp"/>

Note : The custom design for your FAB is against the guidelines of Google Material Design for Floating Action Button

Solution 2

you can make circle without drawable

  <android.support.design.widget.FloatingActionButton
        android:id="@+id/bottom_navigation_fab"
        style="@style/fab_material"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_gravity="bottom|center"
        app:borderWidth="3dp"
        android:backgroundTint="@color/mountain_meadow" // inner circle color
        android:layout_marginBottom="10dp"
        android:tint="@color/white"
        app:backgroundTint="@color/white" // border color
        app:srcCompat="@drawable/bottom_nav_star" />

output :

Solution 3

First create a .xml shape resource let's call it ring.xml and put the following in it:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadiusRatio="1"
            android:shape="ring"
            android:thicknessRatio="1"
            android:useLevel="false">

            <solid android:color="#FFF"/>
            <stroke
                android:width="5dp"
                android:color="#000"/>
        </shape>
    </item>
    <item>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/ic_cast_light"/>
    </item>

</layer-list>

You will have to play with the thickness and innerRadius attributes to get it right, but that should do it! Also the bitmap source is just a filler, you want to put your F image there.

Then where you declare your fab, reference your ring like such:

android:background="@drawable/ring"

OR

In your java code, do the following:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setBackgroundResource(R.drawable.ring);

Hope this helps!

Solution 4

If you want to set Float button border then you just do this things. First Create one xml file

fab_background.xml

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

    <!--Here if you want to set transparent can set-->
    <solid android:color="@color/white" />

    <!--Here you can set your fab button border color-->
    <stroke
        android:width="3dp"
        android:color="@color/white" />
</shape>

Then after use like this in your xml layout file.

main_activity.xml

<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="@color/black">

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

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

</RelativeLayout>

View more solutions

Comments

[Lym Zoy]

You can use VectorDrawable.

[Jiho Heo]

As I know, fab button android:background is not working, android:backgroundTint is fab background just color change. right?

[Jiho Heo]

And, this code is not working T-T. Thank you for your interest.

[MHogge]

Firstly thank's for the answer ! But I want to achieve exactly the same rendering with a black baground instead of a transparent one. I just changed the "transparent" to "black" and it fill my FAB with white. Does someone know why this is working with transparent color but not whith black color?

[Vipul Asri]

try app:backgroundTint="@android:color/black" in android.support.design.widget.FloatingActionButton

[MHogge]

I've tried to set the backgroundTint to black with the solid color to transparent I got black borders with transparent background and when I leave backgroundTint to black and set the solid color to black too my whole button turns black. Then if I set the backgroundTint to white and the solid color to black my whole button turns white. this is incomprehensible. :/

[Kamil Nękanowicz]

it does not work, result of your example is everything white

[Kamil Nękanowicz]

I got Setting a custom background is not supported.

[MohanRaj S]

Your code is working fine but the time of preview its will not show in centre, it have space on right bottom.

[MohanRaj S]

i fixed that is issue by myself, thanks for this answer.

[Kartik Chugh]

I got just a white circle. Using API 26 and 27

[epool]

android:backgroundTint is only for Android 21+

[Etienne Lawlor]

How do you change android:backgroundTint and app:backgroundTint dynamically in code, not in xml?