In today’s tutorial, we will learn about the Floating action button FAB in KMP Compose Multiplatform for both Android & iOS platforms.
Integrate Floating Action Button FAB in KMP Compose Multiplatform:
Floating action buttons are primarily used to provide quick-click actions to app users. They are displayed at the Bottom right side of the Screen in a round shape. You can set the Image or Icon in the FAB as required. I am setting up Material vector icons using the Floating action button. There is no need to add any extra dependency in the Kotlin project.
Start coding for the app:
1. Creating a Box widget first. Because our floating action button will be on our entire screen.
|
1 2 3 4 5 6 |
Box( modifier = Modifier.fillMaxSize() ) { } |
2. Creating the FloatingActionButton widget in the Box widget as a Child.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
FloatingActionButton( onClick = { println("Floating Action Button clicked!") }, modifier = Modifier .padding(start = 0.dp, top = 0.dp, bottom = 100.dp, end = 50.dp) .align(Alignment.BottomEnd), backgroundColor = Color(0xFF00B8D4) ) { Icon( imageVector = Icons.Default.Add, contentDescription = "Add", tint = Color.White ) } |
Code explanation:
- onClick: Pass your method here, which you want to call on the floating action button click event.
- Modifier.padding(): Set padding from the bottom and end side of the screen to make floating action X and Y position on the screen.
- backgroundColor: To set the background color of the button. I am using the HEX color code. You can also set the ARGB or RGBA color code.
- Icon: Setting up material vector icon.
- tint: Set the color of the vector icon.
3. Using the composable method, I am making the Floating action button as a custom reusable widget. So you can use it multiple times in your code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@Composable fun MyFloatingActionButton() { // Box is used to position the Floating action button at the bottom-right corner Box( modifier = Modifier.fillMaxSize() ) { FloatingActionButton( onClick = { println("Floating Action Button clicked!") }, modifier = Modifier .padding(start = 0.dp, top = 0.dp, bottom = 100.dp, end = 50.dp) .align(Alignment.BottomEnd), backgroundColor = Color(0xFF00B8D4) ) { Icon( imageVector = Icons.Default.Add, contentDescription = "Add", tint = Color.White ) } } } |
Complete source code for App.kt file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.FloatingActionButton import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @Composable fun App() { MaterialTheme { Box(modifier = Modifier.fillMaxSize()) { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) .padding(24.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { Text( "Floating Action Button Example", style = TextStyle(fontSize = 28.sp), textAlign = TextAlign.Center ) } // Put Floating Action button OutSide of Scope. MyFloatingActionButton() } } } @Composable fun MyFloatingActionButton() { // Box is used to position the Floating action button at the bottom-right corner Box( modifier = Modifier.fillMaxSize() ) { FloatingActionButton( onClick = { println("Floating Action Button clicked!") }, modifier = Modifier .padding(start = 0.dp, top = 0.dp, bottom = 100.dp, end = 50.dp) .align(Alignment.BottomEnd), backgroundColor = Color(0xFF00B8D4) ) { Icon( imageVector = Icons.Default.Add, contentDescription = "Add", tint = Color.White ) } } } |
Output in Android device:
Output in iOS device:
Click output:
