Building UI using Jetpack Compose in Android

Sharing is caring!

Jetpack Compose

In the android world, we use LinearLayout, Relative layout and what not to design the UI. Then we started using ConstraintLayouts to design UIs. But we still missed the trick to designing declarative UI in Android. We had a lot of different libraries to do it, but none of them had a native Android Support.

In Google IO ’19, Google launched Jetpack Compose to create declarative UI. So, basically, declarative UI means to create UI by specifying a specific set of UI elements

Note: You should be on 4.1 Canary builds of Android Studio

Step 01. Setup.

add google() to the project’s build.Gradle file.

Step 02. App’s Gradle.

Step 03. Project’s Gradle file.

Step 04. Finally, Add Project dependency.

Now, we are done setting up the project. Let’s build the UI. Till now, we use setContentView to inflate the layout from an XML file.

But in this tutorial, we are going to use Jetpack compose to design the layout file.

Step 05. In your Activity File.

Now, we set the design in setContent. Here we call a function. We use composable functions. So, as a developer let’s start with Hello World.

Step 06. Let’s discuss how to create a composable function.

to create a composable function we need to use @Composable annotation.

and call helloWorld() in setContent{}

  • Composable functions can be only called from another Composable function.

Step 07. Let’s define a container.

Here if we need to have a behavior in LinearLayout with orientation in vertical mode. Here, we use Container,

This will stack the elements in Linear layout in vertical order. In this let’s discuss with an example of buttons.

Here, we have designed two different types of button

  • ContainedButtonStyle() – this will build a button with filled colors in the material design button.
  • OutlinedButtonStyle() – this will only have an outline button with white color filled

Output.

JetPack Compose Button Example
  • we can also have TextButtonStyle() where we just have text in the button.

If we want to take the design of the Material design principle in android, we can use MaterialTheme().

Step 08. Let’s discuss how to build a list using Jetpack Compose.

Here, createListView is a composable function. and in that, we define the list items.

Now, in this, let’s discuss one by one.

  • MaterialTheme – this will define the theme of view taking material container
  • VerticalScroller – In basic term, this helps in the scrolling of the list items
  • Column – It creates a column to create and stack all the items in listview vertically. In that, we create 10items using forEachIndexed and we call createListItem index composable function to create list items specifically.

Now, createListItem looks like.

In this, we add specify padding with 8dp unit from all end using Padding and then we create a FlexRow.

  • FlexRow is like a column but in this, it stacks the elements in a horizontal orientation.
  • crossAxisAlignment here specifies the alignment of the children.
  • expanded is like weight and in that we create a Text.
  • inflexible is like wrap_content, and in this, we create a Button in each item having a click listener.

Now, let’s run the app and see the preview

Jetpack Compose Listview.

We are done creating a list in Jetpack Compose.

Miscs.

  • to create an Alert Dialog we use,

Here, onCloseRequest is like setCancelable and rest is like to fill the data.

  • To design a floating action button we use
  • To create a progress bar we use,

and.

To see the preview of the composable function, we do it using.

you can see we are using Preview annotation to check the preview of composable functions.

This is how we can work around with Jetpack Compose. To read more about it try https://developer.android.com/jetpack/compose.

Happy learning.

Thanks to Gaal Baat Team.

Let’s join us.

You may also like...

Leave a Reply

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

shares