Jetpack Compose layout in android

Updated 1 June 2021

Save

Jetpack Compose is a modern toolkit for building native Android app design. Jetpack Compose simplifies and accelerates UI development with less code. It is a powerful tool and intuitive Kotlin APIs.

In Jetpack compose, We can design any screen with the following:-

Column

Row

Box

Modifier

Scrollable Layout

We can read in detail about these layout  in the following link

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary

 

Column:- With the help of Column, we can place vertical items.

For example, We use it for making a form layout design.

We can create a new jetpack project with a new Arctic Fox android studio. Please refer to the image

Jetpack Compose layout in android :- android image
Android Studio

 

Then open Android Studio, select Empty Compose Activity

Jetpack Compose layout in android :- name filling
Adding Project
selecting Template
selecting Template

 

and Sync your project.

Then we can add an edit text field using material design. And for it, we have to add dependencies on build.gradle file.

 

main code
Main Activity Code

Composable functions

Jetpack Compose is built around composable functions. These functions allow you to define your app’s UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI’s construction. To create a composable function, just add the @Composible annotation to the function name.

 

Preview your function in Android Studio

Android studio allows you to preview your composable functions within the IDE, instead of needing to download the app to an Android device or emulator. The main restriction is, the composable function must not take any parameters. For this reason, you can’t preview the Greeting() function directly. Instead, make a second function named PreviewGreeting(), which calls Greeting with an appropriate parameter. Add the @Preview annotation before @Composable.

You can get more information about compose layout and animations of the view in details in the following link:-

https://developer.android.com/jetpack/compose/documentation

 

You can also go through a video workshop on the youtube link

 

Thanks for reading this blog. Hope you enjoy it!!

 

 

 

 

 

 

 

 

 

 

 

 

 

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home