2

I was trying to build something like the below image:

enter image description here

Here is my xml code:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/vector_nav_qr_scanner"
        app:backgroundTint="@android:color/white"
        app:layout_anchor="@id/bottom_app_bar" />

I was searching a lot but couldn't figure out how can I add the light blue background with a white circle border and also an icon in the center. Can any one help?

Reyjohn
  • 2,654
  • 9
  • 37
  • 63
  • You can check this [here](https://stackoverflow.com/questions/53860591/how-to-add-a-border-in-floating-action-button). Thank you. – Uncle Roger Mar 14 '22 at 06:48
  • @LalremLianBTlung I see its a long process, doesn't it have any simple workaround? – Reyjohn Mar 14 '22 at 06:56

2 Answers2

4

Try this:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#B1E4F6"               //inner background color
    android:src="@drawable/scan"
    app:backgroundTint="@color/white"              //outer background color (border color)
    app:borderWidth="8dp"
    app:maxImageSize="16dp"                        //inner icon size
    app:tint="@android:color/holo_blue_dark" />    //inner icon color

Result:

enter image description here

Sam Chen
  • 7,597
  • 2
  • 40
  • 73
1

Add

app.strokeColor = "#000033"
app.strokeWidth = "3dp"

in your floating action button xml..

for example:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/vector_nav_qr_scanner"
        app:backgroundTint="@android:color/white"
        app:layout_anchor="@id/bottom_app_bar"
        app:strokeColor = "#000033"
        app:strokeWidth = "3dp" />

edit: app:strokewidth and app:strokeColor is working for ExtendedFloatingActionButton. Sorry, that's my fault. You can use

app:borderWidth="4dp" in stead of app:strokeWidth = "3dp". remove strokeColor. there showes little border.

i hope it will help you. please let me know if it doesn't work.

OR define custom shape in drawable folder

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

    <!-- here set the width and color of your border -->
    <stroke
        android:width="5dp"
        android:color="@android:color/darker_gray" />
</shape>

then wrap your FloatingActionButton with a layout. use fab_bg.xml file in layout's background. for example:

<LinearLayout
        android:id="@+id/fabWrapperId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/fab_bg"
        android:padding="5dp">

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_scan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/vector_nav_qr_scanner"
            app:backgroundTint="@android:color/white"
            app:layout_anchor="@id/bottom_app_bar"
            app:fabSize="normal" />
    </LinearLayout>

NB: make sure your stroke width from fab_bg and layout padding keep the same.

Tanvir Islam
  • 29
  • 4