Jetpack Compose Ep:7 — Extended Floating Action Button App

Published in

Kotlin Mumbai

5 min readJul 16, 2020

A precise information about the Extended Floating Action Button, its attributes and also the difference between him and the normal Floating Action Button.

Jetpack Compose Ep:7 — Extended Floating Action Button App

To get your basic done, do visit to my previous articles which are given below:

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 an Extended Floating Action Button?

We can also call an Extended Floating Action Button as E-FAB. It is same as that of Floating Action Button by means of representing the primary action of a screen.

Difference

The major difference of E-FAB from FAB is that, it can hold a textual content along with an icon in it.

Parameters of Extended Floating Action Button

text— It holds the a textual value of string type which needs to be displayed on the E-FAB.
onClick— It is called when an user clicks on it. But, if the onClick is null, the E-FAB will be disabled.
modifier— It is used to apply padding to the E-FAB.
icon— It is used to set an icon on the E-FAB.
shape — It provides shape to the E-FAB.
backgroundColor — It is used to change the background color of the E-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.

Start by creating a ComposableLayout.kt interface file and create a ExtendedFloatingActionButtonBuild() function by declaring it as show below:

@Composable
fun ExtendedFloatingActionButtonBuild(
    mText: String? = "Default",
    mModifier: Modifier? = null,
    mIcon: VectorAsset? = null,
    mIconModifier: Modifier? = null,
    mIconTint: Color? = null,
    mShape: Shape? = null,
    mBackgroundColor: Color? = null,
    mContentColor: Color? = null,
    mElevation: Dp? = null
)

Then, create a ComposableComponent.kt class file and implement that interface into it. Define the function side this class and pass the parameters to the ExtendedFloatingActionButton() function as shown below:

@Composable
override fun ExtendedFloatingActionButtonBuild(
    mText: String?,
    mModifier: Modifier?,
    mIcon: VectorAsset?,
    mIconModifier: Modifier?,
    mIconTint: Color?,
    mShape: Shape?,
    mBackgroundColor: Color?,
    mContentColor: Color?,
    mElevation: Dp?
) {
    ExtendedFloatingActionButton(
        text = {
            mText?.let {
                Text(text = it)
            }
        },
        onClick = {

        },
        modifier = mModifier ?: Modifier.padding(0.dp),
        icon = {
            mIcon?.let {
                Icon(
                    asset = it,
                    modifier = mIconModifier ?: Modifier.padding(0.dp),
                    tint = mIconTint ?: Color.White
                )
            }
        },
        shape = mShape ?: CircleShape,
        backgroundColor = mBackgroundColor ?: MaterialTheme.colors.primary,
        contentColor = mContentColor ?: Color.White,
        elevation = mElevation ?: 0.dp
    )
}

Then, go to the MainActivity.kt file and create some functions which makes it easy for us to differentiate and understand the functionality of E-FAB features by using its attributes. So, let’s start by creating DefaultExtendedFloatingActionButtonComponent() function as show below:

@Composable
fun DefaultExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild()
}

As per the above code, we have called the ExtendedFloatingActionButtonBuild() function from the ComposableComponent class file. But, haven’t provided any parameters to it, as it will be set to use its default values to render an individual output.

Output of the above code:

It will set a default text as “Default” with a white contentColor, with no padding, no icon, default shape as CircleShape , zero elevation and backgroundColor as primary.

Now, let’s create another function titled as TextExtendedFloatingActionButtonComponent(). This will show an output of textual E-FAB with a bit of padding and a content in yellow color as show below:

@Composable
fun TextExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild(
        mText = "Text Extended FAB",
        mModifier = Modifier.padding(4.dp),
        mContentColor = Color.Yellow
    )
}

Output of the above code:

Moving further, create a ColoredExtendedFloatingActionButtonComponent() function which will render a different colored E-FAB as shown below:

@Composable
fun ColoredExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild(
        mText = "Colored",
        mBackgroundColor = Color.Yellow,
        mContentColor = Color.Black
    )
}

Output of the above code:

Furthermore, create a IconExtendedFloatingActionButtonComponent() function by means of adding an icon, red in color along with other icon attributes as shown below:

@Composable
fun IconExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild(
        mText = "Icon",
        mIcon = Icons.Default.ShoppingCart,
        mIconModifier = Modifier.padding(2.dp),
        mIconTint = Color.Red,
        mBackgroundColor = Color.LightGray,
        mContentColor = Color.Red
    )
}

Output of the above code:

Again, create a ShapeExtendedFloatingActionButtonComponent() function to modify the shape of the E-FAB as shown below:

@Composable
fun ShapeExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild(
        mText = "Shape",
        mIcon = Icons.Default.Refresh,
        mIconTint = Color.White,
        mShape = RectangleShape,
        mContentColor = Color.White
    )
}

Output of the above code:

Finally, create a ElevatedExtendedFloatingActionButtonComponent() function to show the major difference between the other E-FAB which has been mentioned above by providing an elevation to it.

@Composable
fun ElevatedExtendedFloatingActionButtonComponent() {
    ComposableComponent().ExtendedFloatingActionButtonBuild(
        mText = "Elevated",
        mIcon = Icons.Default.Share,
        mIconTint = Color.Black,
        mBackgroundColor = Color.White,
        mContentColor = Color.Black,
        mElevation = 8.dp
    )
}

Output of the above code:

Elevated Extended Floating Action Button

At the very end, after the completion of creating all the custom functions, call them in the main scope by wrapping it with AppTheme() function along with a Column() function to maintain its representation a single scaled lined as shown below:

AppTheme {
    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalGravity = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        DefaultExtendedFloatingActionButtonComponent()
        TextExtendedFloatingActionButtonComponent()
        ColoredExtendedFloatingActionButtonComponent()
        IconExtendedFloatingActionButtonComponent()
        ShapeExtendedFloatingActionButtonComponent()
        ElevatedExtendedFloatingActionButtonComponent()
    }
}