Why is my floating action button not displaying it

问题:

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.

回答1:

(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.

回答2:

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.

回答3:

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

1. 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.

2. 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"