Getting Started with Jetpack Compose: Building a Simple Page

This article introduces how to develop a simple page using Jetpack Compose, covering basic concepts such as defining composable components, updating state, and previewing the UI.

Jetpack Compose is a modern toolkit for building native Android interfaces with less code, powerful tools, and an intuitive Kotlin API. It allows developers familiar with Kotlin, Flutter, or React to adopt a declarative UI approach with minimal learning cost.

Basic Layout Example (XML‑like)

<Scaffold
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <TopAppBar android:title="MyApp Title"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_content"
            android:onClick="handleClick"
            android:text="Ciallo~"/>
    </LinearLayout>
</Scaffold>

Composable Functions

@Composable
fun HomePage() {
    Box {
        Body(title = "HomePage") {
            Text(text = "content")
        }
    }
}

/**
 * Body component that receives a title and a composable child.
 */
@Composable
fun Body(title: String, content: @Composable () -> Unit) {
    Column {
        Text(text = title)
        content()
    }
}

To display a composable, attach it to an Activity using setContent:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HomePage()
        }
    }
}

State and Logic

Compose is declarative and reactive. UI updates are driven by state changes. Example of a state‑driven button:

@Composable
fun Body(title: String) {
    var stateTitle by remember { mutableStateOf("default state") }
    Column {
        Text(text = "${title}_$stateTitle")
        Button(onClick = { stateTitle += "?" }) {
            Text("Click")
        }
    }
}

Animation Example

// Scale animation based on press state
@Composable
fun MutableInteractionSource.animationScale(): Float {
    val isPressed by collectIsPressedAsState()
    val animationScale by animateFloatAsState(if (isPressed) 0.7f else 1.0f)
    return animationScale
}

@Composable
fun ScaleAnimationButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick,
        modifier.scale(interactionSource.animationScale()),
        enabled,
        interactionSource,
        elevation,
        shape,
        border,
        colors,
        contentPadding,
        content
    )
}

Responsive Layout (Landscape/Portrait)

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeCalculatorTheme {
                CalculatorApp(windowSizeClass = calculateWindowSizeClass(activity = this))
            }
        }
    }
}

@Composable
fun CalculatorApp(windowSizeClass: WindowSizeClass) {
    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) {
        // Landscape layout
    } else {
        // Portrait layout
    }
}

The article also mentions previewing composables with @Preview, the limitations of preview speed, and provides links to a sample calculator project and a simple arithmetic script parser.

In summary, the tutorial demonstrates the fundamentals of Jetpack Compose: defining composables, managing state, handling animations, and adapting layouts for different screen sizes. It serves as a starting point for developers interested in modern Android UI development.