Creating your first Android app

In this session, you create an Android app with the Empty Activity project template
provided by Android Studio.

To create a project in Android Studio:

1. Double click the Android Studio icon to launch Android Studio.

2. In the Welcome to Android Studio dialog, click New Project.

3. The New Project window opens with a list of templates provided by Android Studio.
In Android Studio, a project template is an Android project that provides the blueprint for a
certain type of app. Templates create the structure of the project and the files needed for
Android Studio to build your project. The template that you choose provides starter code to
get you going faster.

4. Make sure the Phone and Tablet tab is selected.

5. Click the Empty Activity template to select it as the template for your project.
The Empty Activity template is the template to create a simple project that you can use
to build a Compose app. It has a single screen and displays the text "Hello Android!".
6. Click Next. The New Project dialog opens. This has some fields to configure your
project.
7. Configure your project as follows:

The Name field is used to enter the name of your project, for this codelab type
"Greeting Card".

Leave the Package name field as is. This is how your files will be organized in the file
structure. In this case, the package name will be com.example.greetingcard.

Leave the Save location field as is. It contains the location where all the files related to
your project are saved. Take a note of where that is on your computer so that you can
find your files.

Select API 24: Android 7.0 (Nougat) from the menu in the Minimum SDK field. Minimum
SDK indicates the minimum version of Android that your app can run on.

2
 Click Finish. This may take a while - this is a great time to get a cup of tea! While Android Studio
is setting up, a progress bar and message indicates whether Android Studio is still setting up
your project.

8. You may see a What's New pane which contains updates on new features in Android Studio.
Close it for now.
9. Click Split on the top right of Android Studio, this allows you to view both code and design. You
can also click Code to view code only or click Design to view design only.

After pressing Split you should see three areas:

 The Project view (1) shows the files and folders of your project
 The Code view (2) is where you edit code
 The Design view (3) is where you preview what your app looks like

In the Design view, you may see a blank pane with this text:

3
10. Click Build & Refresh. It may take a while to build but when it is done the preview shows a
text box that says "Hello Android!". Empty Compose activity contains all the code necessary
to create this app.

Find Project Files

In this section you will continue to explore Android Studio by becoming familiar with the file
structure.

1. In Android Studio, take a look at the Project tab. The Project tab shows the files and
folders of your project. When you were setting up your project the package name
was com.example.greetingcard. You can see that package right here in the Project tab. A
package is basically a folder where code is located. Android Studio organizes the project
in a directory structure made up of a set of packages.
2. If necessary, select Android from the drop-down menu in the Project tab.

This is the standard view and organization of files that you use. It is useful when you write
code for your project because you can easily access the files you will be working on in your
app. However, if you look at the files in a file browser, such as Finder or Windows Explorer,
the file hierarchy is organized very differently.

3. Select Project Source Files from the drop-down menu. You can now browse the files in the
same way as in any file browser.

4
Select Android again to switch back to the previous view. You use the Android view for this
course. If your file structure ever looks strange, check to make sure you are still
in Android view.

Update the text

Now that you have gotten to know Android Studio, it is time to start making your greeting
card!

Look at the Code view of the MainActivity.kt file. Notice there are some automatically
generated functions in this code, specifically the onCreate() and the setContent() functions.

The onCreate() function is the entry point to this Android app and calls other functions to
build the user interface. In Kotlin programs, the main() function is the entry point/starting
point of execution. In Android apps, the onCreate() function fills that role.

The setContent() function within the onCreate() function is used to define your layout
through composable functions. All functions marked with the @Composable annotation can
be called from the setContent() function or from other Composable functions. The
annotation tells the Kotlin compiler that this function is used by Jetpack Compose to
generate the UI.

5
Next, look at the Greeting() function. The Greeting() function is a Composable function,
notice the @Composable annotation above it. This Composable function takes some input
and generates what's shown on the screen.

You have learned functions before but there are a few differences with composable functions.

1. You add the @Composable annotation before the function.

2. @Composable function names are capitalized.
3. @Composable functions cannot return anything.

Right now the Greeting() function takes in a name and displays Hello to that person.

Update the Greeting() function to introduce yourself instead of saying "Hello":

Android should automatically update the preview.

6
Great! You changed the text, but it introduces you as Android, which is probably not your
name. Next, you will personalize it to introduce you with your name!

The GreetingPreview() function is a cool feature that lets you see what your composable looks
like without having to build your entire app. To enable a preview of a composable, annotate
with @Composable and @Preview. The @Preview annotation tells Android Studio that this
composable should be shown in the design view of this file.

As you can see, the @Preview annotation takes in a parameter called showBackground.
If showBackground is set to true, it will add a background to your composable preview.

Since Android Studio by default uses a light theme for the editor, it can be hard to see the
difference between showBackground = true and showBackground = false. However, this is an
example of what the difference looks like. Notice the white background on the image set
to true.

Update the GreetingPreview() function with your name. Then rebuild and check out your
personalized greeting card!

Change the background color

Now you have the introduction text, but it is a little boring! In this section, you learn to
change the background color.

To set a different background color for your introduction, you will need to surround your
text with a Surface. A Surface is a container that represents a section of UI where you can
alter the appearance, such as the background color or border.

1) To surround the text with a Surface, highlight the line of text, press (Alt+Enter for
Windows or Option+Enter on Mac), and then select Surround with widget.

7
2) Choose Surround with Container.

The default container it will give you is Box, but you can change this to another
container type. You will learn about Box layout later in the course.

3) Delete Box and type Surface() instead.

4) To the Surface container add a color parameter, set it to Color.

8
 5) When you type Color you may notice that it is red, which means Android Studio is
not able to resolve this. To solve this scroll to the top of the file where it says import
and press the three buttons.

6) Add this statement to the bottom of the list of imports.

7) In your code, the best practice is to keep your imports listed alphabetically and remove
unused imports. Go to the Code menu and then click on Optimize Imports.

The full list of imports will look similar to this.

8) Notice the updated preview.

Add Padding
9
Now your text has a background color, next you will add some space (padding) around the
text.

A Modifier is used to augment or decorate a composable. One modifier you can use is
the padding modifier, which adds space around the element (in this case, adding space
around the text). This is accomplished by using the Modifier.padding() function.

Every composable should have an optional parameter of the type Modifier. This should be
the first optional parameter.

Add a padding to the modifier with a size of 24.dp. Make sure to use Optimize
Imports to alphabetize the new imports.

10