Lesson 4: Build your first Android app

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

Choose API levels for your app

• Minimum SDK: 기기에 설치 시 필요한 최소 API level 입니다.
• Target SDK: API 버전 및 테스트된 가장 높은 Android 버전입니다.
• Compile SDK: 컴파일 시 사용되는 Android OS 라이브러리 버전입니다.
• Setting: minSdkVersion <= targetSdkVersion <= compileSdkVersion

API level은 Android SDK의 프레임워크 API 버전을 식별합니다.

Anatomy of an Android App project

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

Android app project structure

MyApplication
├── app
│   ├── libs
│   └── src
│       ├── androidTest
│       ├── main
│       │   ├── java
│       │   ├── res
│       │   └── AndroidManifest.xml
│       └── test
├── build.gradle
└── gradlew

Layouts and resources in Android

Views

• Views는 Android의 사용자 인터페이스 기본 요소입니다.
  - 화면의 직사각형 영역으로 경계되어 있습니다.
  - 드로잉 및 이벤트 처리를 담당합니다.
  - Examples : TextView, ImageView, Button
• 더 복잡한 화면 사용자 인터페이스를 구성하기 위해 그룹화 가능합니다.

XML Layouts

XML을 이용하여 레이아웃을 편집할 수도 있습니다.

• Android는 XML을 사용하여 사용자 인터페이스(View 속성 포함)의 레이아웃을 지정합니다
• XML의 각 View는 해당 View가 작동하는 방식을 제어하는 Kotlin의 클래스에 해당합니다.

XML for a TextView

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

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"

ViewGroups

• ViewGroup은 views가 표시되는 방식을 결정하는 컨테이너입니다.
• ViewGroup은 부모이고 그 안의 뷰는 자식입니다.
  

FrameLayout example

FrameLayout은 일반적으로 단일 자식 뷰를 보유합니다.

<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <TextView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:text="Hello World!"/>
</FrameLayout>

LinearLayout example

• 행 또는 열의 child views를 정렬합니다.
• android:orientation을 가로 또는 세로로 설정

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView ... />
    <TextView ... />
    <Button ... />
</LinearLayout>

View hierarchy

App resources

코드에서 사용하는 static 콘텐츠 또는 추가 파일입니다.

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

Common resource directories

상위 res 폴더 아래의 적절한 res 디렉토리에 포함하여 앱에 리소스를 추가합니다.

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

Resource IDs

• 각 리소스에는 액세스할 수 있는 리소스 ID가 있습니다.
• 리소스 이름을 지정할 때 규칙은 underscores 함께 모두 lowercase를 사용하는 것입니다
  (예: activity_main.xml).
• Android는 앱의 모든 리소스에 대한 참조와 함께 R.java라는 클래스 파일을 자동 생성합니다.
• 개별 항목은 R.<resource_type>.<resource_name>으로 참조됩니다.
  • 예:
    • R.drawable.ic_launcher (res/drawable/ic_launcher.xml)
    • R.layout.activity_main (res/layout/activity_main.xml)

Resource IDs for views

개별 view에도 리소스 ID가 있을 수 있습니다.
android:id 속성을 XML의 view에 추가합니다. @+id/name 구문을 사용합니다.

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

이제 앱 내에서 TextView를 참조할 수 있습니다. R.id.helloTextView

Activities

What’s an Activity?

• Activity는 사용자가 하나의 주요 목표를 달성하기 위한 수단입니다.
• Android 앱은 하나 이상의 Activity로 구성됩니다.

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

How an Activity runs

Implement the onCreate() callback

시스템이 Activity를 생성할 때 호출됩니다.

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

Layout inflation

Make an app interactive

Define app behavior in Activity

앱이 버튼 탭과 같은 사용자 입력에 응답하도록 Activity를 수정합니다.

Modify a View dynamically

MainActivity.kt 안에서
view 계층구조에서 View에 대한 참조를 가져옵니다.
val resultTextView: TextView = findViewById(R.id.textView)

