How to Build Your First Android APK App Using Android Studio?

Are you planning to build your first Android mobile app? 

If you’re unsure where to begin, Android Studio is the official tool for Android development. It’s beginner-friendly, especially when you get the hang of it. 

This guide will take you through the basics of installing Android Studio, setting up your project, and creating a simple Android add to get you started. 

You will require no advanced coding skills – just curiosity and patience. 

Let’s begin. 

So, before we start, install Android Studio on your computer. You will first need to check whether your computer supports the minimum system requirements for installing Android Studio. You can find this information usually at the bottom of the page from where you install Android Studio. If you need more detailed instructions on how to set up Android Studio, you can refer to codelab at Android Developer Studio and understand its installation. 

What is the Codelab? 

Codelab is where you create your first Android app. 

You start with a project template that is offered to you by Android Studio. In fact, you can customize this template by using programming languages such as Kotlin and Jetpack Compose. 

We will try to meet the Android Studio as much as possible and attach the necessary screenshots from the codelab. The UI in the screenshots can be a bit different because of UI changes, so it’s fine if your Android Studio screens appear slightly different than our screenshot.

How to Start? 

You will require basic knowledge of Kotlin. 

You will also be required to install and configure the latest version of Android Studio. 

The objective is to develop an Android app which lets you customize your introduction. 

Create an Android App Project Using the Template 

To start with your project in Android Studio, click on the Empty Activity option from the project template. The templates are available for your developers in the Android Studio. 

Double-click the Android Studio icon to start using Android Studio on the desktop. You will automatically be directed to the welcome screen titled “Welcome to Android Studio.” 

Click “New Project” to select a template from the list. 

Image Source 

The list of templates will appear as follows:

Image Source 

A project template in Android Studio is a blueprint for creating a specific type of app. 

Templates provide you with the initial structure to base your app. The template you choose offers the starter code for the app, so you can continue using it based on your requirements. 

• Select the “Phone and Tablet” option if it’s not already selected.
• Choose the “Empty Activity” template. This is perfect for starting a simple project with just one screen—it even comes preloaded with the message “Hello Android!”.
• Click Next to continue.
• You’ll now see the New Project setup screen. Here, you can configure the basic settings for your app.

In the Name field, enter “Greeting Card” as the name of your project.

Leave the Package name as it is—com.example.greetingcard. This defines how your files will be organized.

Keep the Save location unchanged. Just note the folder path so you can easily find your project later.

In the Minimum SDK dropdown, select API 24: Android 7.0 (Nougat). This sets the lowest version of Android your app will support.

Image Source

Now, click Finish. 

It will take some time while the Android Studio is set up. You can track the progress through a progress bar, and you will see a message that Android Studio configures your project. 

As soon as it loads, you will see a What’s New pane with updates on new features in Android Studio. Here’s a sample screenshot of what this “What’s New” option will appear like: 

Image Source

On the top right corner of the Android Studio screen, you will find the Split option to view both code and design. You can click the “Code” to view code only or “Design” to view design. 

As soon as you press the “Split” option, your screen will split into three areas: 

Image Source

Project view: Displays all the files and folders in your project. It helps you navigate through your code, resources, and configuration files.

Code view: This is where you write and edit the actual code for your app.

Design view: This lets you preview your app’s layout and visual elements as you build it.

Within the Design view, you will see a blank pane with a certain text appearing on it. 

Image Source

Simply click on the “Build & Refresh” option. 

You will automatically see a preview appear with a text box claiming, “Hello, Android!” 

If you want to explore the project files, here’s what you need to do: 

• In Android Studio, click on the Project tab to view your project’s files and folders.
• You’ll see the package name com.example.greetingcard—this is where your code lives.
• A package is just a folder that organizes your code.
• Android Studio structures your project using these packages.
• Select Android from the drop-down menu in the Project tab for a cleaner view if needed.

Image Source

The above is the default project view in Android Studio. 

It’s designed to help you access the files you’ll be working with. You can open the same project in a file browser like Finder or Windows Explorer; the folder structure will look different.

Start with the “Project Source Files” from the drop-down menu.

Browse the files like you would from any file browser of your choice. 

Image Source

Now that you know where the project’s source code is located, it’s time to start designing the code for your Greeting Card app.

