Getting Started with Jetpack Compose

You might have already heard about Jetpack Compose, as it is the most trending topic in Android Development. Still, let’s quickly define what it is! Well, Jetpack Compose is a declarative UI for native Android applications like Flutter and SwiftUI. It is built around Kotlin, and it has extensive support from Google.

What is declarative UI? 🤔

With declarative UI, we can tell our application what it should do and how it should look in a different state of an application, and that’s it. Now it will automatically update itself based on the states.

In simple words, we just provide them with the rules they need to follow, and based on that; they update themselves.

What’s in this blog?

Well, this will be a series of blogs where we will first see the pros and cons of Jetpack Compose. Then in the upcoming blogs, we will understand how to use some of the essential components(which we are already using in our Android development) in Jetpack Compose.

Pros of using Jetpack Compose : 😍

• Less code means fewer chances of error and easy debugging 😈

Let’s say you want to display a list of items in your app. Below are the steps that you must follow to achieve that :
– Declare your RecyclerView in XML.
– Create your custom views which will be shown in your RecyclerView cell.
– Create an adapter, and add OnCreate, OnBind, and other methods to display your cell.
– Finally, bind your RecyclerView with an adapter in your .kt/java file.

Isn’t that a bit tedious task?

Using Jetpack Compose, you can do it with a couple of lines of code. So let’s see how to do that:

And that’s it! This will display a list of 20 items in your app. See how easy it is!

Amazing, right? Yes, that’s what Jetpack Compose is. 🕺

• Single source of truth ℹ️
  In Jetpack compose, you can pass the state to your composable functions, and it will observe and update itself accordingly. You don’t need to make any changes to the UI.
• Kotlin friendly 😃
  Jetpack Compose uses Kotlin. So with the help of it, you can easily create your own UI. You can simply decide what to display using if/else or display a list of filtered users using advanced functions of collections. Also, it becomes easier to learn and understand the process.

• Less build time and smaller apk size 😲
  The use of Jetpack Compose significantly reduces your development time and the apk size. Check out the detailed description of how migrating from android views to Jetpack Compose affects the build time and apk size here: https://developer.android.com/jetpack/compose/ergonomics
• Compatible with existing code, you can use it right now if you want to, with the support of XMLs. 😌

Jetpack is already in use for production for many projects. But do you want to experiment with it in your current project, which consists of old XMLs? You can easily do it. You need to add a single component or a complete screen in your project without any changes.

Cons of using Jetpack Compose : 😥

• Although it is production-ready, some of the APIs are Experimental at the moment.
• Some of the views still cannot be implemented in Jetpack Compose, for example, WebView, SurfaceView, AdView, etc. However, we have an alternative way of using it with AndroidViews.
• Although it is completely interoperable, it may result in a large apk size and extra build time at the start of migration, which can be reduced when your project is completely migrated.
• It’s great to start with, but if you are working on a tight schedule project, you may skip this as you’d still need to learn a few things about it.

Should we use Jetpack Compose in Production? 🤔

It totally depends on your project requirements. As mentioned earlier, if you are new to Compose and have a project deadline, you should probably avoid using it for the time being. But you can start using it in some of your side/small projects as Jetpack Compose is the future of Android development.

What will be in the upcoming series?

• Basic components of Jetpack Compose: We will see how we can use basic components of Android development, such as Textfields, buttons, etc., in Jetpack Compose, and using that, we will create a login page.
• Bottom Navigation in Jetpack Compose: We will see how we can create bottom navigation view and how we can pass data in it with Jetpack Compose.
• Using Android Views with Composable: While Jetpack is still new, what if you want to use this in existing projects that contain XML? We will see how you can use Composable views with xml, and also, we will check how we can get xml views in our composable functions. Also, remember about the cons we discussed above, stating that we can’t use some of the views in Jetpack Compose? Here, we will see some of those views as well.
• Customising List views and adding swipe gestures: Swipe to delete/edit is quite common in a lot of applications. With our traditional recycler view, it’s quite messy to handle Touch callbacks but in Jetpack compose, it’s just a matter of a few lines with which you can easily add swipe gestures in your app. You can also check this amazing library for swipeable views: https://github.com/SimformSolutionsPvtLtd/SSJetpackComposeSwipeableView

Conclusion:

In this article, we have seen what Jetpack Compose is and why we should use it. We have also seen some of the Pros and Cons of Jetpack compose.
Do you think you should use Jetpack Compose in your production environments? I definitely think that we should start using it in our small projects at least. Do let us know your views in the comments. 🤘

You can also check out this amazing repository: https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook to check the collection of major UI components and sample screens built with Jetpack Compose.

If you have any suggestions, feedback, or doubts, feel free to comment below, or you can connect with me on Twitter or LinkedIn.

Source: Medium