Components in android jetpack compose - similar component to android

As android announced jetpack compose, I have read about it and checked how it works. It’s structure looks similar to flutter development, like only one file for UI and code. But it is still in alpha version so we can only use it in canary channel.

I have listed some of components and parameters(28th Jan 2021), which are use full for building app:

Text

Text("Hello There")

Column – to display in vertical format

Column {
        Text("Hello")
        Text("There")
    }

Row – to display in horizontal format

Row {
        Text("Hello")
        Text("There")
    }

Spacer – define empty space

Spacer(Modifier.preferredSize(padding))

Card – same as CardView in android

Card(elevation = 4.dp) { /*...*/  }

ScrollableColumn & ScrollableRow – ScrollView or HorizontalScrollView

ScrollableColumn(Modifier.fillMaxSize()) {
        /*....*/
}

LazyColumnFor & LazyRowFor – Recyclerview or HorizontalRecyclerView

LazyColumnFor(list) { item ->
    /*....*/
}

Scaffold – This allows us to use material components like drawer, appbar, fab button etc.

Scaffold (
        drawerContent = { /*...*/ },
        topBar = { /*...*/ },
        bodyContent = { /*...*/ }
    )

ConstraintLayout – yes it is available in compose also

Modifier – A great tool for appearance and behavior changes, all our xml attributes can be found here

Divider – Used to show divider between two components

LazyColumn & LazyRow – LazyColumnFor internally used LazyColumn and so LazyRow

Button

Button(onClick = {  }) {
        Text("")
}

Image – as ImageView

Important note:

LazyColumn doesn’t recycle its children like RecyclerView. It emits new Composables as you scroll through it and is still performant as emitting Composables is relatively cheap compared to instantiating Android Views.

Share this content:

Components in android jetpack compose – similar component to android