Lesson 4:

Build your first

Android app

Android Development with Kotlin This work is licensed under the

v1.0 Apache 2 license.
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 2
Android Studio
Official IDE for building Android apps

Android Development with Kotlin This work is licensed under the

Apache 2 license. 3
Your first app

Android Development with Kotlin This work is licensed under the

Apache 2 license.
Open Android Studio

Android Development with Kotlin This work is licensed under the

Apache 2 license. 5
Create new project

Android Development with Kotlin This work is licensed under the

Apache 2 license. 6
Enter your project
details

Android Development with Kotlin This work is licensed under the

Apache 2 license. 7
Android releases and API
levels

Android Development with Kotlin This work is licensed under the

Apache 2 license. 8
Android releases and API
levels

Android Development with Kotlin This work is licensed under the

Apache 2 license. 9
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
The API level identifies <=
minSdkVersion the targetSdkVersion
framework API version
<= of the Android SDK.
compileSdkVersion

Android Development with Kotlin This work is licensed under the

Apache 2 license. 10
Tour of Android Studio

Android Development with Kotlin This work is licensed under the

Apache 2 license. 11
Run your app

● Android device (phone,

tablet)
● Emulator on your computer

Android Development with Kotlin This work is licensed under the

Apache 2 license. 12
Android Virtual Device (AVD)
Manager

Android Development with Kotlin This work is licensed under the

Apache 2 license. 13
Anatomy of an
Android App
project

14

Android Development with Kotlin This work is licensed under the

Apache 2 license.
Anatomy of a basic app
project
● Activity
● Resources (layout files, images, audio files, themes,
and colors)
● Gradle files

Android Development with Kotlin This work is licensed under the

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 16
Browse files in Android
Studio

Android Development with Kotlin This work is licensed under the

Apache 2 license. 17
 Layouts and
resources in Android

18

Android Development with Kotlin This work is licensed under the

Apache 2 license.
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
Android Development with Kotlin This work is licensed under the
Apache 2 license. 19
Layout Editor

Android Development with Kotlin This work is licensed under the

Apache 2 license. 20
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 21
XML for a TextView

<TextView

Hello World!
android:layout_width="wrap_content"

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 22
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"

Android Development with Kotlin This work is licensed under the

Apache 2 license. 23
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.

Android Development with Kotlin This work is licensed under the

Apache 2 license. 24
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>

Android Development with Kotlin This work is licensed under the

Apache 2 license. 25
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>

Android Development with Kotlin This work is licensed under the

Apache 2 license. 26
View hierarchy

LinearLay
out ImageView

ImageVie LinearLay TextView

TextView
w out

Butto Butto
n n
Button Button

Android Development with Kotlin This work is licensed under the

Apache 2 license. 27
App resources

Static content or additional files that your code uses

● Layout files
● Images
● Audio files
● User interface strings
● App icon

Android Development with Kotlin This work is licensed under the

Apache 2 license. 28
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 29
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)

Android Development with Kotlin This work is licensed under the

Apache 2 license. 30
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 31
 Activities

32

Android Development with Kotlin This work is licensed under the

Apache 2 license.
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.

Android Development with Kotlin This work is licensed under the

Apache 2 license. 33
MainActivity.kt

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 34
How an Activity runs

Activity
launched

onCreate()

App is running

Activity shut
down

Android Development with Kotlin This work is licensed under the

Apache 2 license. 35
Implement the onCreate()
callback

Called when the system creates your Activity

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

Android Development with Kotlin This work is licensed under the

Apache 2 license. 36
Layout inflation

Activity

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

View2 View3

Android Development with Kotlin This work is licensed under the

Apache 2 license. 37
Make an app
interactive

38

Android Development with Kotlin This work is licensed under the

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 39
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!"

Android Development with Kotlin This work is licensed under the

Apache 2 license. 40
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 41
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")
}
}

Android Development with Kotlin This work is licensed under the

Apache 2 license. 42
SAM (single abstract
method)
Converts a function into an implementation of an interface
Format: InterfaceName { lambda body }

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 43
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*/ })
}
}

Android Development with Kotlin This work is licensed under the

Apache 2 license. 44
Late initialization

class Student(val id: String) {

lateinit var records: HashSet<Any>

init {
// retrieve records given an id
}
}

Android Development with Kotlin This work is licensed under the

Apache 2 license. 45
Lateinit example in
Activity
class MainActivity : AppCompatActivity() {

lateinit var result: TextView

override fun onCreate(savedInstanceState: Bundle?) {

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 46
Gradle: Building an
Android app

47

Android Development with Kotlin This work is licensed under the

Apache 2 license.
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 48
Gradle build file

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 49
Plugins

Provide libraries and infrastructure needed by your app

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 50
Android configuration

android {
compileSdkVersion 30
buildToolsVersion "30.0.2"

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 51
 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'
...
}

Android Development with Kotlin This work is licensed under the

Apache 2 license. 52
Repositories

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 53
Common Gradle tasks

● Clean
● Tasks
● InstallDebug

Android Development with Kotlin This work is licensed under the

Apache 2 license. 54
 Debugging

55

Android Development with Kotlin This work is licensed under the

Apache 2 license.
Debugging

● Run the application in debug mode

● Use Logcat to log data
● Use try-catch to avoid crashes

Android Development with Kotlin This work is licensed under the

Apache 2 license. 56
Accessibility

57

Android Development with Kotlin This work is licensed under the

Apache 2 license.
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 58
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

Android Development with Kotlin This work is licensed under the

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 60
Accessibility Scanner
example

Android Development with Kotlin This work is licensed under the

Apache 2 license. 61
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 62
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 63
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 64
TalkBack example

Reads text
aloud as
user
navigates
the screen

Android Development with Kotlin This work is licensed under the

Apache 2 license. 65
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)

Android Development with Kotlin This work is licensed under the

Apache 2 license. 66
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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 67
Accessibility Resources

● Build more accessible apps

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 68
 Summary

69

Android Development with Kotlin This work is licensed under the

Apache 2 license.
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 appsThismore accessible

work is licensed under the
Android Development with Kotlin
Apache 2 license. 70
Learn more

● Layouts
● LinearLayout
● Input events overview
● View
● ViewGroup

Android Development with Kotlin This work is licensed under the

Apache 2 license. 71
Pathway

Practice what you’ve learned by

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

Android Development with Kotlin This work is licensed under the

Apache 2 license. 72