How to Enable/Disable Floatingactionbutton Behavior

How to enable/disable FloatingActionButton Behavior

Finally I find it solution and I want to share with you.

You can enable/disable FloatingActionButton Behavior

Disable Behavior

    FloatingActionButton fab2 = (FloatingActionButton)findViewById(R.id.fab2);

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) fab2.getLayoutParams();
    params.setBehavior(null);
    fab2.requestLayout();
    fab2.setVisibility(View.GONE);

Enable Behavior

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) fab2.getLayoutParams();
    params.setBehavior(new QuickReturnFooterBehavior());
    fab2.requestLayout();
    fab2.setVisibility(View.VISIBLE);

Edited: More Reusable Class

public class CoordinateBehaviourUtils {

  public static void enableDisableViewBehaviour(View view,CoordinatorLayout.Behavior<View> behavior,boolean enable){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
    params.setBehavior(behavior);
    view.requestLayout();
    view.setVisibility((enable ? View.VISIBLE: View.GONE));
  }

}

How To Enable Using Common Class

FloatingActionButton fab2 = (FloatingActionButton)findViewById(R.id.fab2);
CoordinateBehaviourUtils.enableDisableViewBehaviour(fab2,new QuickReturnFooterBehavior(),true);

How To Disable Using Common Class

FloatingActionButton fab2 = (FloatingActionButton)findViewById(R.id.fab2);
CoordinateBehaviourUtils.enableDisableViewBehaviour(fab2,null,false);

Hope it will solve your problem :)

Jetpack Compose: How to disable FloatingAction Button?

Currently (1.0.x) the FloatingActionButton doesn't support the enabled property.

As workaround you can use a Button with a CircleShape.

var enabled by remember { mutableStateOf(false) }
Button(
    onClick = { /* do something */},
    modifier = Modifier.defaultMinSize(minWidth = 56.dp, minHeight = 56.dp),
    enabled = enabled,
    shape = CircleShape

){
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}

If you want to use a FloatingActionButton you can do something like:

var enabled by remember { mutableStateOf(false) }


CompositionLocalProvider(LocalRippleTheme provides
        if (enabled)  LocalRippleTheme.current else NoRippleTheme) {
    FloatingActionButton(
        backgroundColor = if (enabled) MaterialTheme.colors.secondary else Gray,
        onClick = { if (enabled) { /* do something */ } else {} },
    ) {
        Icon(Icons.Filled.Favorite,
            contentDescription = "Localized description",
        tint = if (enabled)
            LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
        else DarkGray)
    }
}

with:

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}

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

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" />

Cannot disable appearance animations on a floatingActionButton widget

FloatingActionButton has a parameter herotag, if you do not define it it will use a defaultHeroTag, when pushing to a new page it checks herotags with same name an apply the animation.

FloatingActionButton(
  heroTag: "MyFirstPage", //give it a custom name to avoid same heroTag in each page
  ...
 )

UPDATE

class First extends StatelessWidget{

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('First'),
            RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Second(),
                  ),
                );
              },
              child: Text('Page'),
            ),
          ],
        ),
      ),
      floatingActionButton: ActionControls(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButtonAnimator: NoScalingAnimation(),
    );
  }
}

class Second extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: Text('My Second Page')),
      floatingActionButton: ActionControls(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButtonAnimator: NoScalingAnimation(),
      /*
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () => print('tapped')
      ),
      */
    );
  }
}

class ActionControls extends StatelessWidget {
  Widget _iconButton({
    @required BuildContext context,
    @required IconData icon,
    @required Function function,
    Color color,
  }) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: color == null ? Theme.of(context).accentColor : color,
      ),
      child: IconButton(
        icon: Icon(
          icon,
          size: 30,
          color: Colors.white,
        ),
        onPressed: function,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        _iconButton(
          context: context,
          icon: Icons.keyboard_arrow_left,
          function: () {},
        ),
        const SizedBox(width: 10),
        _iconButton(
          context: context,
          icon: Icons.add,
          function: () {},
        ),
      ],
    );
  }
}

class NoScalingAnimation extends FloatingActionButtonAnimator {
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    return end;
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }
}

I made a minimal reproducible code sample and I didn't found any animation between the first and second page, even changing in the second page the position to FloatingActionButtonLocation.endFloat or actually inserting a FloatingActionButton(). The only animation I see is from the MaterialPageRoute fade from below animation

---

Related Topics