CODEWITHSUNDEEP
androidandroid-studioborderfloating-action-button
Aunkit Chaki
Aunkit Chaki

Reputation: 43

How to add a border in floating action button

I have a floating button with full white background tint and an image source. I want to surround it with a grey border. I don't find any way to do so. Please help.

I've just created a normal FAB.

Here is the XML code of my button.

      <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/addvideo"
        app:backgroundTint="#fff"
        app:layout_anchor="@+id/bottomAppBar"
        android:scaleType="center"
        android:id="@+id/myFab"
        />

Upvotes: 2

Views: 5065

Answers (2)

Antony Nicolas Huaman Alikhan
Antony Nicolas Huaman Alikhan

Reputation: 424

something old but it can be useful for beginners, you can use

To remove border color can use:

app:borderWidth="0dp"

To change border color:

app:borderWidth="2dp"
app:backgroundTint="#F44336"

An example:

<com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:borderWidth="2dp"
                app:backgroundTint="#F44336"
                android:src="@drawable/ic_select_image_white"
                android:backgroundTint="@color/purple_500"/>

Upvotes: 4

mohammad zarei matin
mohammad zarei matin

Reputation: 461

As a workaround, you can do these steps:

  • First define a custom shape in a new xml file in your drawable directory:

fab_background.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 FAB inside a layout and set the custom drawable file to be the background of the layout. Here you need to give this wrapper layout a padding with the same size as your border:

your main layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- the wrapper layout having a padding with the size of your border -->
    <!-- and background set to the custom drawable file -->
    <LinearLayout
        android:id="@+id/fabWrapper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/fab_background"
        android:padding="5dp"
        >

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="center"
            app:fabSize="normal"
            android:src="@drawable/addvideo"
            android:backgroundTint="@android:color/white"
            />
    </LinearLayout>

Upvotes: 1

Related Questions