Background drawable does not fill floating action button

Question

I have FAB and trying to fill a drawable(round_drawable.xml) to my entire fab but the drawable appears currently as in the top left corner as shown here,

I tried a solution from Setting src and background for FloatingActionButton but it did not work, added most attributes from other sources but neither scaleType, src, background did not work.

How do I get to fill the FAB with the round_drawable ?

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="100dp"
        android:layout_height="95dp"

        android:scaleType="fitXY"
        app:backgroundTint="@color/white"
        android:src="@drawable/round_drawable"
        android:backgroundTintMode="src_atop"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

round_drawable.xml

@drawable/right is a png image of right arrow.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape
            android:innerRadius="50dp"
            android:shape="oval">

            <corners android:radius="10dp" />

            <gradient
                android:angle="45"
                android:endColor="#D425B5"
                android:startColor="#EBF928" />

        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/right" />
    </item>
</layer-list>

Answer 1

Just add this line in you dimen.xml file

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

NOTE : 56dp is default size of FAB buttom

• Default - 56dp
• mini - 40dp
• custom - whatever you have specified in fabCustomSize

TIP : use app:fabCustomSize rather giving custom height width to FAB button.

Example

in your layout

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/white"

    <!--inmprtent-->
    app:fabCustomSize="100dp"

    android:src="@drawable/round_drawable"
    android:backgroundTintMode="src_atop"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

now create dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_image_size" tools:override="true">100dp</dimen>
</resources>

keep your round_drawable.xml as it is and you are good to go

Result

cheers..

Answer 2

You don't have to give specific size to FAB.And it won't require background drawable also for any specific color. It has attribute fabSize in which you can pass predefined sizes like mini(40dp), normal(56dp) . And still if you want to add size remove sizes from drawable <item> tag. That tag actually making your drawable small.

check this sample code for creating Fab with image in center

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fbtn_addNotification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_16"
            android:layout_marginRight="@dimen/margin_16"
            app:srcCompat="@drawable/ic_add_white_28dp"
            app:backgroundTint="@color/colorPrimary"
            app:borderWidth="@dimen/margin_0"
            app:elevation="@dimen/margin_8"
            app:fabSize="normal"
            android:visibility="visible"
            app:pressedTranslationZ="@dimen/margin_5" />

It will look like this. Hope it will help...

Answer 3

I used this code and it worked:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_add"
        android:scaleType="center"
        android:backgroundTint="@android:color/transparent"
        android:outlineAmbientShadowColor="@android:color/transparent"
        android:outlineSpotShadowColor="@android:color/transparent"
      />

and in the dimens.xml file: <dimen name="design_fab_image_size" tools:override="true">40dp</dimen>

Answer 4

Updated answer of 2019 with androidX:

Dependency : implementation 'com.getbase:floatingactionbutton:1.10.1'

XML:

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_margin="@dimen/fab_margin"
    android:layout_marginBottom="20dp"
    app:fab_addButtonColorNormal="@color/colorPrimaryDark"
    app:fab_addButtonColorPressed="@color/colorPrimaryDark"
    app:fab_colorPressed="@color/colorPrimaryDark"
    app:fab_labelStyle="@style/menu_labels_style">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/btn_langauge_translation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_language_icon"
        app:fab_size="normal"
        android:paddingBottom="15dp"
        app:fab_colorNormal="@color/colorPrimaryDark"
        app:fab_colorPressed="@color/colorPrimaryDark"
        app:fab_title="" />

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/btn_facebook_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_fb_icon"
        app:fab_size="normal"
        android:paddingBottom="15dp"
        app:fab_colorNormal="#0184FF"
        app:fab_colorPressed="#0184FF"
        app:fab_title="" />

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/btn_whats_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_whatsapp_icon"
        app:fab_colorNormal="#4EC248"
        android:paddingBottom="15dp"
        app:fab_size="normal"
        app:fab_colorPressed="#4EC248"
        app:fab_title="" />

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/btn_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_email_icon"
        app:fab_colorNormal="#848484"
        android:paddingBottom="15dp"
        app:fab_colorPressed="#848484"
        app:fab_size="normal"
        app:fab_title="" />

</com.getbase.floatingactionbutton.FloatingActionsMenu>

Output:

Answer 5

Just add this line in you style.xml file

<style name="FullImageFloatingButton" parent="Widget.Design.FloatingActionButton">
    <item name="fabSize">normal</item>
    <item name="maxImageSize">56dp</item>
</style>

<style name="FullImageMiniFloatingButton" parent="Widget.Design.FloatingActionButton">
    <item name="fabSize">mini</item>
    <item name="maxImageSize">40dp</item>
</style>

Use FullImageFloatingButton for normal FloatingButton and FullImageMiniFloatingButton for mini FloatingButton.