Simplifying IT, Empowering Businesses

In today’s blog, our DEV IT engineers will go over the basics of using Jetpack Compose during your android app development process. This will help you be more productive during development and complete projects faster than anticipated.

Jetpack Compose in Android

Jetpack compose is an excellent tool for building native android UIs. Along with accelerating UI development, it also allows developers to create an app with minimal coding involved, thereby simplifying the procedure for everyone involved in the project thanks to its Kotlin API as well as powerful tools.

What are the Benefits of Using Jetpack Compose?

Before exploring the how to use it, let’s go over a few benefits you receive when using Jetpack Compose in your project:

• Declarative: It is fully declarative so that you can describe your UI components by calling some predefined functions.
• Compatible: It is easily compatible with existing views in Android.
• Increase development speed: Earlier developers had to work on XML files and Kotlin files. But with the help of Jetpack Compose, the process becomes easy and developers must only work on Kotlin files. Therefore, it will help developers in increasing the speed of their work.
• Concise and Idiomatic Kotlin: Jetpack Compose built UI with the benefits of Kotlin.
• Easy to maintain: Since the codebase of any application is present in a single file. It becomes easier to manage and handle the codebase of the application.
• Written in Kotlin: Application written using Jetpack Compose 100% uses Kotlin programming language

Getting Up and Running with Jetpack Compose

Now that you know what Jetpack Compose is and how it works, let’s go over the process of implementing it in your application development process.

Step 1: Create a New Android Studio Project.

Step 2: Adding a dependency to the project

def composeVersion = “1.0.0-alpha06”

implementation “androidx.compose.ui:ui:$composeVersion”

implementation “androidx.compose.foundation:foundation:$composeVersion”

implementation “androidx.ui:ui-tooling:$composeVersion”

implementation “androidx.compose.material:material:$composeVersion”

In addition to those dependencies, you can see that the compose flag is set to true in the buildFeatures block within Android

Since Jetpack exposes a programmatic way to create Compose user interfaces, you won’t be using any XML. This means that you will not use setContentView() in your activities or fragments, instead, you will use setContent() to set your UI.

To do this, open MainActivity.kt and replace the existing call to setContentView() with the following :

Make sure to import the dependencies from the android x.compose package, as you do so. setContent() is a Kotlin extension function in Activity that takes a @Composable lambda as a parameter

Text() is actually a function marked with the @Composable annotation. The Text() composable oversees, you guessed it, drawing text on the screen. You can think of it as a composed version of a TextView

Build and run and you’ll see the Text() on the screen

You can customize your text using Text Style. Try this by replacing existing Text()

Build and run again and you’ll now see

Creating a Composable Function

One of the most incredible benefits of Jetpack Compose is that you build your UI in a modular manner with lots of small functions rather than using one XML file for each Activity.

Now that you’re familiar with Text(), you can make your first @Composable function.

Add the following function below the MainActivity:

To use it, replace the existing call to Text() in setContent() with a call to Greeting():

Build and run again

Previewing a Composable

Normally, when you create a UI for one of your activities in XML, you use the layout preview to see what your view will look like without creating and running your app.

Jetpack Compose comes with a similar tool.

Add @Preview below @Composable on Greeting(), which you defined earlier:

After importing the annotation, you will see a preview of the composable show in the preview on the right side of the screen

Every time you update the composable you’re previewing, you’ll need to refresh the build to see the updated view. You can only preview composable that take no arguments.

Now that you can preview your components, it’s time to learn how to work with layouts

Using the Column Composable

Think of a column as a LinearLayout with a vertical orientation. It simply puts all its child composable in a vertical column.

Update Greeting() to wrap the three Text() in a Column()

Column() takes an @Composable lambda block, which is where you declare the column’s children

In Greeting(), you’re adding three Texts as this Column children. This pattern of having a composable function that accepts a lambda to create other composable functions is common in jetpack compose

Taking inputs using TextField

Like EditText, in Compose we can use TextField and BaseTextField. BaseTextField is still experimental and can be permanently removed or added at any time. So, to use BaseTextField, you need to add @ExperimentalFoundationApi annotation.

The following is an example of a simple BaseTextField

In the above function, we have a BaseTextField inside a surface. We have a callback named on value change. This callback is called when there is some change in the input in BaseTextField and the updated text will come as a parameter from the callback.

Conclusion

Now that you know how to implement Jetpack Compose, we hope it will benefit your mobile application development company in delivering projects faster than before. If you have any queries or encounter problems in the above process, please feel free to comment down below and we’ll be glad to assist you.