Get Started with Android Development with Jetpack Compose

Phone is an important part of our life. As of August 2022-23, Android has a 70.77% market share and there is a large shortage of skilled Android developers. So why not we should start our Android development journey? In this article, you will learn what is Jetpack Compose and how can kickstart our Android Development journey.

Traditionally, Android app development involved XML-based layout files and the use of the Java or Kotlin programming languages to define the app's UI. While this approach has served developers well for years, it often resulted in verbose and complex code. In other hand Jetpack Compose offered interactive UI you can build dynamic and interactive UIs using a concise and intuitive syntax.

What is Jetpack Compose

Jetpack Compose is a modern native UI toolkit for Android Development. It accelerates Android Development with less code. Kotlin allows you to create domain-specific languages (DSLs). DSLs make it easier to build complex hierarchical data structures. Jetpack Compose uses DSLs for some APIs, such as LazyRow and LazyColumn.

Why Jetpack Compose

a. Written in Kotlin: 

Kotlin is a multiplatform programming language based on Java. On 7 May 2019, Google announced that Kotlin is the official programming language.

b. Live previews:

Jetpack Compose on Android Studio provides live preview features so that developers can interact with UI without running on an Android Device or Emulator.

c. Reusable UI components:

You can create your custom component as a function. So that the code base becomes smaller and the Components become reusable.

d. Easy Animation:

Compose provides convenient APIs that allow you to solve many common animation use cases. This section demonstrates how you can animate common properties of a composable.

e. Multiplatform:

Kotlin Multiplatform enables sharing Kotlin code across different platforms. Kotlin Multiplatform was developed by JetBrains, and using it to target mobile platforms is currently in beta. Also, Jetpack Compose, being a multiplatform UI framework, finds itself in competition with other prominent cross-platform development tools such as React Native and Flutter.

Begin with Jetpack Compose

Jetpack Compose utilizes the Kotlin programming language, making it essential to grasp the fundamentals of Kotlin syntax. Here's an overview of the key aspects you should familiarize yourself with:

Basics of the Kotlin programming language

• Conditional statements
• Functional programming
• Collections
• Object-oriented programming concepts
• Data types
• Comparison and logical operators
• Loops
• Functions
• Lambdas

By focusing on these aspects, you can gradually build a strong foundation in Kotlin. The best way to learn is by applying these concepts in practical projects. Creating apps or small projects that leverage these Kotlin features will help reinforce your understanding and make you a proficient Kotlin developer.

Jargons or Terminology used in Android

Activity:  An activity represents a single screen with a user interface just like a window or frame of Java. For example, an email app might have one activity that shows a list of emails, and another to compose an email.

Res directory: The res folder in Android Studio contains all the resources required for an Android project, such as images, layouts, and values.

Gradle Script: Gradle Scripts is a folder in an Android project that contains the build configuration files for the project. There contains build configuration including build tools and other settings.

Setup Android Studio

Before you begin, make sure you have the following prerequisites in place:

Operating System: Android Studio is available for Windows, macOS, and Linux. Ensure you are running a compatible operating system.

Java Development Kit (JDK): Android Studio requires a JDK. Download and install the latest version of JDK compatible with your OS from the official Oracle website.

RAM: A minimum of 8GB of RAM is recommended for smooth performance.

Disk Space: Ensure you have at least 4GB of free disk space for Android Studio, though more space is better for app development.

Follow the below steps to create new project.

Step 1: Download Android Studio Click "Download Android Studio" and choose your OS.

Step 2: Launch Android Studio after installation.

Step 4: Set Up Emulators(Can you use your Android Phone as an Emulator. To Run Open the Settings app, select Developer options, and then enable USB debugging)

Step 5: Configure JDK Location.

Step 6: Start a New Project

Step 7: Select Empty Activity, then Click Next.

Step 8: Write Custom Project Name.

First View on Android Studio

Android Studio already opened the MainActivity.kt file. You will see a class named MainActivity that extends ComponentActivity.

Basic Code:

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

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

If you run this template code UI will look like this

You will see @Composable annotation which adds the Component functionality. And remember the Composable function must be outside of class.

To add more components like Custom Button, you can write

@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier.defaultMinSize(),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Blue),
        contentPadding = PaddingValues(16.dp)
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.bodyMedium,
            color = Color.White
        )
    }
}

CustomButton function passes two parameters immutable text and an onClick function.

To check the preview of CustomButton you can add @Preview annotation at the top of the function. Remember, the @Preview annotation function does not have a parameter.

Example of Preview:

@Preview
@Composable
fun CustomButtonPreview() {
    CustomButton(
        text = "Click Here",
        onClick = {}
    )
}

The Preview will look like this:

To add more functionality we have to call more modifier functions or add inside a Box.

In the example of code, there are some important Keywords:

Modifier: A modifier is a UI object that is used to modify the layout and behavior of that component. Modifier can change font, size, position, and other attributes.

Surface: Surface is a Jetpack Component that provides you with Material Design in the app. Surface automatically adjusts light/dark themes in apps. 

Button: This is a standard Compose Button component being used inside the CustomButton composable.

Text: This is a Compose Text component used as the content of the button. It displays the text passed as the text parameter.

Project Overview

In the project panel, you will see some important files

1.  AndroidManifest.xml: The AndroidManifest.xml file is an XML file that contains metadata about an Android app. It describes the app's content, package name, and how its components are put together. The manifest file is located in the root directory of the APK. 

2.  Build.gradle.kts: The build.gradle file is a script that contains the build configurations for an Android app. It includes the dependencies, build tools, and other settings. To add more functionality you can include more dependencies. We’ll talk about this in future articles.

3.  Settings.gradle.kts: This settings file defines project-level repository settings and informs Gradle which modules to include when building your app.

Conclusion

In this article, you have learnt basics of Andriod and how to get started with Android project with Jetpack Compose.