Architectural Layer: Jetpack Compose

In this article, we will discuss architectural layer  used injetpack compose. You can read more about jetpack compose in the following article.

Layers

The major layers present in jetpack compose are:

Material

This layer provides an implementation of the Material Design system for Compose UI, providing a theming system, styled components, ripple indications, and icons.

@Composable
fun MyApp() {
    MaterialTheme {
        // Material Components like Button, Card, Switch, etc.
    }
}

Foundation

This layer  provides the  building blocks for Compose UI, like Row ,Column and LazyColumn etc.

@Composable
fun RowExample() {
    Row {
        Text("Hello World!")
        Text("Hello World!2")
    }
}

UI

This layer implements the fundamentals of the UI toolkit, such as modifiers, input handlers, custom layouts, and drawings. It is made up of multiple modules like ui-text, ui-graphic, ui-tooling etc.

@Composable
fun BoxExample() {
    Box(Modifier.fillMaxSize()) {
        Text("This text is drawn first", modifier = Modifier.align(Alignment.TopCenter))
        Box(
            Modifier.align(Alignment.TopCenter).fillMaxHeight().width(
                50.dp
            ).background(Color.Blue)
        )
        Text("This text is drawn last", modifier = Modifier.align(Alignment.Center))
        FloatingActionButton(
            modifier = Modifier.align(Alignment.BottomEnd).padding(12.dp),
            onClick = {}
        ) {
            Text("+")
        }
    }
}

Runtime

This layer provides the fundamentals of the Compose runtime such as remember , mutableStateOf, and @composable annotations. We can use this layer only if we need state management, not UI.

@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       var name by remember { mutableStateOf("") }
       if (name.isNotEmpty()) {
           Text(
               text = "Hello, $name!",
               modifier = Modifier.padding(bottom = 8.dp),
               style = MaterialTheme.typography.h5
           )
       }
       OutlinedTextField(
           value = name,
           onValueChange = { name = it },
           label = { Text("Name") }
       )
   }
}

That’s it from this article. You can read more here.

Stay tuned for more updates from PLG Works.

Daksh
Hey, I Am Daksh Bhardwaj, A Tech Enthusiast , My Core Interests Lies In Hybrid App Development And Web Development Using Latest Tools And Techniques. Improving every day!