Lesson 3: Introduction to Android Studio

I – Learning Objectives:

After this lesson, you should be able to:

1. demonstrate installation of android studio in a pc or laptop;

2. introduce to the android studio environment; and
3. create a simple android app interface.

II – Discussions:

When Android first arrived in 2008, it was almost seen as a poor relation to the much
more stylish iOS Apple iPhone. But, quite quickly, android user numbers exploded. Now,
after seven major release, the annual sales of Android devices is increasing almost every
year.

Android applications are usually developed in the Java language using Android
Software Development Kit. Once developed, Android applications can be packaged easily
and sold out either through a store such as Google Play or the Amazon Appstore.

What is Android?

Android is an open source and Linux-based Operating System for mobile devices
such as smartphones and tablet computer. Android was developed by the Open Handset
Alliance, led by Google, and other companies.

What are the requirements?

List are the following requirements that you need in order for you to start
developing an android application.

1. Laptop and an Android mobile device

Windows System Requirements:
 Microsoft® Windows® 7/8/10 (64-bit)
 4 GB RAM minimum, 8 GB RAM recommended
 2 GB of available disk space minimum, 4 GB Recommended (500 MB
for IDE + 1.5 GB for Android SDK and emulator system image)
 1280 x 800 minimum screen resolution
2. Java JDK
 download link: https://www.oracle.com/java/technologies/javase-jdk15-
downloads.html
3. Android Studio
 download link: https://developer.android.com/studio

Environment Setup and Installation

Please watch this YouTube video for the complete guide of installing android studio.

Link: https://bit.ly/3419L9A
Creating a New Project

To create your new Android project, follow these steps:

1. Install the latest version of Android Studio.

2. In the Welcome to Android Studio window, click Start a new Android Studio
project.

Figure 1: Android Studio welcome screen

3. In the Select a Project Template window, select Empty Activity and click Next.

Figure 2: Android Studio select a project template screen

4. In the Configure your project window, complete the following:

 Enter "My First App" in the Name field.

 Enter "com.example.myfirstapp" in the Package name field.
 If you'd like to place the project in a different folder, change its Save location.
 Select either Java or Kotlin from the Language drop-down menu.
 Select the lowest version of Android your app will support in the Minimum
SDK field.
 If your app will require legacy library support, mark the Use legacy
android.support libraries checkbox.
 Leave the other options as they are.

Figure 3: Android Studio configure your project

5. Click Finish.
Important Files:

First, be sure the Project window is open (select View > Tool Window > Project) and
the Android view is selected from the drop-down list at the top of that window. You can
then see the following files:

app > java > com.example.myfirstapp > MainActivity

- This is the main activity. It’s the entry point of your app. When you build and run
you app, the system launches an instances of this Activity and loads its layout.

app > res > layout > activity_main.xml

- This XML file defines the layout for the activity’s user interface (UI). it contains a
TextView element with the text “Hello, World!”

app > manifest > AndroidManifest.xml

- The manifest file describes the fundamental characteristics of the app and defines
each of its components.

Gradle Scripts > build.grade

- There are two files with this name: one for the project, “Project: My First App”, and
one for the app module, “Module: app”. Each module has its own build.gradle
file, but this project currently has just one module.

Run your App

There are two ways to run your application, a real device or an emulator.

Run on a real device

Set up your device as follows:

1. Connect your device to your development machine with a USB cable.

2. Perform the following steps to enable USB debugging in the Developer options
window:
a. Open the Settings app/
b. If your devices uses Android v8.0 or higher, select System. Otherwise,
proceed to the next step.
c. Scroll to the bottom and select About phone.
d. Scroll to the bottom and tap Build number seven times.
e. Return to the previous screen, scroll to the bottom, and tap Developer
options.
f. In the Developer options window, scroll down to find and enable USB
debugging.

Run the app on your device as follows:

1. In Android Studio, select your app from the run debug configurations drop-down
menu in the toolbar.
2. In the toolbar, select the device that you want to run your app on from the target
device drop-down menu.
 Figure 1: Target device drop-down menu

