TRANSFORM YOUR APP DEVELOPMENT JOURNEY

Jetpack Compose Creating Your First Composable Function

Conjuring Your First Code Spell - Chapter 2

Table of contents:

1. Introduction A playful invitation to explore Jetpack Compose. Chapter 2
2. Our Enchanted Journey Through Jetpack Compose Embark on a captivating exploration of Jetpack Compose, the modern toolkit for Android UI development.
3. The Magic Word: @Composable Discover the power of the @Composable annotation, the cornerstone of building interfaces in Jetpack Compose.
4. The Basic Spells: Text, Box, Column, and More Learn the foundational composable functions — Text, Box, Column — that bring your app’s UI to life.
5. Setting the Stage with setContent Understand how setContent works as your canvas, hosting all magical UI components in your app.
6. Crafting Your Own Code Spells Dive into creating custom composable functions, adding unique magic to your app’s UI.
7. The Magical Preview Window Leverage the @Preview annotation to instantly see your composable functions come to life, saving time and effort.

Introduction

Welcome back, aspiring UI wizards! Today, we’re diving into the heart of Jetpack Compose to conjure our very first code spell, a composable function.

It’s like learning the first spell every code wizard needs in their grimoire — except for building UIs, not turning your neighbor’s cat into a teacup.

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 (YOU ARE HERE)
• 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
• Chapter 06: Text Quest: Adding Words to Your World
• Chapter 07: The Flexibility of Columns & Rows: Building Fluid Layouts
• Chapter 08: Creating Space: The Art of Using Spacers
• Chapter 09: Clean Code Cauldron: Brewing Organized Code
• Chapter 10: TextField Challenge: Summoning Input Fields from the Ether
• Chapter 11: TextField Alchemy: Customizing Your Input Fields
• Chapter 12: A Picture’s Worth: Displaying Images with Jetpack Compose
• Chapter 13: Tick and Pick: Mastering Checkboxes & Radio Buttons
• Chapter 14: Icon Enchantment: Adding Leading & Trailing Icons to TextFields
• Chapter 15: The Scaffold Tower: Constructing Complex Layouts with Ease
• Chapter 16: The Lazy River: Displaying Lists with Lazy Layouts
• Chapter 17: The State of Code Magic: Managing UI State in Jetpack Compose
• Chapter 18: The Magic Behind the Curtain: Understanding Recomposition

The Magic Word: @Composable

In the mystical land of Jetpack Compose, spells — ahem, I mean composable functions — are annotated with @Composable.

This little tag is like whispering to the Compose compiler

“Hey, this function right here? It’s special. It's going to create something beautiful.”

Think of it as the secret sauce that turns your Kotlin functions into UI elements.

The Basic Spells: Text, Box, Column, and More

Jetpack Compose offers a treasure trove of foundational code spells.

Want to cast a simple spell to display text? Text composable function is your go-to.

Imagine it as the "Alohomora" of Compose, opening the door to UI creation. Then there's Box, Column, and a whole array of spells waiting to be mastered.

Setting the Stage with setContent

Every great code wizard needs a stage to perform, and in our world, that stage is set by setContent. It’s like a magical platform where all your UI elements come to life. Whether you're performing in an Activity or a Fragment, setContent is where the magic happens.

Create an Activity or do it in MainActivity.kt, add Text in tot SetContent block

setContent {
    Text(text = "Hello Jetpack Compose")
}

Now, run your app and watch as your first spell comes to life, bringing forth the words “Hello Jetpack Compose” onto the screen. It’s like casting your first Patronus, but way easier and with less dementors around.

Crafting Your Own Code Spells

But what if you want to create a spell, I mean, a UI component, that’s uniquely yours?

Fear not!

Crafting your own composable function is as easy as making your first potion. Just remember to sprinkle it with the @Composable tag to let the compiler know it’s part of the UI spellbook.

In the same activity that you created, add a new composable function that will receive a text and display

@Composable
fun TitleText(name: String) {
    Text(text = name)
}

Use it like any other spell in your setContent:

setContent{
    TitleText(name = "Hello Custom Composable")
}

The Magical Preview Window

Are you tired of running your app every time you see minor changes?

Enter the @Preview annotation, a spell that lets you glimpse into your creations without the whole rigmarole of running your app. It’s like having a crystal ball that shows your UI's future.

To set up the preview window for your composable, you need to add the @preview annotation to your composable.

@Preview
@Composable
fun AppPreview() {
    TitleText(name = "Jetpack Compose Preview")
}

With this enchantment, every tweak you make will appear in Android Studio’s Preview window, saving you from the tedious cycle of build-run-repeat.

And there you have it! You’ve not only created your first composable function but also learned how to preview your UI spells without breaking a sweat. Stay tuned for the next chapter where we’ll start organizing these spells into mesmerizing layouts that would even make Merlin proud.

Until then, keep practicing your code spells skills, and maybe don’t turn any cats into teacups, okay?