안드로이드 코틀린 앱 개발 시작하기 Hello World

#01안드로이드 앱 시작 Hello World 일단 따라하기

Android Studio + Kotlin 언어를 사용한 Hello World 앱 따라하기

입니다. 버튼을 생성하고, 버튼을 터치하면 Hello World 메세지를 출력하는 간단한 앱입니다. 

 

개발환경

이 포스트의 안드로이드 앱 개발환경은 Android Studio와 Kotlin언어를 사용합니다. Android Studio는 아래의 링크에서 다운로드 할 수 있습니다. 

안드로이드 스튜디오 다운로드

Download Android Studio and SDK tools  |  Android 스튜디오

버전정보

• Android Studio 4.1.2
• Kotlin Version 1.4.31

 

프로젝트 생성 및 환경설정

프로젝트 생성

아래 그림과 같이 프로젝트를 생성합니다.

• 안드로이드 스튜디오 프로그램 실행
• Create New Project 선택
• Create New Project 창에서 주요 설정
  • Name : 프로젝트명 HelloWorld 기입
  • Language : Kotlin 선택
  • Minimum SDK : API21

Hello World 프로젝트 생성

환경 설정 build.gradle(Module: app)

gradle은 안드로이드가 사용하는 빌드 시스템입니다. build.gradle은 앱 빌드와 관련된 환경 설정을 코드로 작성할 수 있습니다. 프로젝트가 생성되면 build.gradle(Module) 의 plugins에 id 'kotlin-android-extentions'를 추가합니다.

• build.gradle(Module: HelloWorld.app) : 모듈 환경 설정 파일
• 플러그인에서 kotlin-android-extentions 추가
• Sync Now를 선택하여 수정사항 반영

※ kotlin-android-extensions 는 레이아웃 View의 id를 코틀린 코드에서 바로 사용 할 수 있도록 해주는 플러그인입니다. 해당 플러그인은 2021년 지원이 종료 될 예정입니다. 참고해주세요. kotlin-android-extensions 를 대체하는 View Binding 방법은 아래의 링크를 참조해주세요.

안드로이드 View Binding 사용하기

안드로이드 View Binding 사용하기 - kotlin-android-extensions 지원 중단

 

UI 만들기

레이아웃 보기 설정

App > res > layout > activity_main.xml 경로의 xml 파일은 안드로이드 앱의 메인 화면 UI 코드를 저장하고 있습니다. 안드로이드 앱의 UI는 Code탭에서 XML 코드로 제작하거나, Design 탭에서 마우스를 이용한 드래그앤 드롭 방식으로 작성 할 수 있습니다. Design 탭에서 UI를 구성하는 경우 XML에 자동으로 코드가 생성됩니다. 아래 그림은 Split 보기 옵션을 선택해서 한 화면에 코드창과 UI창을 동기시에 보는 설정입니다. 사용자 편의에 따라 다른 방식을 사용해도 무방합니다.

안드로이드 레이아웃 생성 환경

안드로이드 레이아웃 작업환경 : Split 탭

UI 만들기 : XML 코드 작성

activity_main.xml 파일에서 기존의 TextView 태그를 삭제 후 아래의 <Button> 태그 부분을 추가합니다.

<?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=".MainActivity">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

위와 같이 XML 코드를 수정하면 우측의 Design Tab 에서 아래와 같이 버튼이 추가된 화면을 볼 수 있습니다.

버튼 추가된 화면 확인

프로그램 코드 작성

안드로이드 앱의 프로그래밍은 app > java > pakageName 폴더 > MainActivity 에서 작성합니다. MainActivity.kt 파일에서 onCreate 함수는 MainActivity가 시작되면 실행되는 함수입니다. 

아래 코드는 onCreate 함수에서 UI에서 만든 버튼 리스터를 등록하는 코드입니다. 버튼이 터치되면 HelloWorld! Toast 팝업 메세지를 출력합니다.

package com.blacklog.helloworld

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

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

        button.setOnClickListener {
            Toast.makeText(this, "Hello World!", Toast.LENGTH_SHORT).show()
        }
    }
}

위 코드에서 button에 붉은 색이 표시되는 경우 button 글자에서 ALT + ENTER 를 누른 후 메뉴에서 import를 선택하시면 됩니다. import가 나타나지 않으면 아래의 2가지를 확인해보세요.

• build.gradle(Module)의 플러그인에 'kotlin-android-extentions' 이 추가 되었는지
• activity_main.xml 의 button 태그의 id 이름이 button이 맞는지 확인

애뮬레이터 추가

안드로이드 앱 프로그래밍이 완료되면 실제 핸드폰에 실행하거나, 안드로이드 스튜디오의 애뮬레이터를 통해 실행할 수 있습니다. 아래는 애뮬레이터를 추가하는 방법입니다.

Android Studio의 툴바에서 AVD Manager 를 선택합니다.

Android Studio의 툴바에서 AVD Manager 를 선택

팝업 창에서 Create Virtual Device를 클릭 후 원하는 기종의 스마트폰을 선택합니다. Pixel 4는 앱 개발시 래퍼런스용으로 사용되길 권장되는 폰 중의 하나입니다. 다른 기종을 선택해도 무방합니다. 

가상 스마트폰 기종 선택

가상 스마트폰을 선택 후 탑재될 OS를 선택합니다. 64bit 운영체제를 사용하시는 분은 x86_64 로 되어있는 운영체제를 다운로드하여 선택하시길 권장드립니다. 64비트 컴퓨터에서 32비트 프로그램을 실행하면 속도가 느립니다. 

AVD Name과 방향을 지정하고 Finish를 눌러 애뮬레이터 추가를 완료합니다.

가상 스마트폰 운영체제 및 기타 설정

에뮬레이터 추가가 완료되면 아래 그림과 같이 Android Studio 상단 툴바에 등록된 장치를 확인 할 수 있습니다. 여러 장치가 등록된 경우 드롭 다운 메뉴에서 실행할 장치를 선택 할 수 있습니다.

실행되는 애뮬레이터 기종 확인

앱 실행 후 결과 확인

위의 과정을 모두 마치면 툴바의 실행 버튼을 클릭하면 안드로이드 스튜디오에서 작성된 코드를 애뮬레이터에서 실행 할 수 있습니다.

앱 실행 버튼

실행화면

끝까지 읽어 주셔서 감사합니다.

관련포스트

🤞 안드로이드(코틀린) 앱 제작하기 관련글 목록 보기