CODEWITHSUNDEEP
androidmaterial-designandroid-buttonfloating-action-buttonmaterial-components-android
Ago
Ago

Reputation: 313

How to set Floating Action Button image to fill the button?

Usually icons are set for floating action buttons, but I need to set an image, so I can make a circular image.

I added it to the project (using Android Studio-> New -> Image Asset), but the image didn't fill the entire button:

enter image description here

My xml:

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/run_menu"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:paddingBottom="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:visibility="visible"
    fab:fab_colorNormal="#DA4336"
    fab:fab_colorPressed="#E75043"
    fab:fab_colorRipple="#99FFFFFF"
    fab:fab_shadowColor="#66000000"
    fab:fab_showShadow="true"
    fab:layout_constraintBottom_toBottomOf="parent"
    fab:layout_constraintHorizontal_bias="0.0"
    fab:layout_constraintLeft_toLeftOf="parent"
    fab:layout_constraintRight_toRightOf="parent"
    fab:layout_constraintTop_toTopOf="parent"
    fab:layout_constraintVertical_bias="0.0"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_fab_label="Choose an action"
    fab:menu_labels_colorNormal="#333333"
    fab:menu_labels_colorPressed="#444444"
    fab:menu_labels_colorRipple="#66FFFFFF"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_maxLines="-1"
    fab:menu_labels_position="left"
    fab:menu_labels_showShadow="true"
    fab:menu_labels_singleLine="true"
    fab:menu_openDirection="up"
    android:layout_height="0dp"
    android:layout_width="0dp">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/shop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/store"
        fab:fab_label="Store" />

</com.github.clans.fab.FloatingActionMenu>

Any ideas on how to fix it? How should it be properly made?

Upvotes: 14

Views: 14881

Answers (7)

aLL
aLL

Reputation: 1726

The solution is app:maxImageSize = "56dp" property set to your FAB.

  1. Have an image or vector asset, preferably in perfect circle shape and perfectly fit to canvass (no empty margins).
  2. Know the actual size of Floating Action Bar (FAB) - Default (56 x 56dp) or Mini (40 x 40dp).
  3. XML Code thusly:
<com.google.android.material.floatingactionbutton.FloatingActionButton
   android:src="@drawable/perfect_fit_circle_image"
   app:maxImageSize="56dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

Upvotes: 27

Shishir
Shishir

Reputation: 351

  1. Override image size dimension for nested image in FAB by adding below line in dimens.xml

<dimen tools:override="true" name="design_fab_image_size">56dp</dimen>

     (I used 56dp cause fab size in guidelines is 56dp)
  1. add app:tint="@null" and android:scaleType="fitCenter" in FAB.

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363459

With the Material Components library, according to the doc, you can use the attribute app:maxImageSize.

You can use a custom dimension, but you can also refer to these defined dimensions.

<dimen name="design_fab_size_mini">40dp</dimen>
<dimen name="design_fab_size_normal">56dp</dimen>

Just use:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        app:srcCompat="@drawable/ic_add_24px"
        app:maxImageSize="@dimen/design_fab_size_normal"
        ../>

Here the result with the standard dimension (<dimen name="design_fab_image_size">24dp</dimen>) and the design_fab_size_normal.

enter image description hereenter image description here

Upvotes: 3

TABZ
TABZ

Reputation: 125

If you are setting a rounded png image, work around for this is to extend the floatingActionButton class then override the on onMeasure method and set the padding to 0, and scaleType To centerCrop

public class FloatingImageButton extends FloatingActionButton {


public FloatingImageButton(Context context) {
    super(context);
}

public FloatingImageButton(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setPadding(0, 0, 0, 0);
    setScaleType(ScaleType.CENTER_CROP);


}
}

xml sample

    <com.tabz.app.FloatingImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/camera_circle"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"/>

output

enter image description here

Upvotes: 1

Ivan Vovk
Ivan Vovk

Reputation: 1039

Set scale for the float button in xml 

android:scaleX="2.0"

Or you can do it programmaticaly:

someButton.setScaleX(2.0f);
someButton.setScaleY(2.0f);

Upvotes: 1

Anil
Anil

Reputation: 1615

Use below code

android:scaleType="fitXY"

Upvotes: 2

Manohar
Manohar

Reputation: 23384

Set the following property for the FAB

android:scaleType="center"

if that does not work try using property

app:fabSize="mini"

Upvotes: 3

Related Questions