avatarRafał Zowal

Summarize

TRANSFORM YOUR APP DEVELOPMENT JOURNEY

Jetpack Compose: Crafting Simple Layouts with Code ✨

Unlock the Modern UI Design in Android Development — Chapter 3

Constructing UI Magic: The Castle of Composables

Table of contents:

  1. Introduction Embark on a journey into the world of Jetpack Compose and its UI magic.
  2. Our Enchanted Journey Through Jetpack Compose Embark on a captivating exploration of Jetpack Compose
  3. Laying the Foundation: Column and Row Composables Discover the basics of arranging UI elements vertically and horizontally.
  4. The Vertical Chamber: Column Explore how to stack UI components vertically with the Column Composable.
  5. The Horizontal Hall: Row Learn to line up UI elements side by side using the Row Composable.
  6. Crafting Custom Spells: FoodCategoryItem and ProfileBar Dive into creating unique, reusable UI components for your apps.
  7. The FoodCategoryItem Composable: A Visual Spell for Cuisine See how to represent food categories with icons and text visually.
  8. The ProfileBar Composable: Greeting the User with Magic Create a welcoming user interface element with images and greetings.
  9. A Peek into the Cauldron: Using Box and Scaffold Uncover the secrets of stacking elements and structuring complex UIs.
  10. The Magic of Preview: Instantly Beholding Our Creations Learn the power of previewing your Composables without running the app.

Introduction

Welcome back to our whimsical journey through Jetpack Compose, where today, we’re playing with the building blocks of UI code magic: the art of crafting simple layouts.

With our spellbook (the Kotlin code) open, let’s conjure up some UI that functions seamlessly and brings enchantment to the user experience.

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 (YOU ARE HERE)
  • 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

Laying the Foundation: Column and Row Composables

In the mystical realm of UI development, constructing a layout is akin to building your castle. The foundation?

A hierarchy of Composables.

In the mystical realm of UI development, constructing a layout is akin to building your castle.

And just like any grand castle has its halls and chambers, our UI has Column and Row Composables for vertical and horizontal arrangements.

The Vertical Chamber: Column

The Column Composable is the tower where we stack our UI elements, one atop the other, reaching towards the sky.

It’s here we place our text, buttons, and images in a majestic vertical lineup.

@Composable
fun PotionIngredientsList() {
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        Text("Eye of Newt")
        Text("Wing of Bat")
        // Continue stacking your potion ingredients...
    }
}

The Horizontal Hall: Row

Conversely, the Row Composable lays out our elements side by side, like knights at a round table. It’s perfect for placing icons, labels, or any content that needs to stand in line, shoulder to shoulder.

@Composable
fun WizardToolsRow() {
    Row(
        modifier = Modifier.padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Icon(Icons.Filled.Star)
        Text("Wizard's Wand")
        Icon(Icons.Filled.Light)
        // Line up your wizarding tools...
    }
}

Crafting Custom Spells: FoodCategoryItem and ProfileBar

Every wizard needs their unique spells, and in our UI toolkit, that means custom Composables. Let’s concoct a couple of our own.

The FoodCategoryItem Composable: A Visual Spell for Cuisine

Imagine a spell that conjures the image and name of a food category. The FoodCategoryItem Composable does just that, bringing culinary delights to life in our app.

@Composable
fun FoodCategoryItem(@DrawableRes icon: Int, category: String) {
    Column(
        modifier = Modifier.size(75.dp).padding(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(painter = painterResource(id = icon), contentDescription = category)
        Text(text = category, fontWeight = FontWeight.Bold)
    }
}

The ProfileBar Composable: Greeting the User with Magic

Then, there’s the ProfileBar, a spell that creates a welcoming banner at the top of our app. It's where user greetings and notifications come together in harmony.

@Composable
fun ProfileBar(username: String) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = "Hello, $username", style = MaterialTheme.typography.h6)
        Icon(Icons.Filled.Notifications, contentDescription = "Notifications")
    }
}

A Peek into the Cauldron: Using Box and Scaffold

Not all UI elements fit neatly in a row or column. Sometimes, we need to layer them, like ingredients in a potion. The Box Composable is our go-to for stacking UI elements.

@Composable
fun LayeredPotionLabels() {
    Box(contentAlignment = Alignment.Center) {
        Text("Potion of Strength")
        // Add more layers as needed...
    }
}

And for a UI that needs a consistent structure — think top bars, bottom navigation, and a fab — the Scaffold Composable constructs the entire layout, piece by piece.

@Composable
fun HomeScreen() {
    Scaffold(
        topBar = { ProfileBar("Merlin") },
        bottomBar = { /* Bottom bar spells */ },
        floatingActionButton = { /* A fab for quick actions */ }
    ) {
        // The main content goes here
    }
}

The Magic of Preview: Instantly Beholding Our Creations

Gone are the days of lengthy incantations to see our UI come to life. With the @Preview annotation, we can instantly behold our creations, making adjustments as easy as waving a wand.

@Preview
@Composable
fun PreviewHomeScreen() {
    HomeScreen()
}

And so, with columns and rows, custom composables, and the power of preview, our journey through crafting simple layouts comes to a close. But fear not, for our adventure in Jetpack Compose is just beginning. Stay tuned for our next chapter, where we’ll delve deeper into the magical world of modifiers, transforming the ordinary into the extraordinary.

Until then, may your code compile cleanly and your UIs enchant every user who beholds them. 🌟

Programming
Android App Development
Software Engineering
Software Development
Jetpack Compose
Recommended from ReadMedium