As an Android developer, Things you need to know about Jetpack compose
Ahmed Elnoor
PMP? | Senior Mobile & Software Engineer | Android OS Specialist | Flutter, React Native, iOS | Project Management | WordPress | E-commerce | Content Creator | Technical Writer
Hello developers,
If you are an android developer working with kotlin either you refactor your code with Jetpack compose or still using XML this article will change your mind about Jetpack compose.
So What is Jetpack Compose:
Jetpack Compose is Android's modern toolkit for building native UI.
With compose you have the ability to build apps UI faster with less code.
Compose stable version 1.3.2
What are the benefits and advantages of working with Jetpack compose?
You can do more with less code, so your code is simple and easy to maintained.
Jetpack compose will take care of the UI as the app state changes,? your UI automatically updates, all you need to do is to describe your UI.
Jetpack compose is compatible with all your existing code, and iterates fast with live preview in Android studio.
With Jetpack you have access to the Android platform APIs and all built-in support for material design, dark theme, animation, and much more.
A lot of companies start integrating Compose into their apps.
Google Play, Twitter, Airbnb, and more.
Jetpack Compose:
- Foundation:-
Using compose you can build your user interface by defining a set of composable functions that take in data and emit UI elements.
A simple example is a ComposeIsAwesome widget, which takes in a string and emits a Text widget that displays a message, instead of creating a separate XML file and giving the text id and attributes and then defining the text view on the class and doing the rest.?
Compose is quite simple, fast and modern.
Suppose we want to build a UI that greets a list of users:
@Composable
fun UsersList(users: List<String){
??for(user in users){
??Text("Welcome $name")
??}
?}
The UserList() function takes in a list of names and generates a greeting for each user.
with this simple function we built screen with list of users.
with this simple function, we built a screen with a list of users.
If we compare it with XML then we have to create a separate XML file for inflating the list item and then use the adapter for inflating the items using recycler view!!.
Compose give you the full flexibility to use if statements or loops in order to show a particular UI elements. and this is the one of the key advantage of jetpack compose.
Recomposition:
In XML if we want to change the state of the widget for example text view we have to call a setter on the widget.
In compose we call the composable function again with the new data.
So what is the recomposition? in simply we can say:
Recomposition is the process of calling your composable functions again when inputs change.
For example, consider the composable function which displays a button.
@Composable
fun ClickMe(numberOfClicks: Int, onClick: () -> Unit)
?Button(onClick = onClick){
??Text("I've been clicked $numberOfCLicks times")
?}
}
So every time we click on the button the text widget will be redrawn with the new data, and the the value of numberofClicks will be updated.
Compose calls the lambda with the Text function again to show the new value, this process is called recomposition.
The compose framework can intelligently recompose only the components that changed.
If we recompose the entire UI tree can be computationally expensive, which uses computing power and battery life.
Compose solve this problem with intelligent recomposition.
State and Jetpack compose:
State is any value that can change over time in android app.
for example a database or a variable on a class, a snack bar that shows when?a network connection can't be established.
Jetpack compose helps us be explicit about where and how we store and use state in our Android app.
Let's see the connection between state and composable and the APIs that jetpack compose offers to work with state more easily.
State and composition:-
Any time state is updated a recomposition takes place as a result things like TextField don't automatically update like they do in XML-based views.?
A composable has to explicitly be told the new state in order for it to update accordingly.
领英推荐
@Composable
fun HelloCompose(){
?Column(modifier = Modifier.padding(16.dp)) {
????Text(
??????text = "Hello!",
??????modifier = Modifier.padding(bottom = 8.dp),
??????style = MaterialTheme.typography.h5
????)
????OutlinedTextField(
??????value = "",
??????onValueChange = { },
??????label = { Text("Name") }
????)
??}
}
The composable function can use the remember API to store an object in memory.
The value computed by remember is stored in the Composition during the initial composition!, and the stored value is returned during the composition.
remember can be used to store both mutable and immutable objects.
mutableState of creates an observable MutableState<T>, which is an observable type integrated with the compose run time.
let's remember to remember our name when the name is empty?
@Composable
fun HelloCompose(){
?Column(modifier = Modifier.padding(16.dp)) {
????var name by remember {mutableStateOf("")}
if(name.isNotEmpty()){
????Text(
??????text = "Hello!, $name",
??????modifier = Modifier.padding(bottom = 8.dp),
??????style = MaterialTheme.typography.h5
????)}
????OutlinedTextField(
??????value = "",
??????onValueChange = { },
??????label = { Text("Name") }
????)
??}
}
other supported type of states:
Jetpack compose supports other observable types, but before reading other observable types in jetpack we must convert it to a State<T> so that Jetpack compose can automatically recompose when the state changes.
Other observable type used in Android apps:
-LiveData
- Flow
- RxJava2
Compose performance:
Jetpack compose aims to deliver great performance so in order to configure your app for best performance:
- Configure your application properly by:
1- build in release mode and use R8
2- use a baseline profile?
Baseline Profiles are a list of classes and methods included in an APK used by Android Runtime (ART) during installation to pre-compile critical paths to machine code.
3- Use layout inspector to check how often a composable is recomposed or skipped.
Jetpack compose layout:
Jetpack makes it much easier to design and build our app's UI.
The goals of layout in compose :
The compose implementation of the layout system has two main goals:
@Composable
fun DeveloperCard(){
?Text("Ahmed Elnoor")
Text(" 3 minues ago")
}?
without guidance on how we want the elements arranged, compose stacks of the text elements on top of each other, making them unreadable.
Compose provides a collection of ready-to-use layouts that help us arrange our UI elements and make it easy to define our own custom layouts.
Use Column to place items vertically on the screen?
@Composable
fun DeveloperCard(){
Column{
?Text("Ahmed Elnoor")
Text(" 3 minues ago")
}
}?
and aslo use Row to place items horizontally on the screen.
Both Column and Row support configuring the alignment of the elements they contain.
@Composable
fun DeveloperCard(){
??Row(verticalAlignment = Alignment.CenterVertically) {
Image()
? Column{
? Text("Ahmed Elnoor")
Text(" 3 minues ago")
}
}
}?
Hope you learned something today, if you still use XML or have a new project I highly recommend you refactor your code with Jetpack compose.
A quick summary about me:
I am Ahmed, a mobile software engineer with over 4 years of experience in Android development, using Java, and kotlin, and recently switched to flutter!
So my experience is all about building android apps from scratch using different technologies and frameworks, mostly I use Kotlin XML or jetpack compose, Java, koin, kodein or Hilt for dependency injections, MVVM and clean architecture for project architecture and pattern, agile, and much more.
?? Share this article with other developers????
?? Don't forget to follow me for more article about Android & Software development.
Let's connect Ahmed Elnoor
Source: Android Developers
I am a full stack developer. Python(Django, Flask), Kotlin(Ktor, XML, Jetpack compose, KMP), Dart(Flutter), Image Editor(Gimp)
2 年Compose is awesome, but can it be integrated to Kotlin multiplatform?