Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Jetpack Compose Floating Action Button

Jetpack Compose Floating Action Button - Coding Bihar
Jetpack Compose Floating Action Button

Button

A button is a useful UI element consists of text or an icon, or both, that communicates what action occurs when the user taps or click on it.

Floating Action Button (FAB)

Floating Action button is slightly different from a simple button. It is a useful component in Material Design which is usually display in rectangular shape with an icon. It floats on the surface of the interface allowing the user to click on it to perform an action. In Material Design Components we have three sizes of floating action buttons: 

1. FAB
2. small FAB and 
3. large FAB

In this tutorial we will learn to create all the three types of floating action button

Also Read Tabs in Jetpack Compose

Steps :


Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.


MainActivity

Copy this code →
package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   Fab()
                 }
            }
        }
    }
}

Create a separate file for FAB and named it as Fab

Fab

Copy this code →
package com.example.codingbihar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Fab() {
    var myFABState by remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier.padding(30.dp)){

    FloatingActionButton(onClick = { },
        contentColor = Color.Green,
        containerColor = Color.Magenta,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }
    ExtendedFloatingActionButton(onClick = { /*TODO*/ },
        modifier = Modifier.padding(8.dp)

    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }
    ExtendedFloatingActionButton(
        modifier = Modifier.padding(8.dp),
        text = { Text(text = "Edit FAB") },
        icon = { Icon(imageVector = Icons.Default.Edit,
            contentDescription ="" )},
        expanded = myFABState,
        onClick = { myFABState=!myFABState}
    )
    LargeFloatingActionButton(
        modifier = Modifier.padding(8.dp),
        onClick = { /*TODO*/ }
    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }

    }
}

OUTPUT :




********************Finish*************************
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!