SUBSCRIBE NOW

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

Floating Action Button with Material Animations

Author: Johan Reitan

Floating Action Button with animations that are implemented as per the Material Design spec.

  
          import androidx.compose.animation.AnimatedVisibility
        
          import androidx.compose.animation.EnterExitState
        
          import androidx.compose.animation.EnterTransition
        
          import androidx.compose.animation.ExitTransition
        
          import androidx.compose.animation.core.FastOutLinearInEasing
        
          import androidx.compose.animation.core.LinearEasing
        
          import androidx.compose.animation.core.LinearOutSlowInEasing
        
          import androidx.compose.animation.core.animateFloat
        
          import androidx.compose.animation.core.tween
        
          import androidx.compose.animation.fadeIn
        
          import androidx.compose.animation.fadeOut
        
          import androidx.compose.foundation.interaction.MutableInteractionSource
        
          import androidx.compose.foundation.layout.Box
        
          import androidx.compose.foundation.shape.CornerSize
        
          import androidx.compose.material.FloatingActionButtonDefaults
        
          import androidx.compose.material.FloatingActionButtonElevation
        
          import androidx.compose.material.MaterialTheme
        
          import androidx.compose.material.contentColorFor
        
          import androidx.compose.runtime.Composable
        
          import androidx.compose.runtime.getValue
        
          import androidx.compose.runtime.remember
        
          import androidx.compose.ui.Modifier
        
          import androidx.compose.ui.graphics.Color
        
          import androidx.compose.ui.graphics.Shape
        
          import androidx.compose.ui.graphics.graphicsLayer
        
          import androidx.compose.material.FloatingActionButton as MaterialFloatingActionButton
        
          /**
        
           * FAB with show/hide animations according to the Material spec
        
           */
        
          @Composable
        
          fun FloatingActionButton(
        
              onClick: () -> Unit,
        
              modifier: Modifier = Modifier,
        
              visible: Boolean = true,
        
              interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
        
              shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
        
              backgroundColor: Color = MaterialTheme.colors.secondary,
        
              contentColor: Color = contentColorFor(backgroundColor),
        
              elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
        
              content: @Composable () -> Unit,
        
          ) {
        
              AnimatedVisibility(
        
                  modifier = modifier,
        
                  visible = visible,
        
                  enter = fadeIn(
        
                      animationSpec = tween(
        
                          durationMillis = 15,
        
                          delayMillis = 30,
        
                          easing = LinearEasing,
        
                      ),
        
                  ),
        
                  exit = fadeOut(
        
                      animationSpec = tween(
        
                          durationMillis = 15,
        
                          delayMillis = 150,
        
                          easing = LinearEasing,
        
                      )
        
                  ),
        
              ) {
        
                  val fabScale by transition.animateFloat(
        
                      transitionSpec = {
        
                          tween(
        
                              durationMillis = when (targetState) {
        
                                  EnterExitState.PreEnter,
        
                                  EnterExitState.Visible,
        
                                  -> 330
        
                                  EnterExitState.PostExit -> 135
        
                              },
        
                              delayMillis = 0,
        
                              easing = LinearOutSlowInEasing,
        
                          )
        
                      },
        
                      label = "FAB scale"
        
                  ) {
        
                      when (it) {
        
                          EnterExitState.PreEnter,
        
                          EnterExitState.PostExit,
        
                          -> 0f
        
                          EnterExitState.Visible -> 1f
        
                      }
        
                  }
        
                  MaterialFloatingActionButton(
        
                      modifier = Modifier.graphicsLayer {
        
                          scaleX = fabScale
        
                          scaleY = fabScale
        
                      },
        
                      onClick = onClick,
        
                      interactionSource = interactionSource,
        
                      shape = shape,
        
                      backgroundColor = backgroundColor,
        
                      contentColor = contentColor,
        
                      elevation = elevation,
        
                  ) {
        
                      val contentScale by transition.animateFloat(
        
                          transitionSpec = {
        
                              tween(
        
                                  durationMillis = when (targetState) {
        
                                      EnterExitState.PreEnter,
        
                                      EnterExitState.Visible,
        
                                      -> 240
        
                                      EnterExitState.PostExit -> 135
        
                                  },
        
                                  delayMillis = when (targetState) {
        
                                      EnterExitState.PreEnter,
        
                                      EnterExitState.Visible,
        
                                      -> 90
        
                                      EnterExitState.PostExit -> 0
        
                                  },
        
                                  easing = FastOutLinearInEasing,
        
                              )
        
                          },
        
                          label = "FAB content scale"
        
                      ) {
        
                          when (it) {
        
                              EnterExitState.PreEnter,
        
                              EnterExitState.PostExit,
        
                              -> 0f
        
                              EnterExitState.Visible -> 1f
        
                          }
        
                      }
        
                      Box(
        
                          Modifier.graphicsLayer {
        
                              scaleX = contentScale
        
                              scaleY = contentScale
        
                          }
        
                      ) {
        
                          content()
        
                      }
        
                  }
        
              }
        
          }

