Lesson 4:

Build your first

Android app

This work is licensed under the

Android Development with Kotlin Apache 2 license. 1
v1.0
About this lesson
Lesson 4: Build your first Android app
● Your first app
● Anatomy of an Android app
● Layouts and resources in Android
● Activities
● Make an app interactive
● Gradle: Building an Android app
● Accessibility
● Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 2
Android Studio
Official IDE for building Android apps

This work is licensed under the

Android Development with Kotlin Apache 2 license. 3
Your first app

This work is licensed under the

Android Development with Kotlin Apache 2 license. 4
Open Android Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 5
Create new project

This work is licensed under the

Android Development with Kotlin Apache 2 license. 6
Enter your project details

This work is licensed under the

Android Development with Kotlin Apache 2 license. 7
Android releases and API levels

This work is licensed under the

Android Development with Kotlin Apache 2 license. 8
Choose API levels for your app

● Minimum SDK: Device needs at least this API level to

install
● Target SDK: API version and highest Android version
tested
● Compile SDK: Android OS library version compiled with
minSdkVersion <= targetSdkVersion <= compileSdkVersion
The API level identifies the framework API version of the Android SDK.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 9
Tour of Android Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 10
Run your app

● Android device (phone,

tablet)
● Emulator on your computer

This work is licensed under the

Android Development with Kotlin Apache 2 license. 11
Android Virtual Device (AVD)
Manager

This work is licensed under the

Android Development with Kotlin Apache 2 license. 12
Anatomy of an
Android App
project

This work is licensed under the

Android Development with Kotlin Apache 2 license. 13
Anatomy of a basic app project

● Activity
● Resources (layout files, images, audio files, themes, and
colors)
● Gradle files

This work is licensed under the

Android Development with Kotlin Apache 2 license. 14
Android app project structure
MyApplication
├── app
│ ├── libs
│ └── src
│ ├── androidTest
│ ├── main
│ │ ├── java
│ │ ├── res
│ │ └── AndroidManifest.xml
│ └── test
├── build.gradle
└── gradlew

This work is licensed under the

Android Development with Kotlin Apache 2 license. 15
Browse files in Android Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 16
 Layouts and
resources in Android

This work is licensed under the

Android Development with Kotlin Apache 2 license. 17
Views

● Views are the user interface building blocks in

Android
○ Bounded by a rectangular area on the screen
○ Responsible for drawing and event handling
○ Examples: TextView, ImageView, Button
● Can be grouped to form more complex user
interfaces
This work is licensed under the
Android Development with Kotlin Apache 2 license. 18
Layout Editor

This work is licensed under the

Android Development with Kotlin Apache 2 license. 19
XML Layouts

You can also edit your layout in XML.

● Android uses XML to specify the layout of user
interfaces (including View attributes)

● Each View in XML corresponds to a class in Kotlin that

controls how that View functions

This work is licensed under the

Android Development with Kotlin Apache 2 license. 20
XML for a TextView

<TextView
android:layout_width="wrap_content"
Hello World!

android:layout_height="wrap_content"
android:text="Hello World!"/>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 21
Size of a View
● wrap_content
android:layout_width="wrap_content"
● match_parent
android:layout_width="match_parent"
● Fixed value (use dp units)
android:layout_width="48dp"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 22
ViewGroups
A ViewGroup is a container that determines how views are displayed.
FrameLayout LinearLayout ConstraintLayout

TextView TextVie TextVie

w w
TextView TextView
Button
Button

The ViewGroup is the parent and the views inside it are its children.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 23
FrameLayout example
A FrameLayout generally holds a single child View.

<FrameLayout
android:layout_width="match_parent"

android:layout_height="match_parent">
<TextView TextView

android:layout_width="match_parent"

android:layout_height="match_parent"
android:text="Hello World!"/>
</FrameLayout> This work is licensed under the
Android Development with Kotlin Apache 2 license. 24
LinearLayout example
● Aligns child views in a row or column
● Set android:orientation to horizontal or vertical

<LinearLayout
TextView
android:layout_width="match_parent"
TextView
android:layout_height="match_parent"
android:orientation="vertical">
Button
<TextView ... />
<TextView ... />
<Button ... />
</LinearLayout> This work is licensed under the
Android Development with Kotlin Apache 2 license. 25
View hierarchy

LinearLay
out ImageView

ImageVie LinearLay TextView

TextView
w out

Butt Butt
on on
Button Button

This work is licensed under the

