# 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:

```plaintext
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:

```plaintext
@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:

```plaintext
@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:

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

Now you can call it like:

```plaintext
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

| Feature | XML + Kotlin | Jetpack Compose |
| --- | --- | --- |
| UI Definition | Separate XML files | All in Kotlin code (`@Composable`) |
| Preview | Slow, needs rebuilding | Instant Preview with `@Preview` |
| Data Updates | Manual view binding, `notifyDataSetChanged()` | Automatic with recomposition |
| Reusability | Custom Views or includes | Just call functions with parameters |

* `@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:

```plaintext
@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:

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

### Color Resource:

```plaintext
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
    

```plaintext
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`](http://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.

```plaintext
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`.

```plaintext
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!