Starting with Jetpack compose — Setting up Android Studio — Beginner Steps
I started to write my first article in medium.com since I found it very difficult to find any good guide that explains navigation and its components while implementing Navigation component in Jetpack compose. But as I started with the articles, I realized that I was assuming that all the readers know how to use Android Studio and maybe that assumption was incorrect. So I thought, though setting Android Studio is simple and easy, I should still create a Step by Step guide and walkthrough that will help a new interested Android developer to setup their machine.
Jetpack Compose is Android’s modern toolkit for simplifying and accelerating Android UI development. Jetpack reduces code and provides powerful tools using intuitive Kotlin APIs and built-in support for Material Design, Dark theme, animations, and more.
Jetpack compose makes use of Kotlin features such as coroutines, and many methods that are supported only by a Kotlin compiler. It is not possible to code Jetpack components in Java and most probably not future plans to support Java for Jetpack compose. So to develop an app in Android Studio using Jetpack compose, you will need to learn or know a little but of Kotlin programming language.
But, I am also a firm believer that a programming language is never an issue for a programmer. All that is required is common sense and logic. So it does not matter if your know Kotlin or not. All you need is the will to learn and you’ll be able to start working in Jetpack compose and Kotlin. Start Learning Kotlin for Jetpack Compose HERE.
Following are the steps start with Jetpack Compose & Android Studio
1. Download and install Android Studio
The environment and tool to develop native Android app is provided in the Android Studio. It is an IDE (Integrated Development Environment) that includes the required software development kits, code editor, UI design visualization, phone emulators and debugging capability. The JDK that is required for comes packaged in the Andriod studio installer.
You can download and install the Android Studio from Android Developer site.
2. Create a New Project using Jetpack
Start the Android Studio application and you will be greeted with a Welcome to Android Studio screen. Since we are learning how to create a new application click on Create a New Project.
Android studio provides some prebuilt templates (Activity) that is a really good starting point for developing applications. Select the Empty Compose Activity from the options and click Next.
An activity is the entry point for an android application in its interaction with the user. The main activity will be the first screen to appear when a user launches the application. The Empty Compose Activity that we selected above will be the Main Activity for our application.
As a final step before creating the project, you will have to provide the Name of the project. Here I provide the name as Navigation Guide. Lets not fuss about the package name at this point. You can also notice here that the Language is disabled and Kotlin is preselected. This is because only Kotlin is supported as a programming language for Jetpack Compose Activity. The last option is the Minimum SDK and this mentions the minimum Android version in which our application needs to work on. You can select API 21 a.k.a. Android Lollipop as the Minimum SDK.
3. Explore the Android Studio UI
The Android Studio by default opens the MainActivity.kt. It also generates broiler plate code that is displays ‘Hello Andriod’. The basic building block on a UI in Compose is the Composable function.
We can see that there are two functions that have the @Composableannotation. These functions let you define your app’s UI programmatically by describing how it should look rather than focusing on the process of the UI’s construction. To create a composable function, just add the @Composable annotation to the function name. The annotation is what lets the Android Studio know that its a function that displays something in the UI.
There is also one another annotation @Preview that allows us to preview the UI without running the app in an emulator. On the top right of the Android Studio, you will notice a set of buttons (Code | Split | Design). The Split option allows us to visualize the composable that is invoked in the function with the @Preview annotation.
You will need to ‘Build and Refresh’ once before the UI is visible in the design section.
Jetpack compose provides building blocks like Buttons, Texts, Images and much more, that provides easy and faster way to build a UI. In the above example we are only using the
Textcomposable.
In addition to the generated code, we will add the following code. The changes here is that we wrapped the Text composable inside of a Column composable to allow to align horizontally and vertically. As you go deeper into Jetpack compose you will learn about Row and Column composable and how the alignment and arrangement are interchangeable. We also changed the settings for the Column composable to fill the whole size of the screen and increased the size of the font to 30.sp.
@Composable
fun Greeting(name: String) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxSize()
) {
Text(text = "Hello $name!", fontSize = 30.sp)
}
}Please build and refresh once more to see the effect of the changes.
4. Running the application on the Android Emulator
To run an application on an emulator, we need to setup a device on our machine. Select the Device Manager as shown in the screenshot.
Click on Create virtual device to start creating the android device for emulation.
I select the Pixel 6 Pro since I used to own one before I upgrades to Pixel 7.
Select the Android OS version that you would like the device to run on. I had to download the Tiramisu API 33 Release. This download might take some time based on the speed of your internet.
Click Finish and complete the device setup.
Click on the Run ‘app’ or Shift+F10 to run the application on the newly setup device. You can see both the preview as well as the emulator running together. Once the emulator is running you can switch back to Code view from the options on the top right.
I hope this article was helpful and can help new interested developers to get started with Jetpack compose. I’m starting to like it and also enjoying sharing my experience and steps that I followed to start learning Android development using Jetpack compose in Kotlin.
Following are some of the stories that I have published and available to read:
More official documentation from Android Developer site :
Thanks for reading. I’m a new writer on Medium or anywhere :-). Please share your thoughts and comments. Appreciate your feedback.
