Jetpack Compose Basics: Composables, Previews, Resources & UI Magic

Welcome back to Jetpack Journey, where I’m documenting my learning path through Jetpack Compose in a beginner-friendly and real-time way. After just 2 hours into a learning tutorial, I’ve already started feeling the Compose magic!

In this post, we’ll explore the core concepts and components I’ve learned so far including what makes Compose different, how recomposition works, how to use @Composable and @Preview, and even how to add multicolored text and scrollable animations.

Let’s get to it!

Key Features of Jetpack Compose

Before diving into code, here’s what makes Jetpack Compose special:

• Declarative UI: Instead of saying how to draw UI step by step, you just describe what the UI should look like.

• Kotlin-first: Everything is written in Kotlin, no more XML + Kotlin juggling.

• Composable Functions: UIs are built using modular, reusable @Composable functions.

• Less Boilerplate: Say goodbye to findViewById() and bulky adapters.

• Live Previews: Instantly see your UI while coding.

The Declarative Approach & Recomposition

In Compose, UI is reactive. When the data changes, the UI updates automatically — this process is called recomposition.

Here’s a simple way to think about it:

Imagine telling your app: “If this variable is true, show a button. If not, show text.” Compose watches that variable and updates the UI without you manually touching the layout again.

MainActivity: Where Compose Begins

Your Compose UI starts in MainActivity.kt, typically inside:

setContent {
    MyApp()
}

setContent {} is where you plug in your Composables. Think of it like the new setContentView() — but cooler.

🧩 What is a @Composable Function?

A @Composable function is the building block of your UI.

Example:

@Composable
fun WelcomeText() {
    Text(text = "Welcome to Jetpack Compose!")
}

Call this inside setContent {} or another Composable to show it.

In Jetpack Compose, the UI is made up entirely of functions. These are called @Composable functions — and they’re the building blocks of everything you see on screen.

Think of @Composable functions as Lego bricks. You can stack, combine, and reuse them to build your entire app interface.

Here’s the most basic example:

@Composable
fun Greeting() {
    Text(text = "Hello, Compose!")
}

🔍 What's happening here?

• @Composable is an annotation that tells the compiler:
  “Hey! This function generates UI.”

• Inside it, you use other composables like Text, Button, Image, etc.
  Compose provides many of these out of the box.

💡 Rules of Composable Functions

1. They must be annotated with @Composable

2. You can’t return values like in regular Kotlin functions — instead, they emit UI directly.

3. You can nest them inside each other — just like components in React or widgets in Flutter.

4. They are reusable — call the same Composable in multiple places with different parameters!

🎛️ Making Composables Dynamic

Composable functions can accept parameters to customize behavior and content:

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Now you can call it like:

Greeting(name = "Zohaib")
Greeting(name = "Compose World")

This makes your UI modular and reusable which is a big win for clean architecture.

📚 Composable vs Traditional XML

• @Composable functions are the heart of Jetpack Compose

• You write UI as code, not as XML

• They make your UI modular, reusable, and reactive

• 🫠 Once you get the hang of Compose, you'll look at XML and think, "Wow... I used to enjoy this?"

Previewing with @Preview

Use @Preview to see your Composables in the Android Studio Design view:

@Preview(showBackground = true)
@Composable
fun PreviewWelcomeText() {
    WelcomeText()
}

No need to build and run, just hit preview and boom!! Instant feedback.

Accessing Resources in Compose

You can still access strings and colors from your res files. Here’s how:

String Resource:

Text(text = stringResource(id = R.string.app_name))

Color Resource:

Text(
    text = "Colorful Text",
    color = colorResource(id = R.color.purple_500)
)

Box - A Simple UI Container

Box() in Jetpack Compose is like Android’s old FrameLayout but friendlier. It allows you to stack elements on top of each other, or place them at custom positions using alignment options.

It’s perfect for use cases like:

• Centering text or buttons

• Overlaying images and text

• Creating custom cards or banners

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Text("Centered text!")
}

In this example:

• fillMaxSize() makes the Box take up the entire screen.

• contentAlignment = Alignment.Center ensures anything inside the Box (like the Text) appears dead center.

You can also place multiple items and use Modifier.align() on each one individually. Think of Box as your UI playground. Stack, layer, and position however you like!

Meet Modifier - The UI Customizer

If Jetpack Compose were a game, Modifier would be the cheat code. It’s how you style, position, size, animate, or even scroll your UI elements.

Modifiers are chained functions that define how a composable should behave or look.

Text(
    text = "Styled text",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
)

Here’s what’s going on:

• .padding(16.dp) → Adds space around the text.

• .background(Color.LightGray) → Gives it a background color.

• .fillMaxWidth() → Makes the text block span the full width of the screen.

You can think of Modifier as Compose’s answer to:

• layout_width, layout_height

• margin, padding, gravity

• android:background, android:layout_gravity

Except it's all in one beautiful Kotlin chain. Clean, expressive, and powerful.

Multi-Colored Text with Brush

Want to give your text a fancy gradient look? Say hello to Brush.linearGradient.

Compose lets you create colorful, multi-tone text effortlessly using TextStyle and brush.

Text(
    text = "Jetpack Compose",
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue, Color.Green)
        ),
        fontSize = 30.sp
    )
)

This will paint your text with a smooth color gradient from red → blue → green. You can also use Brush.radialGradient or Brush.verticalGradient for different styles.

Perfect for:

• App titles

• Call-to-action headlines

• Making your UI pop 💥

Scrollable Text with Basic Marquee

Ever seen those auto-scrolling text banners in apps? You can recreate that in Compose using basicMarquee(), a Modifier extension that adds a smooth marquee animation to your Text.Text( text = "This is a long scrolling text...", modifier = Modifier .fillMaxWidth() .basicMarquee() )

What it does:

• Automatically scrolls the text horizontally (like a news ticker)

• Loops endlessly

• Only activates when text overflows

Tip: Use it for:

• Notifications

• News banners

• Song/track names

• App title bars

No XML trickery, no TextView.setSelected(true), no layout hacks. Just plug and scroll

🚀 What I’ve Learned So Far

In just a couple of hours, I’ve gone from squinting at @Composable like it was alien code to actually building something visual, beautiful, and reactive and loving every second of it!

These early building blocks, from Box() layouts to colorful gradients, Modifiers, and marquee magic — already show how powerful and expressive Jetpack Compose truly is. It's modern, flexible, and kind of addictive.

And this? This is just the beginning.

There’s still so much more to explore, experiment with, and possibly break (and fix) and I’ll be sharing all of it here.

Stay tuned !! Things are only going to get more exciting from here!