Android: FloatingActionButton background overwriting image

Question

I'm setting an image to a FloatingActionButton, however the background tint is for some reason overwriting it.

        <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:background="@drawable/ic_add_circle" />

ic_add_circle is just a simple round image with a cross.

Background tint is automatically set to FFFF4081 also named "colorAccent" in styles and it's shown on top of the image.

My initial ideas was to remove it completely but there's no option to do that. Or just set the tint to be transparent but then it's all white.

Is there a simple way to remove the tint on a FloatingActionButton?

Answer 1

You should use vector drawables in your project.

Click on File, New, Vector Assets and select your preferred vector drawable and OK. This will be added to your drawables folder.

In your FloatingActionButton you can do app:srcCompat="@drawable/ic_add_circle" and don't forget to add vectorDrawables.useSupportLibrary true in gradle default config.