Blog Infos
Author
Published
Topics
Published

Recently I took part in Android Learn and Inspire Series and there I came across the Pathways the Google Relations team has developed to understand Jetpack Compose better. I went through them and here I am sharing my learnings of the Jetpack Compose Concepts.

This is the first part of the 2 part series on Jetpack Compose Basics.

  1. Jetpack Compose Basics — Part 1
  2. Jetpack Compose Basics — Part 2 (Design Code Samples)

In this blog, I will try to address the first few questions that come to our mind when we hear about Compose which will build the fundamentals for the implementation.

What is Jetpack Compose?

Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. In simple terms, Compose means to write or create. Using Jetpack Compose, we can write our UI designs by calling some functions in Kotlin. It focuses on what and not how.

Benefits of Jetpack Compose
  • It is written in Kotlin which makes it easier for new developers to start with Android development as they have to learn a single language to get started. The application codebase and its design both now can be written in Kotlin. Along with that, it takes all the benefits that Kotlin brings.
  • It is declarative which means it lets you describe the UI design using a set of functions. With Compose, you don’t have to worry about the previous state of the UI, you just have to declare how your new state should look like.
  • Compose enables the reusability of the UI code. It lets you build UI as a composition of multiple small blocks that can be reused in multiple places according to the use case.
  • It is compatible with your existing codebase.
  • It improves the size of the app and the time it takes to build the app.
Why Compose?

Compose addresses coupling issue that exists in the UI development with XML. When we initialize our views written in XML in the code written in Java/Kotlin, it generates the possibility of Null Reference errors and makes it difficult to maintain. Jetpack Compose tries to minimize the coupling in the application.

Some Jetpack Compose Components

setContent() — This function is used to define the layout through composable functions within the onCreate() function in the code.

Composable — This function is represented using the annotation — @Composable. This is used to define the UI of the app. It takes data and emits UI elements. The functions marked with the @Composable annotation can be called from the setContent() function or from other Composable functions.

  • @Composable function names are capitalized(Pascal Case).
  • You add the @Composable annotation before the function.
  • @Composable functions can’t return anything.
  • Compose function name must be a noun. It may be prefixed by descriptive adjectives. Example — DoneButton(), RoundIcon()

Job Offers

Job Offers


    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Kotlin Multiplatform Mobile Developer

    Touchlab
    Remote
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Branching out to Jetpack Compose

As one of the most widely used social media platforms, Twitter is always hunting for ways to better connect its users. In early 2021 the Client UI team at Twitter began the task of integrating…
Watch Video

Branching out to Jetpack Compose

Nacho López & Chris Banes
Staff Software Engineer
Twitter

Branching out to Jetpack Compose

Nacho López & Chr ...
Staff Software Engin ...
Twitter

Branching out to Jetpack Compose

Nacho López & C ...
Staff Software Engineer
Twitter

Jobs

Preview — This function is represented using the annotation — @Preview. This helps you see the preview of the composable function that you have written in the Studio without installing the app to the device. The preview function is also a composable function and so must follow the rules of the composable functions.

Row — The Row() function helps you arrange all the child elements in a horizontal arrangement.

Column — The Column() function helps you arrange all the child elements in a vertical arrangement.

Box — The Box() function helps you arrange the child elements above one another in an overlapping arrangement.

Modifier — A Modifier is used to augment or decorate your composable.

This article was originally published on proandroiddev.com on October 23, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

Menu