1. Click Run

Android Studio installs your app on your connected device and starts it. You now
see “Hello, World!” displayed in the app on your device.

Run on an emulator

1. In Android Studio, create an Android Virtual Device (AVD) that the emulator can
use to install and run your app.
2. In the toolbar, select your app from the run/debug configurations drop-down menu.
3. From the target device drop-down menu, select the AVD that you want to run your
app on.

Figure 2: Target device drop-down menu

4. Click Run

Android Studio installs the app on the AVD and starts the emulator. You now see
“Hello, World!” displayed in the app.

Build a Simple User Interface

In this lesson you learn how to use the Android Studio Layout Editor to create a
layout that includes a text box and a button. This sets up the next lesson, where you learn
how to make the app send the content of the text box to another activity when the button
is tapped.

Figure 1: Screenshot of the final layout

The user interface (UI) for an Android app is built as a hierarchy of layouts and widgets. The
layouts are ViewGroup objects, containers that control how their child view s are positioned
on the screen. Widgets are View objects, UI components such as buttons and text boxes.

Figure 2: Illustration of how ViewGroup objects from branches in the

layout and contain View objects

Android provides an XML vocabulary for ViewGroup and View classes, so most of your UI is
defined in XML files. However, rather than teach you to write XML, this lesson shows you
how to create a layout using Android Studio’s Layout Editor. The Layout Editor writes the
XML for you as you drag and drop views to build your layout.

Open the Layout Editor

To get started, setup your workspace as follows:

1. In the Project window, open app > res > layout > activity_main.xml.
 2. To make room for the Layout Editor, hide the Project window. To do so, select View
> Tool Windows > Project, or just click Project on the left side of the Android
Studio screen.
3. If your editor shows the XML source, click the Design tab at the bottom of the
window.
4. Click Select Design Surface and select Blueprint.
5. Click Show in the Layout Editor toolbar and make sure that Show All
Constraints is checked.
6. Make sure Autoconnect is off. A tooltip in the toolbar displays Enable
Autoconnection to Parent when Autoconnect is off.
7. Click Default Margins in the toolbar and select 16. If needed, you can adjust the
margins for each view later.
8. Click Device for Preview in the toolbar and select 5.5, 1440 × 2560, 560 dpi
(Pixel XL).

Your Layout Editor now looks as show in figure 3.

Figure 3: Layout Editor

1. Palette: Contains various views and views groups that you can drag into your
layout.
2. Component Tree: Shows the hierarchy of components in your layout.
3. Toolbar: Click these buttons to configure your layout appearance in the editor and
change layout attributes.
4. Design editor: Edit your layout in Design view, Blueprint view, or both.
5. Attributes: Controls for the selected view’s attributes.
6. View mode: View your layout in either Code , Design , or Split modes. Split
mode shows bot the Code and Design windows at the same time.
7. Zoom and pan controls: Control the preview size and position within the editor.

When you open an XML layout file, the design editor opens by default, as shown in figure 1.
To edit the layout XML in the text editor, click the Code button in the top-right corner of
the window. Note that the Palette, Component Tree and Attributes windows are not
available while editing your layout in Code view.
ConstraintLayout

A layout that defines the position for each view based on constraints to siblings
views and the parent layout.

Example:

You can declare the following layout,

which is show in figure 4:

 View A appears 16 dp from the top

of the parent layout.
 View A appears 16 dp from the left
of the parent layout.
 View B appears 16 dp to the right Figure 4: Illustration of two views
of view A. positioned inside ConstraintLayout
 View B is aligned to the top of view A.

Add a text box

Follow these steps to add a text box:

Figure 5: The text box is constrained to the top and left of the parent

