Google has introduced Jetpack compose, a modern Android UI toolkit. It speeds up and simplifies the app development process. As compared to the current view building approach, Jetpack Compose allows us to write less code, which implies fewer problems. If you're using React or Flutter before, you'll recognize many similarities.
For future Android mobile development, Google has clarified that developers should use Declarative UI development tools. This revolutionary change isn't limited to Google in
android app programming. Apple's iOS development is trending in the same approach (SwiftUI), while Google's Flutter cross-platform framework was designed with declarative UI ideas in mind from the start. Also, I explained how to create basic applications using jetpack compose in this blog.
Prerequisite
-
Android Studio Arctic Fox installed
-
Android SDK
-
Kotlin language knowledge required
-
Android Device or emulator
Create a new app with Jetpack Compose
Android Studio provides new project templates to assist you to get started if you wish to build a new project that has Jetpack Compose support by default. Create a new project file that includes Jetpack Compose:
-
Start a new Android Studio project if you're in the Welcome to Android Studio window. Select File > New > New Project from the navigation bar if you already have an Android Studio project open.
-
Select Phone & Tablet from the Template window, then select Empty Compose Activity and click Next.
-
In the New Project window, do:
-
Set the Name, Package Name, and Save location as usual.
-
Although Jetpack Compose only works with classes written in Kotlin, Kotlin is the sole choice in the Language drop-down menu.
-
In the Minimum SDK dropdown menu, select API level 21 or higher.
-
Click Finish.
-
As mentioned in Add Jetpack Compose toolkit dependencies, make sure the project's build.gradle file is configured appropriately.
You're now ready-to-use Jetpack Compose to develop an app.
Let’s start to create a basic form using Text and Button Composable within a MainActivity.kt. We will also learn how to set styles in Text and Button Composable in this blog.
In the above code, there is no call to setContentView() anymore. Rather than inflating an XML-based layout, we can use the setContent() method to construct a Compose-based UI for Activity. We may add Composable to the function provided to setContent() to build our user interface.
Let's take a look at some of the most common building components you'll need to use Jetpack Compose to create interactive apps.
Adding text
Do you even have to add some text to your app? You'll likely want to use Text Composable.
Text Composable is a Kotlin function with several optional parameters that allow you to customize the style of your text.
Adding button
The Button Composable will display a simple button in your UI.
Compose favors composition over strict inheritance, as Button shows. The Button function receives a lambda argument. The content of the Button is defined by that lambda. Our button's content is a standard text element in this example.
Adding TextField
Composable that enables users to write text through hardware or software keyboards. The structure of the TextField component of Compose UI is shown below.
OnValueChange is invoked whenever the user edits the text, with the most recent state shown by TextFieldValue. TextFieldValue saves the viewer text as well as information about the selection, cursor, and text composition.
This composable offers basic text editing capability, but no decorations like borders or hints/placeholders are included. To meet most of the requirements, a design system-based solution, such as Material FilledTextField, is usually required. When a custom implementation for a different design system is required, this composable is designed to be used.
Align elements
We need containers to enable us to arrange elements such as Text, TextField, and Button. Column are such containers you're likely to come across. The children will be placed vertically, one after the other, in a column.
After using Column containers elements will be placed vertically, and the design look like
There's a lot of interesting stuff here. First, named parameters are frequently used in Compose code. Second, we may begin creating a modifier by explicitly referencing Modifier and invoking its methods.
Padding may be added by using padding() and passing it a dimension value. We're going to use the DP extension property to convert the raw value 16 into a dimension value.
We've covered the majority of popular Composables as well as some frequent use patterns. Run the program in the emulator now.
The output will look like below:
Conclusion
Jetpack Compose is a powerful and promising contemporary UI toolkit that you should surely keep an eye on. It also can speed up the development processes and reduce the size of the applications if utilized properly. Additionally, Compose allows you to write less code, ultimately reducing the number of errors. We are experts in providing
Android mobile app development services. Contact us for more information.
For professional paid support, you may contact us at
[email protected]
.
