Jetpack compose layout

Android moves on next level of layout

In this article, we will discuss Jetpack compose layout.

Jetpack compose is a modern UI toolkit, It simplifies and accelerates UI development on Android.

that you don’t need to design your layout in separate class like XML,

Just keep in mind want you need to create and, then write this with your main code.

If you something familiar on flutter, then you look this “aww what a goodness, it’s an awesome”

be frankly, I am so excited after hearing that, android (native) also adapted this thing now

Now let’s start, what we needed for this to use,

source link for all of this detail is here, Android JetPack

just a quick look at this, what we will discuss in this article. all of these points in here.

  1. Which Android studio version we needed
  2. setup jetpack
  3. Design our pages with the widget (most important point)
  4. Add Jetpack Compose to an existing project
  5. How to navigate between pages.


let us start with our first point

1. Which Android studio version we needed

For the best experience developing with Jetpack Compose, you should download the latest canary version of Android Studio Preview.

2. setup jetpack

If you want to start a new project that includes support for Jetpack Compose by default, Android Studio includes new project templates to help you get started. To create a new project that includes Jetpack Compose, proceed as follows:

  1. If you’re in the Welcome to Android Studio window, click Start a new Android Studio project. If you already have an Android Studio project open, select File > New > New Project from the menu bar.
  2. In the Select, a Project Template window, select Empty Compose Activity and click Next.
  3. In the Configure your project window, do the following:
  4. Set the Name, Package Name, and Save location as you normally would.
  5. Note that, in the Language dropdown menu, Kotlin is the only available option because Jetpack Compose works only with classes written in Kotlin.
  6. In the Minimum API level dropdown menu, select API level 21 or higher.
  7. Click Finish.
  8. Verify that the project’s build.gradle the file is configured correctly, as described in Configure Gradle.

3. Design our pages with the widget

The first thing is how we design this,

means how we will start this


We have familiar with Linear layouts, relatively, coordinate, constraints, etc.

In their design, they provide in place of composable.

the composable function is used for the draw UI design.

All widgets need to placed inside the composable function.

Like as we need vertical direction items like vertically placed items,

We use the here Column.


Horizontally items placed, we use Row.

And if we need the material design we placed all widgets inside MaterialTheme.

The first and most important thing is we start this by place all this inside set content.

There is a various widget available for design also as well as there is a widget available for small things like creating space etc.

So let’s imagine there are all things available that you needed in smart, pixels perfect and interactive UI.

Now I think it’s sufficient to describe, how we will design a page using this widget.

(if you want more widget details, please ask in the comments)

(I just try to describe all things in a short way)

4. Add Jetpack Compose to an existing project

Now move on to how we deal with our old projects(because everyone use XML at this time)


Interoperability very important to adopt an old codebase, because no one wants that, we will totally swipe out our older code for new technology.

Also android knows these things, that’s why they didn’t close even java code, in this time of everyone uses kotlin.


The first is to set up this with your project,

If you want to use Jetpack Compose in an existing project, you’ll need to configure your project with the required settings and dependencies.

Make sure you’re using Kotlin 1.4.30 or newer in your project:

You need to set your app’s minimum API level to 21 or higher and enable Jetpack Compose in your app’s build.gradle file, as shown below. Also, set the version for the Kotlin compiler plugin.

Include Jetpack Compose toolkit dependencies in your app’s build.gradle file, as shown below:

You can use this with your older projects pies by pies in fragments and activities.

like this,

here is a full example, jetpack interoperability

5 . How to navigate between pages.

Now the next point is how to navigate between pages.

we design the pages, also we know how to configure with our old project.

let's start the navigation component,
go to this link,

after this copy these versions and dependencies

include this in your build.gradle

Now, let's start

first is you need to create a graph(it means to need to set action between multiple screens)

so, first right click on res.

After creating a graph file,

Let’s start to create action between there

after created all this stuff,

just set on click like this

for more detail, see the full description

I know its totally new things we all adaptable for XML design, but believe me after you will use this,you said how fantastic this is,

Thanks for reading, I added only those things that I think, it's required to define what is Jetpack compose in android

if you got something wrong? Mention it in the comments. I would love to improve.
I am Shirsh Shukla. A creative developer and a Technology lover. You can find me on Linkedin or maybe follow me on Twitter.

Have a nice day!🙂

Android Developer | Flutter Developer | Technical Blogger at medium | community member at stackoverflow | Organizer @FlutterIndore on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store