Open the MainActivity.kt file in Code view.

You’ll see some auto-generated functions—notably, onCreate() and setContent(). These are the starting points of your app’s behavior and layout.

Code Block:

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

Now, two predominant functions are available in the code snippet from Kotlin above. 

The onCreate()  function appears as the entry point to the Android app and calls up other functions to build a seamless user interface. In Kotlin programs, the function main() is the initial point filling the role. 

The setContent() function within the onCreate() function defines the layout using composable functions. Functions that are marked as @Composable annotation explain the Kotlin compiler. 

It’s used by Jetpack Compose to generate UI. 

Now, we will check the Greeting() function. It’s also a composable function; however, it receives input and displays output on the screen. 

[Code Block]

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

Note how @composable appears above the code snippet. It indicates the following code block is a composable function dependent on a specific input to display an output on the screen. 

To learn more about Kotlin’s functions, you can refer to Kotlin’s Function official doc. 

As per the code above, the Greeting() function takes in a name and displays Hello to the person. 

We will update the Greeting() function to introduce ourselves instead of saying “Hello!”:

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

Your Android will automatically update the preview.

Now, this works well. You have changed the text, but it introduces you as Android. 

And you’re probably not Android. You need to personalize the message to get introduced with your name on the screen. In order to achieve that, you need to add a cool feature like GreetingPreview() function, which will let you see what your composable will appear to be without proceeding with the complete app. You can enable preview by annotating @Composable with @Preview. The following annotation will allow Android Studio to see the file within the design view. The @Preview annotation will recall a parameter called showBackground. 

If showBackground is set to true, it will add a background to your composable preview. 

Now, update the GreetingPreview() function with your name and voila! 

Your name will appear on your personalized greeting card. 

Here’s the Kotlin code: 

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Ashad")
    }
}

We have finally got the introduction text, but it’s not leaving quite the impact. 

You can also change the background color by choosing a different color in the introduction. 

You can also surround the text with a Surface. 

To surround it with Surface, highlight the line of text and press (Alt+Enter for Windows or Option+Enter on Mac). Now, choose “Surround with widget” and continue. 

Image Source

You should select the “Surround with Container” option from the options. 

Image Source

By default, the container option that appears will give you Box, but you can eventually change this to another container type, which will learn about Box layout later in the course. 

Image Source

You replace the Box option with the type Surface() instead. 

Within the Surface() option, you can add a Color parameter and set it to Color option. 

By default, the Color is set to Red. 

You can also change the background color by scrolling to the top. 

Press the three buttons and add the following statement at the bottom of the list of imports. 

import androidx.compose.ui.graphics.Color

Here’s the complete list of imports that will appear like this. 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
import androidx.compose.ui.graphics.Color

The best way to keep these imports organized is to arrange them alphabetically and remove the unnecessary ones. You can press Help on the top toolbar and type in Optimize Import. 

You can also open the Optimize Imports directly from the menu: Just type in Code > Optimize Imports. You can always use the first option if you can’t recall where it is. 

The entire list of imports will automatically get arranged.

The same list of imports mentioned above will now be organized as: 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme

These are just a few cool features you can only find in Android Studio. 

In our case, we want to specify a color, “Cyan,” for the background. 

Image Source

Here’s the code: 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
   Surface(color = Color.Cyan) {
       Text(
           text = "Hi, my name is $name!",
           modifier = modifier
       )
   }
}

While setting the background color is one thing, adding some space (padding) around the text is another. You need to add a “Modifier,” which you can use to augment or decorate a composable. A standard modifier used for adding space around an element is padding, which you can implement using the Modifier.padding() function. 

You can add padding to the modifier with a size of 24. Dp.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier.padding(24.dp)
        )
    }
}

Also, add the following imports to your import statement section. 

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

Now, that’s a solid achievement. 

Feel free to experiment by changing the text, adjusting colors, or adding new elements to make it your own. While simple apps like this are easy to create, building something more advanced requires more profound expertise. 

At Branex, we specialize in building high-performance and feature-rich Android applications. 

Looking to build a mobile app from scratch? We are here to help every step of the way.

Disclaimer: All information and images referenced in this article are sourced from the official Android Developers website. This content is shared strictly for educational and learning purposes only.