How do I display icon on FloatingActionButton?

Question

I have a problem displaying the icon on FloatingActionButton. The icon loses transparency. I have compileSdkVersion 28.

The dependencies are:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //noinspection GradleCompatible
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
    //noinspection GradleDynamicVersion
    implementation 'com.android.support:recyclerview-v7:28.0.0-rc02'
    implementation 'com.android.support:design:28.+'
    implementation 'com.android.support:cardview-v7:28.0.0-rc01'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso- 
    core:3.0.2'
    implementation 'com.squareup.picasso:picasso:2.71828'

}

The layout is:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:background="@color/colorDivider"
tools:context=".activities.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewId"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabAddCity"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@mipmap/ic_plus"
    app:backgroundTint="@color/colorPrimaryDark"
    app:borderWidth="0dp"
    android:focusable="true"/>
</FrameLayout>

and it looks like this:

Angus · Answer 1 · 2019-09-19T09:26:07.587

Problem:

app:backgroundTint="@color/colorPrimaryDark"

It makes the transparent part to have a background color of your choice.

So you can replace it with

android:tint="@android:color/colorPrimaryDark"

or

android:tint="@android:color/background_light" (if you want white color)

or you can just replace your code with this:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fabAddCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:clickable="true"
android:tint="@android:color/background_light"
app:srcCompat="@android:drawable/ic_input_add"
app:borderWidth="0dp"
android:focusable="true"/>

I realised you are using colorPrimaryDark for your tint, if you insisted to use, change it to

android:tint="@android:color/colorPrimaryDark"

score 2 · Accepted Answer · answered Aug 29 '18 at 04:48

2

Recently i faced may problem using 28.0.0-** library's

So i suggest u

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'

And Change

 compileSdkVersion 27
 targetSdkVersion 27

Floating Button Example

<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="@android:drawable/ic_dialog_email" />

add Dimesn

dimens.xml
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

and I suggestion once again see the example for more clearance https://www.androidhive.info/2015/12/android-material-design-floating-action-button/

answered Aug 29 '18 at 04:48

Ashvin solanki

4,802
3
25
65

1

Hey ashvin, can you confirm if it was a design library issue even i am facing similar issue with fab – Neji Nov 14 '18 at 12:26
@Neji sir i am not sure about that this problem was fix by google or not but we solve this problem by downgrading the library version – Ashvin solanki Nov 14 '18 at 12:31
i have done the same thing and it is working fine, were you using svg file for the icon or a png – Neji Nov 14 '18 at 12:32
i am using png sir – Ashvin solanki Nov 14 '18 at 12:33
@Neji this may more help https://stackoverflow.com/questions/50940219/failed-to-load-appcompat-actionbar-with-unknown-error-android-studio-3-1-3 – Ashvin solanki Nov 14 '18 at 12:39
@Neji any time sir – Ashvin solanki Nov 14 '18 at 12:40
@Neji can i know you full name i want to save your number – Ashvin solanki Nov 14 '18 at 12:40

score 0 · Answer 3 · answered Aug 29 '18 at 03:55

First drawables should be in the proper drawable folder not the mipmap folder. Second it looks like the image you are using is being displayed but may not be the color you want. If that is the case you can tint it in xml with android:tint="@color/section_arrowup_color" but that may not work depending on how your image is formatted. You can also tint programmatically but that may have the same effect. Finally you can create a new image asset that is the color you want. Since it is a plus sign you could easily create a vector drawable and set the colors in xml

How do I display icon on FloatingActionButton?

3 Answers3

Linked