CODEWITHSUNDEEP
androidstylesfloating-action-button
ABN
ABN

Reputation: 1152

How to customise Floating Action Button to have different look and feel for enabled and disabled FAB state in Android?

There is no difference in appearance when FAB is disabled or enabled. How can I achieve a different look and feel for enabled and disabled FAB via xml?

Upvotes: 1

Views: 675

Answers (3)

Theo
Theo

Reputation: 2042

Create a drawable first add negative margins as this will give you a stroke circle on the button (in fact you are shrinking the bitmap and exposing some of the fab background tint) Set a your gradient colors and play around with the angle (multiples of 45) and X or Y positions My ?fab_icon_color_end etc get their color through different styles. (they are defined in values/attrs.xml)

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="-12dp"
        android:left="-12dp"
        android:right="-12dp"
        android:top="-12dp">
        <shape
            android:shape="rectangle" >
            <corners android:radius="55dp"/>
            <gradient
                android:centerX="0.25"
                android:angle="225"
                android:endColor="?fab_icon_color_end"
                android:centerColor="?fab_icon_middle_color"
                android:startColor="?fab_icon_start_color" />
        </shape>
    </item>

    <item>
        <bitmap
            android:src="@drawable/ic_add"
            android:tint="?fab_icon_color"
            />
    </item>
</layer-list>

Upvotes: 0

ABN
ABN

Reputation: 1152

I was able to have different look and feel for FAB. The steps I took are -

1) Created a drawable custom_fab.xml at /res/drawable with following content:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/fab_disabled"
        android:state_enabled="false" />
    <item android:drawable="@drawable/fab_enabled"
        android:state_enabled="true" />
</selector>

This is to have different image for enabled and disabled state.

2) Created a color selector custom_fab_color.xml at /res/color with following content:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorFabDisabled" 
        android:state_enabled="false" />
    <item android:color="@color/colorFabEnabled" android:state_enabled="true" /> 
</selector>

This is to have different background color for enabled and disabled state of FAB.

3) Added desired color for enabled and disabled state in res/values/colors.xml

<resources>
    ...
    <color name="colorFabEnabled">#03DAC5</color>
    <color name="colorFabDisabled">#6DABF9</color>>
</resources>

4) Updated xml file where FAB is defined. Pointed the src and backgroundTint to the new drawable and color selector.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        ...

        android:backgroundTint="@color/custom_fab_color"
        android:src="@drawable/custom_fab" />

Upvotes: 0

Calum Templeton
Calum Templeton

Reputation: 86

You could change the icon when the button is enabled/disabled? For example, if your FAB has an image of a "plus", change this to a red "plus" when disabled and green when enabled.

To do this, you will need to keep track of the state of the FAB.

private var fabEnabled = true

override fun onCreate(savedInstanceState: Bundle?) {
...

fab.setOnClickListener { view ->
    if (fabEnabled) {
        fab.setImageResource(R.drawable.ic_green_plus)
    } else {
        fab.setImageResource(R.drawable.ic_red_plus)
    }
}

Change fabEnabled as you wish, such as via another button.

Note this answer is in Koltin. Please tell me if you would rather it in java.

Upvotes: 1

Related Questions