Jetpack Compose: How to use Extended floating action button

Introduction

Jetpack Compose has revolutionized how Android UI is built, offering developers a more intuitive, declarative way of creating user interfaces. One of the most popular components in this framework is the Floating Action Button (FAB), which is commonly used for primary actions in an app. However, sometimes a simple FAB is not enough to convey the full context of the action it represents. This is where the Extended Floating Action Button (Extended FAB) comes in, adding more flexibility by combining both text and an icon for enhanced user interaction.

In this article, we'll explore how to use the Extended Floating Action Button within Jetpack Compose. By breaking down a practical example, you'll see how to customize its behavior, design, and functionality to create an engaging user experience. Whether you're new to Jetpack Compose or looking to expand your skills, this guide will walk you through the essential elements of implementing an Extended FAB in your Android app.

Overview of the Example

The example we are discussing demonstrates how to set up an Extended Floating Action Button in an Android application using Kotlin and Jetpack Compose. The MainActivity class serves as the entry point of the app. Here, the setContent method is employed to define the layout using the Composable function MainContent(). The power of Jetpack Compose is evident here, as it allows developers to directly build and render UI components within the activity's content.

The MainContent function is where the Extended FAB is created and displayed. This component is highly customizable, enabling developers to tweak its appearance and behavior to fit their app's needs. In our example, the Extended FAB features both a text label ("Like Us") and an icon, making it more informative than a standard floating button. The button is also configured to show a toast message when clicked, providing immediate feedback to users.

Defining the Extended Floating Action Button

The Extended FAB is defined using Jetpack Compose's ExtendedFloatingActionButton composable. This component allows you to include both a text label and an icon, making it ideal for actions that require more context than a standard FAB can provide. In this example, the button's text is set to "Like Us", and the icon uses the prebuilt Icons.Filled.Favorite, symbolizing a positive interaction. This combination creates a clear, inviting call to action for users.

The onClick parameter is where the button's behavior is defined. In this case, it triggers a simple toast notification that displays the message "Clicked" when the button is pressed. This interactive feedback enhances user engagement by providing a visual and auditory response. Toasts are lightweight and non-intrusive, making them a great choice for confirming user actions without navigating away from the current screen.

Customizing the Button's Appearance

To further enhance the design, several customization options are applied to the Extended FAB. The backgroundColor property is used to change the button's color to a vibrant orange (Color(0xFFFF9933)), making it stand out on the screen. Additionally, the contentColor is set to white, ensuring that the text and icon are easily readable against the colored background.

The icon's color is also customized using the tint parameter. Here, a bright yellowish-green color (Color(0xFFCCFF00)) is chosen, adding a playful touch to the button. These color adjustments are essential for aligning the UI with the app's overall theme and ensuring visual consistency.

Managing Layout and Spacing

One of the key benefits of Jetpack Compose is its ability to easily manage layout and spacing. In the example, a Modifier is applied to the Extended FAB, specifically using the padding(16.dp) modifier to ensure the button is not cramped against the screen's edges. This padding helps create a more visually appealing layout and improves the user's ability to interact with the button.

The button also uses FloatingActionButtonDefaults.elevation to provide a slight shadow effect with an 8 dp elevation, giving the button a sense of depth. This subtle elevation helps the button appear raised, encouraging user interaction.

Previewing the Composable

To facilitate development and testing, Jetpack Compose includes a @Preview annotation. This allows developers to visualize how their Composables will appear directly within Android Studio, without the need to run the app on a device or emulator. In the example, a ComposablePreview function is set up, although it is currently commented out. By enabling this preview, developers can quickly iterate on the design and functionality of their Extended FAB, ensuring it looks and behaves as expected before deployment.

Summary

This example demonstrates the flexibility and simplicity of using the Extended Floating Action Button in Jetpack Compose. By combining text, icons, and customized colors, the button becomes more than just a simple action trigger; it serves as an inviting, context-aware component in your app. The use of toast messages for feedback and the intuitive layout control provided by Jetpack Compose further enhance the user experience.

Incorporating elements like the Extended FAB into your Android projects can significantly improve usability and engagement. As you explore Jetpack Compose, experimenting with components like these will enable you to build modern, responsive UIs with minimal code. With its declarative nature and powerful customization options, Jetpack Compose is an excellent tool for both seasoned Android developers and newcomers looking to create high-quality apps.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        ExtendedFloatingActionButton(
            text = { Text("Like Us")},
            onClick = {
                Toast.makeText(
                    this,
                    "Clicked",
                    Toast.LENGTH_SHORT
                ).show()
            },
            icon = { Icon(
                Icons.Filled.Favorite,
                "Localized description",
                tint = Color(0xFFCCFF00)
            )},
            elevation = FloatingActionButtonDefaults.elevation(8.dp),
            backgroundColor = Color(0xFFFF9933),
            contentColor = Color.White,
            modifier = Modifier.padding(16.dp)
        )
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}