TRANSFORM YOUR APP DEVELOPMENT JOURNEY

Jetpack Compose — Chapter 6: Adding Text

A Comprehensive Guide for a UI on Android Development

Table od contents:

1. Introduction An overview of the guide, setting the stage for what’s to come.
2. Our Enchanted Journey Through Jetpack Compose A creative and engaging walkthrough of Jetpack Compose fundamentals.
3. The Enchanted Text Class A detailed exploration of the Text class and its attributes in Jetpack Compose.
4. Real-world Example A practical demonstration of implementing the Text class within an app

Introduction:

Now, you will learn how to add Texts and order Composables within your application.

So there are no super secrets on how to do it; it is elementary as you will use a SwiftUI in iOS

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
• Chapter 06: Text Quest: Adding Words to Your World (YOU ARE HERE)
• 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

The Enchanted Text Class

In the fantastical realm of Jetpack Compose, select a Text class and your words transform into a magical spell, appearing just as you command. To become a true wizard of this realm, understand these mystical parameters and how they summon your words into being:

• modifier: The magical accessory of your choice that molds and shapes your text. Think of Modifiers as your spell book, ready to manipulate layout, add a sprinkle of padding or conjure up some style. You don’t have to be selective, feel free to chain modifiers together to conjure up your perfect text spell. It's your magic wand, guiding you through the UI wonderland.
• text: The spell's substance – the words you wish to display within your magical UI portal. It could be an enchanting hello or the details of a mystical creature. Whatever it is, text is the magic chant of your spell.
• style: The enchanting attire your text dons to align with your app's theme. The style parameter is like the robes of a wizard that sets the tone and appearance of your text in its mystical UI realm. Control the font, size, color, and more to tailor your words to the perfect appearance.
• fontWeight: How heavy you want your text spell to hit. Like the weight of a wand influences the power of its spell, fontWeight alters the emphasis of your text, making it as bold or as light as you wish. This parameter is your tool to ensure your text spell captures just the right amount of attention.

Real-world Example:

@Composable
fun EnchantBuffDisplay(
    artifactId: Int? = 0 // Choose your artifact wisely
) {
    // Summon the legendary buff from the ancient codex
    val legendaryBuff = summonBuff()[artifactId ?: 0]
    Column(
        modifier = Modifier
            .padding(top = 96.dp, start = 16.dp, end = 16.dp),
    ) {
        Text(
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
            // The name of the buff, echoing through the ages
            text = legendaryBuff.name,
            style = MaterialTheme.typography.displaySmall,
            fontWeight = FontWeight.ExtraBold
        )
        Text(
            // A herald announces the arrival of the buff's lore
            text = "Buff Lore",
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier.padding(top = 50.dp)
        )
        Text(
            // Unravel the mystic description of your newly acquired powers
            modifier = Modifier.padding(top = 16.dp),
            text = legendaryBuff.description,
            style = MaterialTheme.typography.bodyMedium,
            fontWeight = FontWeight.Medium
        )
    }
}

@Composable
fun BuffAttributesDisplay(
    @DrawableRes symbol: Int, // Every buff carries its unique symbol
    essence: String, // The essence of the buff
    symbolColor: Color // The color that best represents the buff's power
) {
    Row(modifier = Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
        Icon(
            painter = painterResource(id = symbol),
            contentDescription = essence,
            tint = symbolColor
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(
            text = essence,
            style = MaterialTheme.typography.bodyMedium,
            fontWeight = FontWeight.Medium
        )
    }
}

Great job, our application is beginning to take shape. In the next episode, we will learn more about how we can organize our application uisng advanced Row and Column modifiers.

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
• More content at Stackademic.com