How to Create Jetpack Compose project with Android studio

Last updated Jul 25, 2021

In this Android jetpack compose tutorial we will learn how to setup android studio to create Jetpack Compose proejct. To work with jetpack compose we need to download supported android studio. Download Android studio Arctic Fox. Extract downloaded zip file and run android studio.

 

Download Source code

 

Open Android studio and select new Project and select Empty Compose Activity and press next

 

Android studio JetpackCompose project

 

 

Now file required fields like Project Name, Project location, Minimum SDK version Package Name and press finish

 

Create Jetpack Compose Android Project

 

 

Android Compose Project will contains below folder structure

 

Android studio Create Jetpack Compose Project

 

And by default it will generate below code on your MainActivity.kt

package com.example.jetpackcomposeintro

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.jetpackcomposeintro.ui.theme.JetPackComposeIntroTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetPackComposeIntroTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetPackComposeIntroTheme {
        Greeting("Android")
    }
}

 

To show Preview screen on Android studio we need to write@Preview and @Composable annotations to the function

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetPackComposeIntroTheme {
        Greeting("Android")
    }
}

 

Let's run the application

 

Android Jetpack Compose Project with Android studio Preview

 

Conclusion: In this Android Jetpack Compose Tutorial, we learned how to create an Android project with Jetpack Compose.

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1924 Views