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
Original Source: How to Make Android App Faster with Jetpack Compose