Prebuild Component Of Jetpack compose

👋 This Side Aditya,

In previous post we discuss about jetpack compose , how it works etc.. if you have not seen that check this Introduction to jetpack compose.

Now we will talk about the prebuild component that help us to build the UI of screen. there are many basic component provided by jetpack compose like Text, Row, Column, Card, Box etc…

Basically you can divide your UI in to 2parts:

1. Component
2. Layout

So let start with Component , Component basically a prebuild composable function which help us to show different UI on the screen like Text, Image, Card, Scaffold, Slider, Switch etc.. , it see some of them right below.

Text in Jetpack Compose :

In jetpack compose if you want to show text then you can use Text composable. below is a example of this.

@Composable
fun SimpleText() {
    Text("Hello World")
}

Text in Compose | Jetpack Compose | Android Developers

Image in Jetpack compose :

In jetpack compose if you want to show drawable images like png, jpg, vector resource, etc.. means what ever image that are locally available can be show with Image Composable. below is a example of this.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

But what if you want to show remote image’s that are stored on server in that case we need to use AsyncImage composable or third party library like Coil and Glide.

Let see small example of AsyncImage

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

Working with images | Jetpack Compose | Android Developers

GitHub - coil-kt/coil: Image loading for Android and Compose Multiplatform.

Glide v4 : Compose

Button in Jetpack compose :

In jetpack compose the Button composable is prebuild as well so you don’t need to create it from scratch and if you want to use Button you need to use Button Composable . Jetpack compose provide 5 different type of Button’s Filled, Filled Tonal, Elevated, Outlined, Text.

Let see small example of Button

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}

Button | Jetpack Compose | Android Developers

Card in Jetpack Compose :

In jetpack compose the card view act like material design container, you may have see multiple example of it like product in shooping cart, news story in news application etc..

Let see small example of Card

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Card | Jetpack Compose | Android Developers

Checkbox in Jetpack Compose :

In jetpack compose for implementing checkbox you can you CheckBox composable. Checkboxes let users select one or more items from a list. you might have seen some example while you sign agreement online there for agreeing on term condition you have to tap of checkbox etc..

Let see small example of Checkbox

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}

Checkbox | Jetpack Compose | Android Developers

Switch in Jetpack Compose :

In jetpack compose for using switch you need to use switch composable. Generally we use switch in case of enable or disable kind of stuff. for example if you have seen your device has feature called themeing like dark theme and light theme to navigate between any of this you can use switch basically you create a switch if it is true using dark theme else white theme.

Let see small example of Switch

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

Switch | Jetpack Compose | Android Developers

There are alot of component available which i can’t put here you if you have interest in knowing all of those you can visit official jetpack compose documentation provided by google.

Get started with Jetpack Compose | Android Developers

So let start with Layout in jetpack compose. Layout basically help use to construct the structure of you screen design basically to arrange the component (which we discussed previously) in your screen you have to use Layout’s which are available in jetpack compose.

There are 3 Standard Layout:

1. Row Composable :

In jetpack compose if you want to set items in horizonatlly direction then you can use Row Composable . it is easy to use and it come’s with verticalAlignment, horizontalArrangement property which help use to provide extra flexibility with item’s position.

Let see below example :

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}

2. Column Composable :

In jetpack compose if you want to set items in vertically direction then you can use Column Composable . it is easy to use and it come’s with verticalArrangement, horizontalAlignment property which help use to provide extra flexibility with item’s position.

Let see below example :

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

3. Box Composable :

In jetpack compose whenever you want to put item on top of another item or you want to provide a specific location to specific item in that case you can use Box Composable. basically Box don’t have any specific property like we have for Column and Row.

Let see below example :

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}

Above all there are standard layout builder of jetpack compose now we will see some of advance layout builder in next artical’s. so stay tune. or if you want to see those now i will attach below offical android jetpack compose documentation.

Layouts in Compose | Jetpack Compose | Android Developers