Android Development with Kotlin Apache 2 license. 26
App resources
Static content or additional files that your code uses
● Layout files
● Images
● Audio files
● User interface strings
● App icon

This work is licensed under the

Android Development with Kotlin Apache 2 license. 27
Common resource directories
Add resources to your app by including them in the appropriate
resource directory under the parent res folder.

main
├── java
└── res
├── drawable
├── layout
├── mipmap
└── values

This work is licensed under the

Android Development with Kotlin Apache 2 license. 28
Resource IDs
● Each resource has a resource ID to access it.
● When naming resources, the convention is to use all lowercase with
underscores (for example, activity_main.xml).
● Android autogenerates a class file named R.java with references to
all resources in the app.
● Individual items are referenced with:
R.<resource_type>.<resource_name>
Examples: R.drawable.ic_launcher (res/drawable/ic_launcher.xml)
R.layout.activity_main (res/layout/activity_main.xml)

This work is licensed under the

Android Development with Kotlin Apache 2 license. 29
Resource IDs for views
Individual views can also have resource IDs.

Add the android:id attribute to the View in XML. Use @+id/name

syntax.
<TextView
android:id="@+id/helloTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>

Within your app, you can now refer to this specific TextView using:
R.id.helloTextView

This work is licensed under the

Android Development with Kotlin Apache 2 license. 30
 Activities

This work is licensed under the

Android Development with Kotlin Apache 2 license. 31
What’s an Activity?
● An Activity is a means for the user to
accomplish one main goal.
● An Android app is composed of one or
more activities.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 32
MainActivity.kt

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 33
How an Activity runs
Activity
launched

onCreate()

App is running

Activity shut
down

This work is licensed under the

Android Development with Kotlin Apache 2 license. 34
Implement the onCreate()
callback
Called when the system creates your Activity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 35
Layout inflation
Activity

ViewGrou
p
Layout files LayoutInflat
View1 ViewGrou
layout1 layout2 layout3 er
p

View2 View3

This work is licensed under the

Android Development with Kotlin Apache 2 license. 36
Make an app
interactive

This work is licensed under the

Android Development with Kotlin Apache 2 license. 37
Define app behavior in Activity
Modify the Activity so the app responds to user input, such as a button
tap.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 38
Modify a View dynamically

Within MainActivity.kt:

Get a reference to the View in the view hierarchy:

val resultTextView: TextView = findViewById(R.id.textView)

Change properties or call methods on the View instance:

resultTextView.text = "Goodbye!"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 39
Set up listeners for specific
events User interacts with a
View

An event is
fired

Did developer register a

callback?
No Yes

Ignore the Execute the

event callback
This work is licensed under the
Android Development with Kotlin Apache 2 license. 40
View.OnClickListener
class MainActivity : AppCompatActivity(),
View.OnClickListener {

override fun onCreate(savedInstanceState: Bundle?) {

...
val button: Button = findViewById(R.id.button)
button.setOnClickListener(this)
}

override fun onClick(v: View?) {

TODO("not implemented")
}
}
This work is licensed under the
Android Development with Kotlin Apache 2 license. 41
SAM (single abstract method)
Converts a function into an implementation of an interface
Format: InterfaceName { lambda body }

val runnable = Runnable { println("Hi there") }

is equivalent to
val runnable = (object: Runnable {
override fun run() {
println("Hi there")
}
})

This work is licensed under the

Android Development with Kotlin Apache 2 license. 42
View.OnClickListener as a SAM
A more concise way to declare a click listener
class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

...

val button: Button = findViewById(R.id.button)

button.setOnClickListener({ view -> /* do something*/
})
}
}
This work is licensed under the
Android Development with Kotlin Apache 2 license. 43
Late initialization

