Jetpack Compose basics

Jetpack Compose basics.

Compose is Android's modern UI toolkit. It replaces XML layouts with Kotlin code. Instead of describing UI structure, you describe what you want to see. Today we learn the fundamentals of Compose.

Traditional Android UI is imperative.

You have Views. You call methods to change them. textView dot setText new value. You tell the system how to update.

Declarative UI works differently.

You describe what the UI should look like for a given state. The framework figures out how to achieve that.

If count is 5, show Text "Count: 5". If count changes to 6, the framework updates the Text automatically.

You declare the desired result. You do not write the update logic.

Declarative is often simpler. Fewer bugs from forgotten updates. The UI always matches the state.

In Compose, UI is built with composable functions.

A composable function is marked with at Composable annotation.

at Composable fun Greeting. Inside, you call other composables to build UI.

Composables describe UI elements. They do not return Views. They add elements to the composition.

You can call composables from other composables. Build complex UI by combining simple pieces.

Composables can take parameters. at Composable fun Greeting name String. Customize behavior with inputs.

The framework calls your composables when state changes. It figures out what UI needs updating.

Text displays text on screen.

Text "Hello World". A composable that shows a string.

Text takes parameters. text is the content. color, fontSize, fontWeight customize appearance.

Text text equals greeting comma fontSize equals 24 dot sp comma color equals Color dot Blue.

sp is scalable pixels for text. Respects user font size preferences.

Text is the equivalent of TextView in Compose.

Button is a clickable element.

Button onClick equals brace action close brace brace Text "Click me" close brace.

Button has two parts. onClick is the lambda for click handling. Content is what the button displays.

The content is a composable. Usually Text, but can be anything. Icon, Row with icon and text.

Button handles touch feedback automatically. Ripple effect, disabled state.

Column arranges children vertically.

Column brace Text "First" Text "Second" Text "Third" close brace. Three texts stacked top to bottom.

Row arranges children horizontally.

Row brace Text "Left" Text "Right" close brace. Two texts side by side.

Column and Row are the Compose equivalents of vertical and horizontal LinearLayout.

They take parameters for arrangement and alignment. verticalArrangement, horizontalAlignment for Column.

Arrangement dot SpaceBetween spreads children out. Alignment dot CenterHorizontally centers them.

Modifiers change appearance and behavior.

Text text equals "Hello" comma modifier equals Modifier dot padding 16 dot dp.

Modifiers are chained. Modifier dot padding 8 dot dp dot background Color dot Gray dot fillMaxWidth.

Order matters. padding before background leaves the padding outside the background. background before padding paints the background under the padding too.

Common modifiers: padding, size, fillMaxWidth, fillMaxHeight, background, clickable, border.

Modifiers are the primary way to style composables. Instead of many parameters, composables take a modifier.

Box stacks children on top of each other.

Box brace Image contentAlignment equals Alignment dot Center brace Text overlay close brace close brace.

Box is the Compose equivalent of FrameLayout.

Use contentAlignment to position children. Alignment dot Center, Alignment dot BottomEnd.

Children draw in order. First is bottom, last is top.

Box with Modifier dot fillMaxSize is a common pattern for full-screen content.

Preview lets you see composables in Android Studio without running the app.

at Preview at Composable fun GreetingPreview brace Greeting "Android" close brace.

The Preview annotation tells Android Studio to render this composable.

You can have multiple previews. Different states, different themes, different sizes.

at Preview showBackground equals true, name equals "Light Mode".

Preview functions do not ship in your app. They are for development only.

Previews speed up development. See changes instantly without building and running.

A simple Compose screen combines these elements.

at Composable fun ProfileScreen Column modifier fillMaxSize padding 16 dp brace Text name fontSize 24 sp Text email Button onClick brace close brace brace Text "Edit Profile" close brace close brace.

Column arranges elements vertically. Text shows name and email. Button triggers an action.

The entire UI is Kotlin code. No XML. No findViewById. No binding classes.

Compose is concise, type-safe, and reactive. State changes automatically update the UI.

Let us summarize.

Compose uses declarative UI. Describe what you want, not how to update.

Composable functions build UI. Mark with at Composable.

Basic composables: Text, Button. Layout composables: Column, Row, Box.

Modifiers style and position elements. Chain them together.

Preview annotation shows composables in Android Studio.

Compose is the modern way to build Android UI.