UI of any application plays an important role in application development. Android Jetpack compose provides declarative UI for easily maintaining and creating UI for your native application. By declarative API it will speed up the application development and help to create the responsive design for the application.
In this blog, we are going to learn about Android Jetpack compose declarative UI.
Composable functions
In Jetpack compose composable functions will helps you to build your UI instead of using the XML code. With the help of composable functions, we are going to create the UI programmatically.
In the recent approach, we use the set property for updating the current state of our UI but here we are creating the UI dynamically and can call the same function with updated data.
To create a composable function use @Composable annotation with your function name like:
|
1 2 3 4 |
@Composable fun displayCustomerName(customerName: String) { Text (text = customerName) } |
On the above code displayCustomerName() composable function is created for displaying the name of the customer taking customerName as a parameter. the Text component is used for displaying the text.
|
1 2 3 4 5 6 7 8 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { displayCustomerName("Test user") } } } |
Inside our MyActivity, we are extending AppCompatActivity and calling our method inside onCreate.
Declarative UI
In the recent approach, we use to inflate the XML layout which contains the components in the tree-like structure and each component will use to save their current state. The UI of the application will be changed with the help of the getter and setter.
Compose provide us a declarative approach for reusing our UI. Compose UI components are stateless so no need to use getter and setter. By simply calling the composable function. We reuse the UI bypassing the different parameters which will help to create dynamic UI.
So you reuse the UI component dynamically just by calling the composable function with the different value like:
|
1 |
displayCustomerName("second Test user") |
We can simply call displayCustomerName() composable function whenever we want to display the text inside our application.
Conclusion:
In this blog, we have learned about the Android Jetpack compose declarative UI on which we have learned that how we can create the UI without XML and the reuse of our UI components.
For more information regarding the Jetpack compose follow the link.
Thanks for reading this blog. You can also check other blogs from here.
Be the first to comment.