class Student(val id: String) {

lateinit var records: HashSet<Any>

init {
// retrieve records given an id
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 44
Lateinit example in Activity

class MainActivity : AppCompatActivity() {

lateinit var result: TextView

override fun onCreate(savedInstanceState: Bundle?) {

...
result = findViewById(R.id.result_text_view)
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 45
Gradle: Building an
Android app

This work is licensed under the

Android Development with Kotlin Apache 2 license. 46
What is Gradle?
● Builds automation system
● Manages the build cycle via a series of tasks (for
example, compiles Kotlin sources, runs tests, installs
app to device)
● Determines the proper order of tasks to run
● Manages dependencies between projects and third-
party libraries
This work is licensed under the
Android Development with Kotlin Apache 2 license. 47
Gradle build file

● Declare plugins
● Define Android properties
● Handle dependencies
● Connect to repositories

This work is licensed under the

Android Development with Kotlin Apache 2 license. 48
Plugins

Provide libraries and infrastructure needed by your app

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

This work is licensed under the

Android Development with Kotlin Apache 2 license. 49
Android configuration
android {
compileSdkVersion 30
buildToolsVersion "30.0.2"

defaultConfig {
applicationId "com.example.sample"
minSdkVersion 19
targetSdkVersion 30
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 50
 Dependencies

dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-
jdk7:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'
...
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 51
Repositories

repositories {
google()
jcenter()
maven {
url "https://maven.example.com"
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 52
Common Gradle tasks

● Clean
● Tasks
● InstallDebug

This work is licensed under the

Android Development with Kotlin Apache 2 license. 53
Accessibility

This work is licensed under the

Android Development with Kotlin Apache 2 license. 54
Accessibility

● Refers to improving the design and functionality of

your app to make it easier for more people,
including those with disabilities, to use
● Making your app more accessible leads to an
overall better user experience and benefits all
your users

This work is licensed under the

Android Development with Kotlin Apache 2 license. 55
Make apps more accessible
● Increase text visibility with foreground and background
color contrast ratio:
○ At least 4.5:1 for small text against the background
○ At least 3.0:1 for large text against the background
● Use large, simple controls
○ Touch target size should be at least 48dp x 48dp
● Describe each UI element
○ Set content description on images and controls

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Accessibility Scanner

Tool that scans your screen and suggests

improvements to make your app more
accessible, based on:
● Content labels
● Touch target sizes
● Clickable views
● Text and image contrast

This work is licensed under the

Android Development with Kotlin Apache 2 license. 57
Accessibility Scanner example

This work is licensed under the

Android Development with Kotlin Apache 2 license. 58
Add content labels
● Set contentDescription attribute → read aloud by
screen reader

<ImageView
...
android:contentDescription="@string/stop_sign" />

● Text in TextView already provided to accessibility

services,
no additional label needed
This work is licensed under the
Android Development with Kotlin Apache 2 license. 59
No content label needed

● For graphical elements that are purely for decorative

purposes, you can set
android:importantForAccessibility="no"

● Removing unnecessary announcements is better for

the user

This work is licensed under the

Android Development with Kotlin Apache 2 license. 60
TalkBack

● Google screen reader included on Android devices

● Provides spoken feedback so you don’t have to look at
the screen to use your device
● Lets you navigate the device using gestures
● Includes braille keyboard for Unified English Braille

This work is licensed under the

Android Development with Kotlin Apache 2 license. 61
TalkBack example
Reads text
aloud as
user
navigates
the screen

This work is licensed under the

Android Development with Kotlin Apache 2 license. 62
Switch access

● Allows for controlling the device using one or more

switches instead of the touchscreen
● Scans your app UI and highlights each item until you
make a selection
● Use with external switch, external keyboard, or buttons
on the Android device (e.g., volume buttons)

This work is licensed under the

Android Development with Kotlin Apache 2 license. 63
Android Accessibility Suite
Collection of accessibility apps that help
you use your Android device eyes-free, or
with a switch device. It includes:
● Talkback screen
reader
● Switch Access
● Accessibility Menu
● Select to Speak
This work is licensed under the
Android Development with Kotlin Apache 2 license. 64
Accessibility Resources

● Build more accessible apps

● Principles for improving app accessibility
● Basic Android Accessibility codelab
● Material Design best practices on accessibility

This work is licensed under the

Android Development with Kotlin Apache 2 license. 65
 Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 66
Summary
In Lesson 4, you learned how to:

● Use Views and ViewGroups

to build the user interface of your app
● Access resources in your app from
R.<resource_type>.<resource_name>
● Define app behavior in the Activity (for example, register
OnClickListener)
● Use Gradle as the build system to build your app
● Follow best practices to make your apps more accessible
This work is licensed under the
Android Development with Kotlin Apache 2 license. 67
Learn more
● Layouts
● LinearLayout
● Input events overview
● View
● ViewGroup

This work is licensed under the

Android Development with Kotlin Apache 2 license. 68
Pathway

Practice what you’ve learned by

completing the pathway:
Lesson 4: Build your first Android app

This work is licensed under the

Android Development with Kotlin Apache 2 license. 69