1. First, you need to remove what's already in the layout. Click TextView in the
Component Tree panel and then press the Delete key.
2. In the Palette panel, click Text to show the available text controls.
3. Drag the Plain Text into the design editor and drop it near the top of the layout.
This is an EditText widget that accepts plain text input.
4. Click the view in the design editor. You can now see the square handles to resize the
view on each corner, and the circular constraint anchors on each side. For better
control, you might want to zoom in on the editor. To do so, use the Zoom buttons in
the Layout Editor Toolbar.
5. Click and hold the anchor on the top side, drag it up until it snaps to the top of the
layout, and then release it. That's a constraint: it constrains the view within the
default margin that was set. In this case, you set it to 16 dp from the top of the
layout.
6. Use the same process to create a constraint from the left side of the view to the left
side of the layout.

The result should look as shown in figure 5.

Add a Button

Figure 6: The button is constrained to the right side of the text box and its baseline

1. In the Palette panel, click Buttons.

2. Drag the Button widget into the design editor and drop it near the right side.
3. Create a constraint from the left side of the button to the right side of the text box.
4. To constrain the views in a horizontal alignment, create a constraint between the
text baselines. To do so, right-click the button and then select Show Baseline .
The baseline anchor appears inside the button. Click and hold this anchor, and then
drag it to the baseline anchor that appears in the adjacent text box.\

Change the UI strings

To preview the UI, click Select Design Surface in the toolbar and select Design. Notice
that the text input and button label are set to default values.

Follow these steps to change the UI strings:

1. Open the Project window and then open app > res > values > strings.xml.
This is a string resources file, where you can specify all of your UI strings. It allows
you to manage all of your UI strings in a single location, which makes them easier to
find, update, and localize.
2. Click Open editor at the top of the window. This opens the Translations Editor,
which provides a simple interface to add and edit your default strings. It also helps
you keep all of your translated strings organized.
3. Click Add Key to create a new string as the "hint text" for the text box. At this
point, the window shown in figure 7 opens.
4. Add another key named "button_send" with a value of "Send".

Figure 7: The dialog to add a new string

Now you can set these strings for each view. To return to the layout file, click
activity_main.xml in the tab bar. Then, add the strings as follows:
 1. Click the text box in the layout. If the Attributes window isn't already visible on the
right, click Attributes on the right sidebar.
2. Locate the text property, which is currently set to "Name," and delete the value.
3. Locate the hint property and then click Pick a Resource , which is to the right of
the text box. In the dialog that appears, double-click edit_message from the list.
4. Click the button in the layout and locate its text property, which is currently set to
"Button." Then, click Pick a Resource and select button_send.

Make the text box size flexible

To create a layout that's responsive to different screen sizes, you need to make the text
box stretch to fill all the horizontal space that remains after the button and margins are
accounted for.

Before you continue, click Select Design Surface in the toolbar and select Blueprint.

To make the text box flexible, follow these steps:

1. Select both views. To do so, click one, hold Shift, then click the other, and then right-
click either one and select Chains > Create Horizontal Chain. The layout then
appears as shown in figure 8.

A chain is a bidirectional constraint between two or more views that allows you to
lay out the chained views in unison.

Figure 8: The result of choosing Create Horizontal Chain

2. Select the button and open the Attributes window. Then, use the view inspector at
the top of the Attributes window to set the right margin to 16 dp.
3. Click the text box to view its attributes. Then, click the width indicator twice so it's
set to Match Constraints, as indicated by callout 1 in figure 9.

Match constraints means that the width

expands to meet the definition of the
horizontal constraints and margins.
Therefore, the text box stretches to fill the
horizontal space that remains after the
button and all the margins are accounted
for.

Figure 9: Click to change the width to Match Constraints

Now the layout is done, as shown in figure 10.

If your layout didn't turn out as expected, click See the final layout XML below to see what
your XML should look like. Compare it to what you see in the Text tab. If your attributes
appear in a different order, that's okay.

Figure 10: The text box now stretches to fill the remaining space

See the final layout XML

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.myfirstapp.MainActivity">

<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="@string/edit_message"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="@string/button_send"
app:layout_constraintBaseline_toBaselineOf="@+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>

Run the app

If your app is already installed on the device from the previous lesson, simply click Apply
Changes in the toolbar to update the app with the new layout. Or, click Run to install
and run the app.