Jetpack Compose Basics

October 12, 2021 Publish By : EXPERT APP DEVS 3 min read Viewed By : 763
jetpack compose basics in android

What is Jetpack Compose?

Jetpack Compose is a modern toolkit for building a Native UI in Android. It simplifies and makes easy UI development on Android. Compose is a powerful tool for building native UI and Jetpack Compose uses the Kotlin APIs. You can create a UI very easily and quickly.

Why Jetpack Compose?

Concise and Idiomatic Kotlin

  • Built with the benefits that Kotlin brings

Declarative

  • Fully declarative for defining UI components

Compatible

  • Compatible with existing views

Enable Beautiful Apps

  • Designed with Material Design

100% Kotlin

  • written in Kotlin programming language

Accelerate Development

  • writing less code and using tools

One codebase

  • No need to write XML anymore.

Less code

  • With less code, you can achieve more.

Composable Function

In Jetpack Compose, Composable functions are used for defining all the UI elements of your app programmatically. So, you need not create an XML file for your app screen design. You just need to make a composable function just by using the @Composable annotation to the function name. The basic syntax of a Composable function is as below:-

@Composable
fun UiComponent() {
    // Written code for your UI element
}

UI Layouts

A layout defining the visual structure for a user interface of your screen and view hierarchy, UI for an activity or an app widget.

UI Layouts

Jetpack Compose Layout types:

Column: A Column will show each child below the previous children. It is similar to a LinearLayout of XML with vertical orientation.

@Composable
fun ComposeColumn() {
    Column {
        Text("Hello Android ")
        Text("Hello Jetpack Compose")
    }
}

Row: A Row will display each child next to the previous children. It’s similar to a LinearLayout of XML with a horizontal orientation.

@Composable
fun ComposeRow() {
    Row {
        Text("Hello Android ")
        Text("Hello Jetpack Compose")
    }
}

Constraint layout: ConstraintLayout in Compose is similar to a ConstraintLayout from the classic Android XML layouts. A ConstraintLayout requires a Set of Constraints as a parameter. In the Set of Constraint, all constraints of the layout have to be declared.

Box: The Child’s views of the Box layout will be stacked over each other. You need to use the gravity modifier for managing the drawing of the child.

@Composable
fun ComposeBoxExample() {
    Box(Modifier.fillMaxSize()) {
        Text("Hello Android", modifier = Modifier.align(Alignment.TopCenter))
        Box(
                Modifier.align(Alignment.TopCenter).fillMaxHeight().preferredWidth(50.dp)
.background( Color.Blue)
        )
        Text("Hello Jetpack Compose", modifier = Modifier.align(Alignment.Center))
        FloatingActionButton(
                modifier = Modifier.align(Alignment.BottomEnd).padding(12.dp),
                onClick = {}
        ) {
            Text("+")
        }
    }
}

Thanks for reading my article. That's it from this tutorial. Happy Learning.
 

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.