Why is my floating action button not displaying its image properly?

Question

This is what my floating action button is showing

rather that just showing the actual circle part of the image, it tries to fit the background of my .png file into the floating action button.

here is my xml code:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addToKitchenButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:src="@drawable/fab_icon"
    />

how do I get it to look like this?

I've given my .png file a transparent background already, so I don't know what else I need to do. Please Help.

Thank You.

score 7 · Accepted Answer · answered Sep 27 '16 at 00:55

(Assuming you are using Android Studio) -- Rather than using your own custom .png for the FloatingActionButton's src, create a new vector asset with that icon. Right click your res/drawable folder in Android Studio, and then click to New -> Vector Asset.

The icon you are using is built in to Android Studio, although you could import your own vector asset if you were doing something more custom. The XML it generates will look like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>

and you can change the color in fillColor. Set your FloatingActionButton to this drawable in android:src and you're good to go.

Thank you, this was exactly what I needed, but now I have this problem http://stackoverflow.com/questions/39737699/why-is-my-floating-action-button-not-displaying-properly-different-issue-from-m Its not displaying properly — Matt, Sep 28 '16 at 03:48
What about when it's a must to include .png image in FAB and put padding on ti? — Ban Markovic, Aug 25 '20 at 12:06

score 3 · Answer 2 · answered Feb 23 '22 at 09:08

3

Try overriding the "design_fab_image_size" in the dimens file

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

Also, add

 app:tint="@null"

inside your FAB button XML

answered Feb 23 '22 at 09:08

MarGin

2,078
1
17
28

score 1 · Answer 3 · answered Sep 27 '16 at 01:20

You dont have to provide the rounded corner image. I am using and I my xml looks like this

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addFolder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/plus"
    app:layout_anchor="@id/mainRl"
    android:background="#ff0000"
    app:layout_anchorGravity="bottom|right|end"
    android:onClick="onAddFolderClick"

    />

I am using #ff0000(red) as background color, you use the pink you want. It works fine for me.

Nishant Dubey · Answer 4 · 2016-09-27T02:17:58.683

For a consistent look there are two tings that you need to do. This answer assumes that you really want the look in the link provide by you which is this

First Step - The background color is nothing but your app accent color you need not provide any specific color. So first make sure you have accent color set in your app theme.
Second Step - Once you have done that you need to use the xml code below. You don't even have to create a new png if you want the look in link. You can easily download one in white color add icon from this official google material icons link . You can use this links for most of standard material icons by google.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_add_white_24dp"/>

Hope this helps. Do let me know if it changed things for you.

EDIT:: If you wish to change the icon color and background to something completely different than your default accent color then you have to use these attributes-

//for custom background

app:backgroundTint="@color/yourCustomColor"

//for custom icon color

android:tint="@color/yourCustomColor"

Thank you this worked, but now I have this problem http://stackoverflow.com/questions/39737699/why-is-my-floating-action-button-not-displaying-properly-different-issue-from-m It wont display properly — Matt, Sep 28 '16 at 03:51

Why is my floating action button not displaying its image properly?

4 Answers4

Linked