Introduction to Jetpack Compose - 2
In this article, we will make an introduction to the world of Jetpack Compose by creating a new project and try to learn most of the basic concepts.
This article will be the second article in our series and reading the first article will help a lot in understanding this article better. In the first article of the series, by getting to know the jetpack compose toolkit; We learned about the development processes and what solutions it offers, on the other hand, we learned the logic and operation of it and got a good grasp of it before development. I strongly recommend that you read the Jetpack Compose Introduction before you begin.
Implementation
First of all, let’s learn how to implement Jetpack Compose in our project so that we can use it.
Before implementing, the following points should also be considered.
To use Jetpack Compose in your project, your project api level must be 21 or higher.
For the best experience developing with Jetpack Compose, you should download Android Studio Arctic Fox. That’s because when you use Android Studio to develop your app with Jetpack Compose, you can benefit from smart editor features, such as New Project templates and the ability to immediately preview your Compose UI.
If you start a new project by selecting Empty Compose Activity, all necessary dependencies and adjustments will be installed automatically. You can then start coding your project containing Jetpack Compose without wasting time. If you want to migrate your existing project to Jetpack Compose, you can implement it by following the steps in the following gists.
✨Note: Some dependencies below will not be implemented when you create a new project. You can add these dependencies to your project if needed.
When we create your new project as an Empty Compose Activity, some different things will meet us. Considering this situation, let’s get to know new concepts and start to learn Jetpack Compose development in depth.
ComponentActivity
First, our MainActivity.kt file will greet us like this. The first thing that stands out here is that our MainActivity class is inherited from the Component Activity class. To explain this situation; let’s say we inherit the MainActivity class from the AppCompatActivity class, nothing would change. Because AppCompatActivity class is inherited from FragmentActivity class, FragmentActivity class is inherited from Component Activity class. This state of abstraction wouldn’t have caused any problems either. So let’s see here when to inherit from Component Activity and inherit from AppCompatActivity class. The ComponentActivity class will be enough all your needs if your project will only use Jetpack Compose. Let’s say if your project needs AppCompat apis you will need to inherit from AppCompatActivity. In case you will use these APIs; An example is the case where we use AndroidView when you call viewbased ui from within your compose project.
🔶Footnote: We can write view based UI code from within Jetpack Compose code. In the same way, we can create ui by writing compose code in view based ui. We use AndroidView when adding view based ui to the compose project. In a scenario where you will add MapView or BannerView to your Compose project, we have to use it this way since these views do not have integrated compose yet (because they are coded with view based design).
👁🗨You can also examine the interoperability events between compose and view based ui in depth by reviewing this link.
SetContent Method
A second case is the setContent method. It is written as an extension function of ComponentActivty and expects a composable function as the last parameter. The composable function here specifies the functions marked with the @Composable annotation (We’ll get into the details below). In the traditional view based design system, we were making the layouts visible on the screen by inflating. With the same logic, you can code the layouts that will appear on the screen in the setContent method. In other words, we can say that we are writing the code of the UI elements to be displayed on the screen in the setContent method.
Composable Function
Another situation is when we see functions marked with @Composable. In Jetpack Compose, we use composable functions to draw something on the screen. So, if we are going to draw a UI such as any text, image, button ..etc on the screen, all of them must be a composable function. Likewise, you can consider a layout that includes these components.
What we need to know about compsable functions;
🔶 All Composable functions must have this annotation; this annotation informs the Compose compiler that this function is intended to convert data into UI.
🔶 Composable functions can take parameters like normal functions. Thus, it allows the application logic to be defined in the ui. In the above attachment, we see that the Greeting function takes the name parameter. Here, you can easily apply your UI logic by using the values from the parameters in a declarative way. As an example, we can set the text color according to a boolean increase parameter, as can be seen in the following gist.
🔶 They do not return any value. The functions do not need to return a value, as they take care of creating the UI.
🔶 You need to call the composable functions from within the composable functions. This is similar to the logic of calling suspend functions in coroutines. if we consider the Greeting function in the attachment above, the Text function; A composable function (like Textview) that allows us to display text on the screen from a library we added. We call this function from another composable function, the Greeting function. If you call it from within a normal function, you will get the following errors.
🔶 It is recommended to use PascalCase as the naming convention. Normally, when naming functions, it is correct to write them in camelCase style. But since Composable functions specify ui, it would be more correct to use PascalCase style. We see that the Greeting function is also coded with PascalCase style.
@Preview Annotation
Let’s come to the DefaultPreview function marked with @Preview annotation, which is another different case. If you notice, we have written the compose codes that we will show on the screen in setContent in the same way. The reason we do this here is how we can visually see the output of the code we wrote while designing the xml layout, so the composable functions we create with the @Preview annotation are also visually observable. You can create more than one of them. It will be time-saving and beneficial for us to see different views at the same time. For example, creating previews for different devices or scenarios where we see dark mode and light mode view at the same time and coding can be considered.
You can further customize the view by taking some parameters from the @Preview annotated functions you create. If it is necessary to explain certain parameters that you see in the attachment above;
🔶 You can filter the previews that you have given the same group name with the group parameter.
🔶 You can set its width and height using the widthDp and heightDp parameters.
🔶 You can set the background to be invisible with the showBackground parameter. You can also set the color of the background with the backgroundColor parameter.
🔶 With the uiMode parameter, you can adjust your view according to various modes (such as Dark and Light Mode).
🔶 With the showSystemUi parameter, you can set whether the preview can be seen on a device or not. You can also specify this device with the device parameter. (Example: Pixel3, PixelC .. etc.)
👁🗨 You can reach more detailed information with Preview from this link. You can also review the different preview features that I did not mention in this article and the tooling topics that we did not go into in depth from the link.
Theme
Finally, the striking situation here is that the ui codes written in the setContent method are written in the NewComposeProjectTheme composable function. NewComposeProjectTheme naming is automatically created according to your project name when you create a new project. Since I opened the name of the project I created as NewComposeProject, this naming appeared. (Project name + Theme).
With NewComposeProjectTheme, we can style our composable functions by adjusting the theme settings.
Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. The Material Design components (buttons, cards, switches, and so on) are built on top of Material Theming, which is a systematic way to customize Material Design to better reflect your product’s brand. A Material Theme contains color, typography and shape attributes. When you customize these attributes, your changes are automatically reflected in the components you use to build your app.
It is enough to know this much information about theming for now. In the third article of our series, which will be our next article, we will focus on this issue in depth and learn it down to the last detail.
Conclusion
With this article, we created a new compose project and took a look at the concepts that came with Jetpack Compose and changed compared to the old one. Through these concepts, we learned the basic and important concepts of Jetpack Compose in detail. I highly recommend that you review the links I have mentioned in the article. In the content of the links, there are also different topics that we did not mention in this article and will not go into details. See you in the next article in the series. 👋👋
