About Jetpack Compose
Hello everyone, in my article I want to talk about Jetpack Compose. This is the new technology that I started to use and I will write here about special topics in Jetpack compose.
In Jetpack Compose;
- We don’t need to use xml for layouts anymore.
- We can very easily create all the views using Kotlin codes
- For an example, to create a recycler view, we used to have two xml files and an adapter class. We used to have a xml file for the activity or fragment. And, another xml file for the list item. Also, we needed to write a very complex adapter class. But, now we can create the same result just using a simple Kotlin class.
To create a composable function, just add the @Composable annotation to the function name.
setContent is the block where composable functions are called,
Text is composable function, too.
Composable functions can only be called from other composable functions
Jetpack Compose uses a Kotlin compiler plugin to transform these composable functions into the app’s UI elements.
@Preview : The annotation must be used on a composable function that does not take in parameters.
Get Çağla Çorak’s stories in your inbox
Join Medium for free to get updates from this writer.
Rebuild your project. The app itself doesn’t change, since the new PreviewMessageCard function isn’t called anywhere, but Android Studio adds a preview window which you can expand by clicking on the split (design/code) view. This window shows a preview of the UI elements created by composable functions marked with the @Preview annotation. To update the previews at any time, click the refresh button at the top of the preview window.
Layouts
The Column function lets you arrange elements vertically.
Add Column to the MessageCard function.
You can use Row to arrange items horizontally and Box to stack elements.
Add an image element
Enrich your message card by adding a profile picture of the sender. Use the Resource Manager to import an image from your photo library or use this one. Add a Row composable to have a well structured design and an Image composable inside it.
Configure your layout
Image is too big! So use modifiers to change the composable’s size, layout, appearance or add high-level interactions, such as making an element clickable. You can chain them to create richer composables. You’ll use some of them to improve the layout.
Material Design
- Compose is built to support Material Design principles.
You can create multiple previews in your file as separate functions, or add multiple annotations to the same function.
In my future articles, I will talk about more important topics such as mutableStateOf , remember , recomposition etc..
See you :)
