👨🏼💻 Jetpack Compose Tutorial Part 1
Introduction
Hi, this tutorial is based on the most basic Jetpack Compose features as a beginner. Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. The first part of this tutorial series includes integration and the first application with Jetpack Compose, rows columns and basic sizing, compose modifiers and styling text field. Let’s get started! 🥳
Tutorial
First Application with Jetpack Compose
Open a new project in android studio
Select Empty Compose Activity Template
Select save location, kotlin as language and In the Minimum API level dropdown menu, select API level 21 or higher.
As you can see there is no layout directory under resources anymore.
So this is the default activity for empty Jetpack Compose Activity.
With jetpack compose, we are trying to seperate our ui into single components to make them reusable. You can see the Composable functions below onCreate method. Greeting will be used for displaying our text on screen and DefaultPreview is also a composable function that helps us to see our application’s user interface without building the project eacht time.
So with Jetpack Compose, we could see live updates on preview as you can see :). Just select the split or design from the right top corner to see the updates live.
Now let’s see the text we want on the screen as our first application. Remove the ComposeAppTheme from our MainActivity and call the Greeting function inside setContent with the name that you want.
So your activity will look like this and after running the project you will see the result below. So this was our first application 🥳
Rows, Columns and Basic Sizing
Let’s update our activity with removing functions below and it should look like this:
If you want to print “Jetpack Compose” again but using different texts, if you just use 2 different texts ; the texts will be on the top of each other. So the code below is not the solution for us.
So we need a row or a column.
Remember that @Composable invocations can only happen from the context of a @Composable functions so you can not call this functions directly inside onCreate method of your activity.
As you can see we can also add parameters to rows and columns such as modifier, horizontal and vertical allignment, horizontal and vertical arrangement. For the columns there would be a horizontalAllignment and verticalArrangement option and for the rows there would be a horizontalArrangement and verticalAllignment option and with the modifiers you can change the size or colors of Columns and Rows and more..
For the basic sizing you can fill the view or fill some percentage of the view and also set a custom dp size of the view. So here is the output for the Column part:
And if we remove the column part, this is the output for the row part:
Compose Modifiers
Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things:
- Change the composable’s size, layout, behavior, and appearance
- Add information, like accessibility labels
- Process user input
- Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable
In this example, we set background color as magenda, set height and weight filling with a percentage, set padding and add space between texts with Spacer. The output of this code is below:
The order of modifier functions is significant. Since each function makes changes to the Modifier returned by the previous function, the sequence affects the final result. Let's see an example of this:
As you can see from the code above, after adding borders and paddings they are applied sequentially. So there is a result with nested borders below.
Lastly, let’s add an clickable modifiers to our texts and make them interactable. It comes with a click effect and we can add whatever is needed inside onClick listener. In this case I just showed some toast messages.
The result is below:
Styling Text Field
For the last section of Part 1, we will just create a text field with style. Here is the example code:
FontFamily added as SansSerif, font size is 30sp, font style is italic and bold and no decoration added here and could be added as line through or underline. See the result below:
Conclusion
The article explained about Jetpack Compose basics, first integration and the first application with Jetpack Compose, composables, rows and columns basic sizing, compose modifiers and styling text field. This article is a guide for beginner’s and there will be other parts of tutorial as a guide step by step.
I hope, you found this article helpful and if you have any comments or questions, please let me know in the comments below.
CHECK PART 2 FROM BELOW! 🎉🎉
