Search code examples
androidandroid-drawablefloating-action-button

Background drawable does not fill floating action button


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,

enter image description 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>

Solution

  • 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

    enter image description here

    cheers..