JetPack Compose in Android

In this Article you are going to learn about Jetpack compose by making MVVM implementation using other latest tools as well.

Jetpack Compose is a modern way of Implementing native UI for Android development. It speed up your android app development as from using this concept you don’t have to create XML’s for UI and then find them in view using Kotlin synthetics or View Binding, you can directly implement UI in Kotlin file and that definitely saves your time.

Jetpack compose is part of Android Jetpack library and written in Kotlin so it is very friendly and easy to access from Kotlin codebase :)

What are Composable functions?

In the way of learning Jetpack compose it’s very important to understand the basic things and the most important is Composable functions

Composable functions are designed to implement UI programmatically.
Ideally we should keep only UI creation in composable functions.

Benefits of using jetpack compose?

• Declarative
• Easy to maintain
• Concise coding
• Speed up development

Let’s learn few basic methods that are available to make UI in Jetpack Compose

• Composable function that uses @Composable annotation to make any UI method you can use as cap to any function and deal the UI programmatically.
• Default Preview is the annotation method that deals with main preview of the screen, it means you can preview only particular screen without running whole app, just add @Preview annotation top of the method.
• Text() for making a TextView, Image() for making a ImageView
• Column() for making stack UI in vertical manner while Row() for making stack of item in horizontal manner.
• Spacer() is used to provide some space between the views
• LazyColumn() is similar to recyclerView in vertical and LazyRow() is working as recyclerView in horizontal direction.

Let’s implement a news application using Jetpack compose and and I am going to use best practices like DI injection using Hilt and MVVM using repository pattern to be cleaner work.

What is the plan?

I will make a UI first that will consider the each row like below and the will be the part of a list

Step 1: Create a scratch project in Android Studio IDE by selecting Empty Compose Activity and then select next, give your project name and finish it.

Step 2: Once you got the application you can see there is no more XML screen available and there is only Activity koltin file is there. So don’t getting surprise we will learn making UI programmatically today.

Step 3: Implement a UI into an separate file to make your Activity neat and clean and keep more modular way of programming, so i am implementing a news application so creating a List component using LazyColumn(modifier = Modifier.fillMaxSize())

as you can see below the full code base where i am making a search field for input the type of news from user and then on click of button there is an action to get the result from API.

@Preview
@Composable
fun MainScreen(viewModel: MainViewModel = hiltViewModel()) {
    LocalContext.current
    val searchText by remember { mutableStateOf("") }
    val response by viewModel.result.observeAsState()


    Column(
        modifier = Modifier.padding(10.dp)
    ) {
        Column {
            var textState by remember { mutableStateOf("") }
            val maxLength = 110
            val lightBlue = Color(0xFFE5E8EC)
            val blue = Color(0xFFC3C6CA)

            Text(
                text = "Search For News",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 4.dp),
                textAlign = TextAlign.Start,
                color = blue
            )
            Row(Modifier.align(CenterHorizontally)) {
                TextField(
                    modifier = Modifier.width(270.dp),
                    value = textState,
                    colors = TextFieldDefaults.textFieldColors(
                        backgroundColor = lightBlue,
                        cursorColor = Color.Black,
                        disabledLabelColor = lightBlue,
                        focusedIndicatorColor = Color.Transparent,
                        unfocusedIndicatorColor = Color.Transparent
                    ),
                    onValueChange = {
                        if (it.length <= maxLength) textState = it
                    },
                    shape = RoundedCornerShape(8.dp),
                    singleLine = true,
                    trailingIcon = {
                        if (textState.isNotEmpty()) {
                            IconButton(onClick = { textState = "" }) {
                                Icon(
                                    imageVector = Icons.Outlined.Close,
                                    contentDescription = null
                                )
                            }
                        }
                    }
                )

                Spacer(modifier = Modifier.padding(3.dp))

                Button(
                    onClick = { viewModel.searchForImage(searchText) },
                    modifier = Modifier.height(53.dp)
                ) {
                    Text(text = "Search")
                }

            }

            Text(
                text = "${textState.length} / $maxLength",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 4.dp),
                textAlign = TextAlign.End,
                color = blue
            )
        }
        Spacer(modifier = Modifier.padding(5.dp))

        Card(
            shape = RoundedCornerShape(8.dp),
            backgroundColor = Color.Cyan,
        ) {
            Column(Modifier.padding(5.dp)) {
                response?.let {
                    ImageList(images = it.news)
                }
            }
        }
    }
}

@Composable
fun ImageList(images: List<New>) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(images) { news ->
            key(news) {

                Card(
                    shape = RoundedCornerShape(8.dp),
                    backgroundColor = Color.White,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Row(Modifier.padding(10.dp)) {
                        GlideImage(modifier = Modifier.size(100.dp), imageModel = news.image)

                        Spacer(modifier = Modifier.padding(5.dp))

                        Column(Modifier.padding(1.dp)) {
                            Text(
                                text = news.title, style = MaterialTheme.typography.h6,
                                fontSize = 15.sp
                            )
                            Spacer(modifier = Modifier.padding(10.dp))
                            Text(
                                text = news.description, style = MaterialTheme.typography.h6,
                                fontSize = 11.sp
                            )
                        }
                    }
                }
                Spacer(
                    modifier = Modifier.padding(2.dp),
                )
            }
        }
    }
}

Result

I got an app ready that make a search of news and give you related available news on the topic.

GitHub - cheetahmail007/Jetpack-Compose-News-App: Jetpack compose Simple app using news concept

Thanks for reading this article. Be sure to click 👏 below to applause this article if you found it helpful. It means a lot to me.