view raw FloatingActionButton.kt hosted with ❤ by GitHub

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets

	import androidx.compose.animation.AnimatedVisibility
	import androidx.compose.animation.EnterExitState
	import androidx.compose.animation.EnterTransition
	import androidx.compose.animation.ExitTransition
	import androidx.compose.animation.core.FastOutLinearInEasing
	import androidx.compose.animation.core.LinearEasing
	import androidx.compose.animation.core.LinearOutSlowInEasing
	import androidx.compose.animation.core.animateFloat
	import androidx.compose.animation.core.tween
	import androidx.compose.animation.fadeIn
	import androidx.compose.animation.fadeOut
	import androidx.compose.foundation.interaction.MutableInteractionSource
	import androidx.compose.foundation.layout.Box
	import androidx.compose.foundation.shape.CornerSize
	import androidx.compose.material.FloatingActionButtonDefaults
	import androidx.compose.material.FloatingActionButtonElevation
	import androidx.compose.material.MaterialTheme
	import androidx.compose.material.contentColorFor
	import androidx.compose.runtime.Composable
	import androidx.compose.runtime.getValue
	import androidx.compose.runtime.remember
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.graphics.Color
	import androidx.compose.ui.graphics.Shape
	import androidx.compose.ui.graphics.graphicsLayer
	import androidx.compose.material.FloatingActionButton as MaterialFloatingActionButton

	/**
	* FAB with show/hide animations according to the Material spec
	*/
	@Composable
	fun FloatingActionButton(
	onClick: () -> Unit,
	modifier: Modifier = Modifier,
	visible: Boolean = true,
	interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
	shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
	backgroundColor: Color = MaterialTheme.colors.secondary,
	contentColor: Color = contentColorFor(backgroundColor),
	elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
	content: @Composable () -> Unit,
	) {
	AnimatedVisibility(
	modifier = modifier,
	visible = visible,
	enter = fadeIn(
	animationSpec = tween(
	durationMillis = 15,
	delayMillis = 30,
	easing = LinearEasing,
	),
	),
	exit = fadeOut(
	animationSpec = tween(
	durationMillis = 15,
	delayMillis = 150,
	easing = LinearEasing,
	)
	),
	) {
	val fabScale by transition.animateFloat(
	transitionSpec = {
	tween(
	durationMillis = when (targetState) {
	EnterExitState.PreEnter,
	EnterExitState.Visible,
	-> 330
	EnterExitState.PostExit -> 135
	},
	delayMillis = 0,
	easing = LinearOutSlowInEasing,
	)
	},
	label = "FAB scale"
	) {
	when (it) {
	EnterExitState.PreEnter,
	EnterExitState.PostExit,
	-> 0f
	EnterExitState.Visible -> 1f
	}
	}
	MaterialFloatingActionButton(
	modifier = Modifier.graphicsLayer {
	scaleX = fabScale
	scaleY = fabScale
	},
	onClick = onClick,
	interactionSource = interactionSource,
	shape = shape,
	backgroundColor = backgroundColor,
	contentColor = contentColor,
	elevation = elevation,
	) {
	val contentScale by transition.animateFloat(
	transitionSpec = {
	tween(
	durationMillis = when (targetState) {
	EnterExitState.PreEnter,
	EnterExitState.Visible,
	-> 240
	EnterExitState.PostExit -> 135
	},
	delayMillis = when (targetState) {
	EnterExitState.PreEnter,
	EnterExitState.Visible,
	-> 90
	EnterExitState.PostExit -> 0
	},
	easing = FastOutLinearInEasing,
	)
	},
	label = "FAB content scale"
	) {
	when (it) {
	EnterExitState.PreEnter,
	EnterExitState.PostExit,
	-> 0f
	EnterExitState.Visible -> 1f
	}
	}
	Box(
	Modifier.graphicsLayer {
	scaleX = contentScale
	scaleY = contentScale
	}
	) {
	content()
	}
	}
	}
	}