Jetpack Compose Ep:6 — Floating Action Button App
Introducing in a sweet and simple way about Floating Action Button and its attributes using a proper structure.
To learn the know or learn about the previous episode, than visit to the below link. Source code of this project is available in the article itself.
- Jetpack Compose Episode:1 — Just Text App
- Jetpack Compose Episode:2 — The Scroll App
- Jetpack Compose Episode:3 — Button App
- Jetpack Compose Episode:4 — Icon & Icon Toggle Button App
- Jetpack Compose Episode::5 — Divider App
Note: In this project, I’m using Android Studio 4.1 Canary 10 with a gradle plugin of classpath “com.android.tools.build:gradle:4.1.0-alpha10”. It may change accordingly with the time, so please do check the current version to avoid version related issues.
What is a Floating Action Button?
A floating action button is also known as FAB in short. It’s a button which represents the primary action of a screen.
Parameters of Floating Action Button
It has some parameter and they are as follow:
- modifier — It is used to apply padding to the FAB.
- onClick — It is called when an user clicks on it. But, if the onclick is null, the FAB will be disabled.
- shape — It provides shape to the FAB
- backgroundColor — It is used to change the background color of the FAB
- contentColor — It is used to change the color of the content it holds.
- elevation — It is used to control the shadow below the button by provided a custom elevation in DP.
- icon — It is used to set an icon on the FAB.
Now, let’s begin by creating a ComposableLayout.kt interface and create a custom function named FloatingActionButtonBuild() by declaring it over here as shown below:
interface ComposableLayout {
@Composable
fun FloatingActionButtonBuild(
mModifier: Modifier? = null,
mShape: Shape? = null,
mBackgroundColor: Color? = null,
mContentColor: Color? = null,
mElevation: Dp? = null,
mIcon: VectorAsset? = null,
mIconModifier: Modifier? = null,
mIconTint: Color? = null
)
}
Similarly, create a new class file named as ComposableComponent.kt and the implement the interface file ComposableLayout.kt into it. Override the method here and define it over here as shown below:
class ComposableComponent : ComposableLayout {
@Composable
override fun FloatingActionButtonBuild(
mModifier: Modifier?,
mShape: Shape?,
mBackgroundColor: Color?,
mContentColor: Color?,
mElevation: Dp?,
mIcon: VectorAsset?,
mIconModifier: Modifier?,
mIconTint: Color?
) {
FloatingActionButton(
onClick = {
},
modifier = mModifier ?: Modifier.padding(0.dp),
shape = mShape ?: CircleShape,
backgroundColor = mBackgroundColor ?: Color.DarkGray,
contentColor = mContentColor ?: Color.Black,
elevation = mElevation ?: 0.dp,
icon = {
mIcon?.let {
Icon(
asset = it,
modifier = mIconModifier ?: Modifier.padding(0.dp),
tint = mIconTint ?: Color.Black
)
}
}
)
}
}
Then, move to the MainActivity.kt file and create a custom function named as DefaultFloatingActionButtonComponent() as shown below:
@Composable
fun DefaultFloatingActionButtonComponent() {
ComposableComponent().FloatingActionButtonBuild()
}
Now, to provide a custom color, create a ColoredFloatingActionButtonComponent() function as shown below:
@Composable
fun ColoredFloatingActionButtonComponent() {
ComposableComponent().FloatingActionButtonBuild(
mBackgroundColor = Color.Red
)
}
Create a function named IconFloatingActionButtonComponent() to render a Icon on the button as shown below:
@Composable
fun IconFloatingActionButtonComponent() {
ComposableComponent().FloatingActionButtonBuild(
mIcon = Icons.Default.CheckCircle,
mIconModifier = Modifier.padding(8.dp),
mIconTint = Color.Yellow
)
}
Now, create a ShapeFloatingActionButtonComponent() function to display a FAB in a distinct shape as shown below:
@Composable
fun ShapeFloatingActionButtonComponent() {
ComposableComponent().FloatingActionButtonBuild(
mShape = RectangleShape,
mBackgroundColor = Color.Blue,
mIcon = Icons.Default.Call,
mIconModifier = Modifier.padding(8.dp),
mIconTint = Color.White
)
}
Lastly, create a ElevatedFloatingActionButtonComponent() function to render an elevated FAB as shown below:
@Composable
fun ElevatedFloatingActionButtonComponent() {
ComposableComponent().FloatingActionButtonBuild(
mBackgroundColor = Color.White,
mElevation = 16.dp,
mIcon = Icons.Default.ShoppingCart,
mIconModifier = Modifier.padding(8.dp),
mIconTint = Color.Red
)
}
Call all the functions in the scope of the setContent() function by wrapping it with AppTheme() as shown below:
AppTheme {
Column(
verticalArrangement = Arrangement.SpaceEvenly,
horizontalGravity = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
DefaultFloatingActionButtonComponent()
ColoredFloatingActionButtonComponent()
IconFloatingActionButtonComponent()
ShapeFloatingActionButtonComponent()
ElevatedFloatingActionButtonComponent()
}
}
Finally, run the code. The result will look like this:
For the source code, visit to my Github account given below:
If there is any issue, do let me know in the comment section.
Connect with me on:
Happy coding!