CODEWITHSUNDEEP
androidfloating-action-button
Shubham Khatri
Shubham Khatri

Reputation: 281686

Floating action button in android not displaying correctly

I am trying to change the default FloatingActionButton icon to a add circle icon. I have downloaded the icon ic_add_circle_white_18dp from material.io and added it to the drawable directory inside the andorid project. However when I try to use it inside my activity it displays as a black inner icon as in image

enter image description here

However I want the FAB icon to look like

enter image description here

My FAB icon xml looks like

<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"
        app:srcCompat="@drawable/ic_add_fab"
        app:elevation="8dp"
        app:backgroundTint="@android:color/holo_blue_light"
        app:rippleColor="@android:color/white"/>

I have tried setting the app:backgroundTint value but it doesn't effect the inner icon style

Thanks for any help

Upvotes: 3

Views: 3641

Answers (5)

Quick learner
Quick learner

Reputation: 11457

This worked for me 

<android.support.design.widget.FloatingActionButton
                   android:id="@+id/logout_btn"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/logout"
                   app:rippleColor="@null"
                   app:backgroundTint="@null"
                   app:fabSize="normal"
                   android:layout_gravity="bottom|center_horizontal"
                   android:scaleType="center"/>

Also src icon should be the same according to the requirement.

I used 140x140 for xhdpi drawable

Upvotes: 2

Dharmaraj
Dharmaraj

Reputation: 1306

You need to set scaleType for it to be rendered properly:

 android:scaleType="center"

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281686

Importing Clipart corresponding to the add icon from image asset works:

Steps:

1. Right Click on res.
2. Select New->Image Asset
3. In Icon type, select Action Bar and Tab Icons
4. Provide a name
5. Select ClipArt in Asset type and the click on the Clip Art icon.
6. From the content section select add button
7. In theme set HOLO_DARK
6. Click Next and then finish

enter image description here

enter image description here In order to use this as an icon, include the following in your XML. Note that to use the icon as source android:src="@drawable/ic_add_fab" is used 

<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_fab" />

Upvotes: 4

Ryan
Ryan

Reputation: 54

Instead of app:srcCompat= use app:src= for images.
Or use fab.setImageResource(R.drawable.ic_add); to programatically set the image.

Upvotes: 1

Rashmi Mathur
Rashmi Mathur

Reputation: 102

Try downloading and using icon with name "add" instead of "add circle"

Upvotes: 2

Related Questions