Building Android Application with Jetpack Compose

#android #jetpackcompose #kotlin

Jetpack Compose is a modern toolkit for building native Android UIs. With Jetpack Compose, you can build beautiful, responsive, and flexible user interfaces using a declarative programming model. In this article, I will guide you through the process of building a simple Android application using Jetpack Compose.

Prerequisites:

Android Studio Arctic Fox or later.
Kotlin 1.5 or later

To get started with Jetpack Compose, let's create a new Android Studio project using the "Empty Compose Activity" template. The "Empty Compose Activity" template will create a project with the necessary dependencies and a basic Composable function that displays a "Hello, Android!" message.

Composable Functions
Composable functions are the building blocks of Jetpack Compose UIs. A Composable function is a Kotlin function that returns a UI element. Composable functions are annotated with the @Composable annotation.

Here's an example of a Composable function that displays a text message:

@Composable
fun Greeting(name: String) 
{
    Text(
        text = "Hello $name!",
    )
}

In this sample, the greeting function takes a name parameter and returns a text UI element that displays a greeting message.
If you want to change how this text looks or appears on your UI, you must use a Modifier.

Modifiers
Modifiers are used to change the appearance or behavior of a Composable element. Modifiers are functions that are called on a Composable element using the . operator.
Here's an example of a Composable function that uses modifiers to change the appearance of a text element:

 Text(
          text = "List of Courses",
          fontSize = "24.dp"
          modifier = Modifier.padding(top = 16.dp)
)

In this sample, I used modifiers to add padding around the text element and font size to increase the text size of the Text.
A better way to make the UI more organized is to use layouts.

Layouts
Layouts are used to arrange Composable elements on the screen. There are several built-in layouts in Jetpack Compose, such as column, row, box, and constraintLayout.
Here's an example of a Composable function that uses the column layout to display lists of composable elements.

Column(
      modifier = Modifier
          .fillMaxSize(1f)
          .padding(start = 6.dp, end = 6.dp)
  ) {

      Text(
          text = "List of Courses",
          modifier = Modifier.padding(top = 16.dp)
      )

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

     Row() {
         OutlinedTextField(
             value = textValue,
             onValueChange = { newTextValue ->
                 textValue =newTextValue

 } 
)

The column layout is used to arrange the text elements vertically. A spacer element is added after each element to separate it from another.

TextField
In jetpack compose TextField are used in place of EditText. TextFied has parameters such Value, onValueChange etc.
Value is the expected input in the Textfield
The onValueChanged is called whenever there is a new input to the TextField.

OutlinedTextField(
             value = textValue,
             onValueChange = { newTextValue ->
                 textValue =newTextValue

             } 
)

The onValueChanged lambda returns a new value that you can use to update the Textfield state.

State
State in an app is any value that can change over time. This is a very broad definition and encompasses everything from a Room database to a variable in a class.

var textValue  by  remember {
        mutableStateOf("")

}

State is used to store and update the state of a Composable element. State is declared using the remember function, which creates a mutableState object that can be updated using the setState function.

Compare RecyclerView on Kotlin and List is Jetpack Compose
RecyclerView and Jetpack Compose are both tools that can be used to display lists in Android applications, but they use different approaches to achieve this.

RecyclerView
RecyclerView is a UI component in Android that is used to display large data sets in a list or grid format. It is part of the Android framework and is implemented in Java. It is used with an Adapter, which provides the data to be displayed and handles the creation and binding of Views.

class MyAdapter(private val data: List<String>) : RecyclerView.Adapter<MyViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.bind(data[position])
    }

    override fun getItemCount(): Int {
        return data.size
    }

}
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    fun bind(item: String) {
        itemView.itemTextView.text = item
    }

}

To use RecyclerView in Kotlin, you would create a RecyclerView in your layout XML file and then create an Adapter class that extends RecyclerView.Adapter. The Adapter class would define the data to be displayed and handle the creation and binding of Views. You would then set the Adapter on the RecyclerView in your Kotlin code.

Jetpack Compose
Jetpack Compose provides a more concise and intuitive way to build UIs compared to traditional Android layouts.
In Jetpack Compose, you would create a Composable function that defines the UI for your list and use the LazyColumn or LazyRow layout to display the list. The LazyColumn or LazyRow layout creates and binds Views as needed, which makes it more efficient than traditional layouts.

Let's implement this in our code.
Look at an example of a basic Jetpack Compose implementation for displaying a list:

@Composable
fun LearnACourseList(courseTitle:List<String>) {

    LazyColumn(){

        items(courseTitle){ course ->
            CourseCard(course)

        }
    }
}

In this example, the LearnACourseList function is a Composable function that takes a list of String items and uses the LazyColumn layout to display the list. The items function is used to iterate over the data list and create a Text Composable element for each item.

Comparison
In terms of ease of use and development speed, Jetpack Compose is easier and faster to develop compared to RecyclerView. This is because Jetpack Compose uses a more concise and intuitive syntax, and it handles the creation and binding of Views automatically.

In terms of performance, Jetpack Compose is also considered to be more efficient compared to RecyclerView. Jetpack Compose uses a more efficient layout system that creates and binds Views as needed, which reduces memory usage and improves performance. However, the performance of Jetpack Compose may depend on the complexity of the UI and the number of items in the list.

Find the link to the project here