view instance에서 속성을 변경하거나 메서드를 호출합니다.
resultTextView.text = "Goodbye!"

Set up listeners for specific events

View.OnClickListener

XML에 선언된 Button을 id를 참조해 가져온 뒤 click event를 등록한 예시입니다.

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")
   }
}

SAM (single abstract method)

함수를 인터페이스 구현으로 변환합니다.

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


// 위의 방식과 같은 표현입니다.
val runnable = (object: Runnable {
    override fun run() {
        println("Hi there")
    }
})

View.OnClickListener as a SAM

Click listener를 보다 간결하게 선언할 수 있는 방법입니다.

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       ...

       val button: Button = findViewById(R.id.button)
       button.setOnClickListener({ view -> /* do something*/ })
   }
}

Late initialization

class Student(val id: String) {

    lateinit var records: HashSet<Any>

    init {
        // retrieve records given an id
    }
}

Lateinit example in Activity

class MainActivity : AppCompatActivity() {

    lateinit var result: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
       ...
       result = findViewById(R.id.result_text_view)
    }
}

Lateinit을 사용해 TextView를 Notnull하게 선언할 수 있습니다.

Gradle: Building an Android app

What is Gradle?

• 자동화 시스템 구축
• 일련의 작업을 통해 빌드 cycle을 관리합니다.(예: kotlin소스 컴파일, 테스트 실행, 앱설치)
• 실행할 작업의 적절한 순서를 결정합니다.
• 프로젝트와 third-party libraries간의 종속성을 관리합니다.

Gradle build file

• 플러그인 선언
• Android 속성 정의
• dependencies 처리
• repositories 연결

Plugins

앱에 필요한 라이브러리와 인프라를 제공합니다.

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

Android configuration

Android 필요한 속성을 정의합니다.

android {
   compileSdkVersion 30
   buildToolsVersion "30.0.2"

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

Dependencies

App에 필요한 라이브러리를 선언합니다.

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'
   ...
}

Repositories

해당 저장소에 연결합니다.

repositories {
    google()
    mavenCentral()
}

Common Gradle tasks

• Clean
• Tasks
• InstallDebug

Accessibility

• 장애인을 포함한 더 많은 사람들이 더 쉽게 사용할 수 있도록 앱의 디자인과 기능을 개선하는 것을 말합니다.
• 앱의 접근성을 높이면 전반적으로 더 나은 사용자 경험을 제공하고 모든 사용자에게 혜택을 줍니다.

Make apps more accessible

• foreground and background의 색상 대비 비율로 텍스트 가시성을 향상 시킵니다.
  • background에 대한 작은 텍스트의 경우 최소 4.5:1
  • background에 대한 큰 텍스트의 경우 최소 3.0:1
• 크고 간단한 컨트롤 사용
  • 터치 대상의 크기는 최소 48dp x 48dp이여야 합니다.
• 각 UI요소 설명
  • 이미지 및 컨트롤에 대한 설명을 설정해야 합니다.

add content labels

contentDescription 속성을 사용하면 screen reader로 읽어집니다.

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

TextView의 text의 경우 이미 accessibility services에 제공되었으므로 추가 label이 필요 없습니다.

No content label needed

순전히 장식용 그래픽 요소에 대해서는 다음을 설정할 수 있습니다.
android:importantForAccessibility="no"
불필요한 공지는 제거하는 것이 사용자에게 더 좋습니다.

TalkBack

• Android 기기에 포함덴 Google 스크린 리더
• device를 사용하기 위해 화면을 볼 필요가 없도록 음성 피드백을 제공합니다.
• 제스처를 사용하여 device를 탐색할 수 있습니다.

Switch access

• 터치스크린 대신 하나 이상의 스위치를 사용하여 device를 제어할 수 있습니다.
• 앱 UI를 스캔하고 선택할 때까지 각 항복을 강조 표시합니다.
• 외부 스위치, 외부 키보드, Android device의 버튼과 함께 사용합니다.