Jetpack Compose is a new UI ToolKit, which makes the responsive programming model with Kotlin programming language. It simplifies the UI development without an XML role.
Jetpack compose is declarative, which means that the UI described by managing a series of functions which will manage the data into UI.
This Compose Framework will update the View hierarchy while calling these functions.
The current version of Jetpack Compose is 1.0.0-alpha08 and the official has repeatedly emphasized that it is very likely to change and cannot be used in a production environment. But it's good to understand Compose briefly
Let's start to Create UI with Jetpack Compose Library
To start a new compose project, open an Android Studio, and choose a new Android studio project.
To Render Jetpack Compose UI we need to use the Latest Android studio Canary Build
When creating a new project, select "Empty Compose Activity " from the available templates. Note that the
minimum SDK version is at least 21 and above, and "Language" must be kotlin
Check Compose Dependencies in gradle file
Make sure using the Latest compose version
To work with Compose we need to add the below code in gradle file
Compose UI creation
After project creation, we will see the default code below
In the default code, we find different functions like
setContent: We know normal Android activity will contain setContentView() method to apply XML layout, in Jetpack compose activity we will not use XML layout, this setContent() will use to define the layout, but instead of using an XML file, it calls a Composablefunction in it
ComposeBasicTheme: It Will provide the theme for the layout.
How to create a composable function?
To create a composable function we just need to write @Composable annotation on the function
The composable function can also be called other composable functions
These composable functions are just kotlin programming functions marked with @Composable annotations
When we see the activity we will find other code like
@Preview(showBackground = true)
This @Preview will show our UI layout in the preview model window
Let say if we want to add a background color for a certain component we must use the Surface function.
For example if we want to change the text color
Note: @Composable annotation is only necessary for functions that create UI. It can call regular functions and other Composables functions. If a function does not meet these requirements, the @Composable annotation should not be used
We were created a simple Ui to display simple Messages, how to change the properties of this text.
To hand the properties of these UI elements, compose has a class called Modifies.
Modifiers are the list of attributes that apply modifications to UI components. Few modifiers are: Spacing, AspectRatioand modify Flexible Layoutsthe layout Rowand Column.
In the next post, we will learn advanced concepts of Jetpack Compose and its UI components.
How to create complex UI with Jetpack Compose tool
Conclusion: This Jetpack Compose Introduction will give you the confidence to start with the Composable function to create Simple UI.
Tags: Jetpack Compose, Composable functions, Android Canary version.
Article Contributed By :