CODEWITHSUNDEEP
androidmaterial-design
Gastón Sanguinetti
Gastón Sanguinetti

Reputation: 119

Floating Action Button Icon not centered inside

I'm trying to use a FAB but the icon inside is placing at bottom right of the button:

FAB with icon not centered

This is the FAB definition in the xml:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/centerLocationButton"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_margin="@dimen/pro_arriving_map_location_button_padding"
            android:src="@drawable/ic_my_location"
            app:backgroundTint="@color/white"
            app:fabSize="mini" />

    </RelativeLayout>

What am I doing wrong?

Upvotes: 11

Views: 5552

Answers (8)

Jigs Avaiya
Jigs Avaiya

Reputation: 1

Please try given solution. It works for me.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_gravity="end|bottom"
        android:layout_margin="10dp"
        android:backgroundTint="@color/white"
        android:contentDescription="Chat"
        app:fabCustomSize="75dp"
        android:src="@drawable/chat"
        app:borderWidth="1dp"
        app:useCompatPadding="true" />

Upvotes: 0

Neb King
Neb King

Reputation: 31

If you're using material design and using custom sizes:

android:layout_width="80dp"
android:layout_height="80dp"

instead of

android:layout_width="wrap_content"
android:layout_height="wrap_content"

The fix is to use these two properties

app:fabCustomSize="80dp"
app:maxImageSize="70dp"

make sure of this

app:fabCustomSize = the same size as your layout_width
app:maxImageSize= about 10dp minus the size of your layout_width

Upvotes: 3

Cutandilla
Cutandilla

Reputation: 11

In my situation run ok this solution app:fab_icon="@drawable/btn_back_to_top_3x" enter image description here not android:src="@drawable/btn_back_to_top_3x enter image description here

And you can add android:scaleY="1.X" android:scaleX="1.X"

for additional variation

Upvotes: 1

user6264291
user6264291

Reputation: 56

Try 

android:width="wrap_content"
android:height="wrap_content"
app:maxImageSize ="56dp"

on the fab. Worked for me

Upvotes: 0

std.denis
std.denis

Reputation: 317

My solution is app:fabCustomSize="56dp"

Upvotes: 8

mikone
mikone

Reputation: 151

This seems to be a bug in the Design Support Library v28.0.0.

I could workarround this by setting the scaleType programmatically.

In your case in the Java/Kotlin Code:

centerLocationButton.setScaleType(ImageView.ScaleType.CENTER)

Upvotes: 8

Wahyu Anggara Raya
Wahyu Anggara Raya

Reputation: 63

After updating to SDK 28, I've got the same problem. Changing the size, scaleType, layout_gravity, etc will return the same.

My current short-term solution is using the ImageButton.

Upvotes: 0

Nemanja
Nemanja

Reputation: 218

Instead of android:src try app:srcCompat. Is FAB only thing you are using, because if it is (judging by the pic you posted), maybe you don't need RelativeLayout as a parent, you can use android:layout_gravity="bottom|end"

Upvotes: 0

Related Questions