Learning Android Development

Setup first Jetpack Compose App from scratch

Step by step guide to follow before getting to Android Jetpack Compose Lesson 1

Elye
Elye
Oct 7 · 4 min read
Image for post
Image for post
Photo by Glen Carrie on Unsplash

Both SwiftUI and Jetpack Compose is getting a lot of attention today. In iOS, getting to the SwiftUI tutorial is literally seamless. A step by step guide. However, getting on Android Lesson 1 of Jetpack Compose will result in missing dependencies error.

There’s a separate setup guide page , but relatively obscured. Even after setting up, the question remain like should I create a project with Activity or not?

So here, I’m providing a step-by-step guide to ensure that it can easily follow through that one can get on to the Android Lesson 1 of Jetpack Compose done.

1. Install Android Studio 4.2 (or later)

At the time of writing, the latest version is Android Studio 4.2 Canary 13. You can install it from https://developer.android.com/studio/preview. Just install and setup as per its instruction.

2. Create an Empty Activity Project

File →New Project →select Empty Activity, then Finish create it as per all the default settings.

Image for post
Image for post

Note: We’ll not need the activity_main.xml layout, but for now just create it, so that an activity will be readily available for use.

3. Setup the dependencies in build.gradle

After the project has been created, on the project panel (left side of the screen), expand the Gradle Scripts, and double-click to open the build.gradle of the application.

Image for post
Image for post

Then search for kotlinOptions in the android scope.

kotlinOptions {
jvmTarget = '1.8'
}

And modified it by adding the below bold text.

kotlinOptions {
jvmTarget = '1.8'
useIR = true
}
buildFeatures {
compose true

}

Lastly add the needed dependencies (here I add those needed for Lesson 1 only, you can add more per the setup guide page) as per the bolded text below in the dependencies scope of the file.

dependencies {

implementation "org.jetbrains.kotlin:kotlin-
stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'
implementation 'androidx.compose.foundation:foundation:1.0.0-
alpha04'
implementation 'androidx.ui:ui-tooling:1.0.0-alpha04'

implementation
'androidx.constraintlayout:constraintlayout:2.0.1'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-
core:3.3.0'
}

After doing that, you’ll see a blue bar on top of the file, just click the Sync Now button, for it to download the newly added dependencies.

Image for post
Image for post

Note: you can try remove some other dependencies that you might not need. I’m showing the default of what Android Studio 4.2 canary 13 provide out of the box for Empty Activity project

4. Start coding your Jetpack Compose :)

Finally, you can now code whatever provided on Android Lesson 1 of Jetpack Compose.

But before that, where is the file to change? Again, locate the file in the Project Panel (left side of the screen), locate for the MainActivity file as shown below. Double click to open it.

Image for post
Image for post

Once open, you see the content below

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}

You can just remove the setContentView(R.layout.activity_main) and then get on to follow whatever is shown on Android Lesson 1 of Jetpack Compose.

Upon completing Lesson 1, you’ll get the below code

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
PreviewGreeting()
}
}

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

@Preview
@Composable
fun PreviewGreeting() {
Greeting("Android Good")
}

}

Together with the Preview, it looks like below. If you don’t see the Preview, just click on the Split button on the top-right as shown in the diagram.

Image for post
Image for post

Happy exploring Jetpack Compose!!

By the way, if like a simple animation project using Jetpack Compose, check out the below

Mobile App Development Publication

Sharing Mobile App Development and Learning

Elye

Written by

Elye

Passionate about learning, and sharing mobile development and others https://twitter.com/elye_project https://www.facebook.com/elye.proj

Mobile App Development Publication

Sharing iOS, Android and relevant Mobile App Development Technology and Learning

Elye

Written by

Elye

Passionate about learning, and sharing mobile development and others https://twitter.com/elye_project https://www.facebook.com/elye.proj

Mobile App Development Publication

Sharing iOS, Android and relevant Mobile App Development Technology and Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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