TRANSFORM YOUR APP DEVELOPMENT JOURNEY

Jetpack Compose: The Mighty Button

Chapter 5 — Triggering Actions with a Tap

Table of contents:

1. Introduction Dive into the essentials of app development with Jetpack Compose by mastering the art of button creation. Learn how a simple button can become a pivotal element in enhancing user interaction and design aesthetics.
2. Our Enchanted Journey Through Jetpack Compose Embark on a captivating exploration of Jetpack Compose
3. Do something magical Discover the simplicity of crafting a button in Jetpack Compose, where setting an onClick parameter unleashes the potential for magical user experiences.
4. Did you know? Buttons have moods , too Explore the emotional landscape of buttons, where enabled, disabled, and pressed states reflect their readiness to interact with the user.
5. Behold! — Colors Unveil the power of colors in button design, learning how Jetpack Compose uses the colors parameter to symbolize different button moods and enhance user experience.
6. Oh, and there’s more! Venture beyond basic design to customize your button’s shape and aesthetics, making it uniquely yours while maintaining its functional essence.
7. Now, it’s time to get those hands dirty. Put theory into practice by integrating buttons into a practical example — a food delivery app, showcasing how buttons can enhance navigation and user engagement.
8. Did I mention buttons can also be superheroes? Discover the heroic potential of buttons in Jetpack Compose, where they spring into action through click handlers, transforming user interactions into dynamic experiences.

Introduction:

Hey there, future code wizard!

You know those moments when you need your app users to take an action like submitting their favorite pizza order or obliterating an item from their shopping list?

Yep, you got it — a good ol’ button is key here.

Stick with me and we’ll whip up a nifty button for your Jetpack Compose UI, modify its looks to make your designer buddies jealous, and… Oh! We’ll ensure it knows its job and does something useful when poked at!

Our Enchanted Journey Through Jetpack Compose

• Chapter 01: Diving Into Declarative UIs: The Jetpack Compose Revolution
• Chapter 02: Your First Spell: Conjuring Up a Composable Function
• Chapter 03: Stacking Blocks: Crafting Simple Layouts with Magic
• Chapter 04: The Power of Modifiers: Tailoring Your UI’s Style and Behavior
• Chapter 05: The Mighty Button: Triggering Actions with a Tap (YOU ARE HERE)
• Chapter 06: Text Quest: Adding Words to Your World
• Chapter 07: Creating Space: The Art of Using Spacers
• Chapter 08: The Flexibility of Columns & Rows: Building Fluid Layouts
• Chapter 09: TextField Challenge: Summoning Input Fields from the Ether
• Chapter 10: TextField Alchemy: Customizing Your Input Fields
• Chapter 11: A Picture’s Worth: Displaying Images with Jetpack Compose
• Chapter 12: Tick and Pick: Mastering Checkboxes & Radio Buttons
• Chapter 13: The Scaffold Tower: Constructing Complex Layouts with Ease
• Chapter 14 The Lazy River: Displaying Lists with Lazy Layouts
• Chapter 15: The State of Code Magic: Managing UI State in Jetpack Compose
• Chapter 16: The Magic Behind the Curtain: Understanding Recomposition

Do something magical

In the world of Jetpack Compose, crafting a Button composable is a breeze. You just need to set an onClick parameter to tell the button what to do when the user gives it a high-five. Here's a glance at button:

@Composable
fun CodeWIzardButton() {
    Button(onClick = { /* Do something magical */ }) {
        Text(text = "Poke Me")
    }
}

Materialistic as always, Jetpack Compose provides good stuff like:

• background-color
• text color
• Shape for your button for your aesthetic pleasure.

But hey, you’re not confined to this dress code.

Feel free to tailor your button’s outfit to your heart’s content!

With the Modifier API, you can play a little fashion designer with your buttons. Set a splashing background color or even a snazzy shape - all just by using the right modifier. Let’s dip our toe in:

@Composable
fun CodeWIzardButton(){
    Box(
        modifier = Modifier
            .width(96.dp)
            .height(48.dp)
            .background(color = Color.Red, shape = RoundedCornerShape(8.dp))
            .clickable(onClick = { /* Do something snazzy */ })
    ) {
        Text(text = "Poke Me", color = Color.White)
    }
}

Did you know? Buttons have moods , too.

They can be happy (enabled), sad (disabled), or excited (pressed)!

By default, they’re always ready and happy. To give them a quick time out, just set the enabled parameter to false.

@Composable
fun CodeWIzardButton() {
    Button(
        onClick = { /* Do something magical */ },
        enabled = false
    ) {
        Text(text = "Poke Me")
    }
}

Behold! — Colors

The button turns gray, signaling “not in the mood for action”. And that’s why colors are the emojis of buttons.

Jetpack Compose makes it easy value-added with the colors parameter, which takes a magic carpet (ButtonColors object) to set unique colors for different button moods.

ButtonColors has three hidden treasures: containerColor (button's mood ring), contentColor (ColourPop lip kit for your button's text), and disabledContentColor (how your button's text looks when it's taking a nap).

Now let’s make our buttons look pretty:

@Composable
fun CodeWIzardButton() {
    Button(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Blue,
            contentColor = Color.White,
            disabledContentColor = Color.Gray
        )
    ) {
        Text(text = "Poke Me")
    }
}

Oh, and there’s more!

You get to decide how your button looks. Does it have sharp edges or is it a little rounder at the top? Whatever shape you are in the mood for, use the shape parameter.

@Composable
fun CodeWIzardButton() {
    Button(
        onClick = { /* Do something fabulous */ },
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(text = "Poke Me")
    }
}

Now, it’s time to get those hands dirty.

Picture this — a food delivery app where each menu item has a button for more details. Sounds great, right? Let’s create a new file — FoodItem.kt.

We'll cook up a Composable named FoodItem and add a button that invites your users to dive in for more information about delicious dishes.

@Composable
fun FoodItem(food: Food) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 5.dp)
    ) {
        Button(
            onClick = { /* Create an explosion of flavors */ },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Blue,
                contentColor = Color.White,
                disabledContentColor = Color.Gray
            )
        ) {
            Text(text = "Peek the Yumminess")
        }
    }
}

Did I mention buttons can also be superheroes?

Yep, they spring into action when you need them the most (which is when users tap them). This requires adding click handlers, the secret sauce that captures the button-poking events.

You can get them to do your bidding in two main ways:

• Deliver the onClick parameter in any inbuilt Button in Jetpack Compose.
• Or call on the Modifier API to assign a click handler to the Button.

Check out how we’ve handed over the onClick parameter to set up a click handler in our FoodItem Composable:

@Composable
fun FoodItem(food: Food) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 5.dp)
    ) {
        Button(
            onClick = { 
                Log.d("FoodItem", "Tapped and zapped: ${food.name}")
             },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Blue,
                contentColor = Color.White,
                disabledContentColor = Color.Gray
            )
        ) {
            Text(text = "Peek the Yumminess")
        }
    }
}

Wow, we’ve done a ton of stuff today!

From button creation and styling in downright cool ways to handling user interactions — we’ve got all covered.

Keep an eye out for the next lesson where we’ll talk about dressing up your Composables with attractive text. Toodles!