Center image inside FAB

user_5516303 0
Viewed 2075

A couple of days ago I had the perfect FAB, now the image won't be centered and it's driving me crazy! this is what I got now:

enter image description here

i'm using the button inside a CardView. this is the button xml tag:

<android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_options"
            style="@style/fab"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginTop="20dp"
            android:elevation="10dp"
            android:scaleType="center"
            android:src="@drawable/ic_options"
            android:tint="@color/colorPrimary"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintTop_toTopOf="parent" />

and this is the drawable file: ic_options.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

weird thing is, when I change the FAB width and height to wrap_content, it gets centered properly but the button gets bigger and I don't want that.. like this:

enter image description here

this problem happened after I made some changes in the whole project, depending on Android Studio Inspector. But, this layout wasn't changed and I just have no idea what happened to it!

Do you have any idea?

Edit:

CardView code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    style="@style/AppTheme"
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_gravity="top"
    app:ignore="NamespaceTypo"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="12dp"
    card_view:cardCornerRadius="2dp"
    >


<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="400dp"
        android:layout_height="220dp"
        android:contentDescription="@string/contentDescription_mapBackground"
        android:foreground="@drawable/map_overlay" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="@dimen/fab_margin"
        card_view:layout_constraintEnd_toStartOf="@+id/btn_options"
        card_view:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:letterSpacing="0.04"
            android:textColor="@color/colorWhite"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:drawableStart="@drawable/ic_marker2"
            android:drawableTint="@color/white"
            android:textColor="@color/colorWhite"
            android:textSize="12sp" />


    </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_options"
            style="@style/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginTop="20dp"
            android:elevation="10dp"
            android:scaleType="center"
            android:src="@drawable/ic_options"
            android:tint="@color/colorPrimary"
            app:fabCustomSize="40dp"
            card_view:layout_constraintTop_toTopOf="parent"
            card_view:layout_constraintEnd_toEndOf="parent"
            />


</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
android-cardview floating-action-button android
6 Answers

You can use android:layout_width="wrap_content" android:layout_height="wrap_content" and app:fabSize="mini" or app:fabCustomSize="40dp".

Does it suit you?

user_105454770

Use app:fabCustomSize attribute instead of harcoding size.

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_options"
    app:fabCustomSize="100dp"
    />

output

user_68915630

In my case I had solved this problem like this:

android:fabSize="mini" // mini - 40dp
android:match_parent="40dp"
android:wrap_content="40dp"

So you should set size of fab button and android:match_parent android:wrap_content similar

user_123375930

Instead of setting image to cardview try adding imageview widget inside cardview along fab and then set gravity to center for imageview

user_95524850

In my app I have a recyclerview with cardviews as items and a fab inside a relative layout in the cardview but the cardview is inside a vertical linearlayout and the fab icons are positioned as expected.
If it's easy put the fab inside a layout or the cardview inside a layout.
I know it does not make sense but your problem is so strange

user_104988280

I had the same problem with FloatingActionButton from material and I was able to solve it by adding maxImageSize as following:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_print"
        app:maxImageSize="@dimen/_6m" />

Where src drawable size is 24 x 24 and dimen is 48dp.

user_70895400
Related