안드로이드 코틀린 : AlertDialog 기본, 목록, 라디오 버튼, 체크 박스, EditText 입력 창
Lucy Archive
Lucy / Facilitate4U
2021. 3. 23. 00:44

안드로이드 코틀린 : AlertDialog 기본, 목록, 체크박스  목록, 라디오 버튼 목록, 입력(Edit Text) 사용법

이번 포스트는

안드로이드 코틀린 언어를 사용하여 AlertDialog를 활용한 기본 사용 방법, 목록 선택 하는 방법 및 입력 창(EditText View)를 사용하는 법

을 정리하였습니다.

 

AlertDialog 기본 사용법

AlertDialog 을 생성하기 위한 기본적인 코드는 아래와 같습니다. AlertDialog.Builder를 사용해 builder 객체를 만든 후 setTitle, setMessage 등과 같은 옵션을 적용 후에 최종적으로 .show() 메서드로 알림창을 보여줄 수 있습니다. setPositiveButton과 같은 버튼은 클릭 후 발생하는 이벤트를 처리하는 리스너를 바로 등록 할 수 있습니다. 

val builder = AlertDialog.Builder(this)
builder.setTitle("Title")
builder.setMessage("Message")
builder.setPositiveButton("Positive") { dialogInterface: DialogInterface, i: Int ->
        toast("Positive")
    }
builder.setNegativeButton("Negative") { dialogInterface: DialogInterface, i: Int ->
        toast("Negative")
    }
builder.setNeutralButton("Neutral") { dialogInterface: DialogInterface, i: Int ->
        toast("Neutral")
    }
builder.show()

위의 코드를 실행하면 아래와 같이 팝업 알림 창이 생성됩니다. 

AlertDialog 실행화면

코틀린 언어적인 특정을 이용해서 동일하게 동작하지만 아래와 같이 동일한 동작을 하는 코드 형태로도 작성 할 수 있습니다. 적용 환경에 따라 더욱 다양하고 가독성 좋게 작성하는 방법들이 있습니다. 

package com.blacklog.alertdialogtest

import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import com.blacklog.alertdialogtest.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    lateinit var binding : ActivityMainBinding

    val positiveButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Positive")
    }
    val negativeButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Negative")
    }
    val neutralButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Neutral")
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnBasicAlertDialog.setOnClickListener {
            val builder = AlertDialog.Builder(this)
                .setTitle("Title")
                .setMessage("Message")
                .setPositiveButton("Positive",positiveButtonClick)
                .setNegativeButton("Negative", negativeButtonClick)
                .setNeutralButton("Neutral", neutralButtonClick)
                .show()
        }
    }

    fun toast(message:String){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
}

 

프로젝트 생성 및 환경설정

AlertDialog 기본 사용법에 대해 알아 보았고, AlertDialog 을 사용하여 목록 선택 및 입력을 받는 방법에 대해 정리합니다.

프로젝트 생성

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

  • 프로젝트명 : AlertDialogTest
  • 사용언어 코틀린 : Kotlin

프로젝트 생성

이 포스트의 안드로이드 앱 개발환경은 Android Studio와 Kotlin언어를 사용합니다.

  • Android Studio 4.1.2
  • Kotlin Version 1.4.31

 

ViewBinding 설정

build.gradle(Module) 파일에 아래의 코드를 추가합니다.

android {
    viewBinding {
        enabled = true
    }
}

ViewBinding 은 레이아웃의 View의 Id를 코드에서 직접 할 수 있도록 해주는 도구입니다. View Binding과 관련된 설명은 아래의 링크를 참조해주세요.

안드로이드 View Binding 사용하기

 

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

안드로이드 View Binding 방법 정리 안드로이드 코드에서 레이아웃 View에 접근하기 위해 사용된 kotlin-android-extensions 의 지원이 중단예정으로, 이를 대체하여 사용 할 수 있는 ViewBinding 사용법에 대해

juahnpop.tistory.com

 

레이아웃 작성

activity_main.xml 코드 작성

레이아웃 파일 activity_main.xml 파일에서 아래와 같이 코드를 작성합니다. 기존 코드에서 TextView 요소를 삭제 후 아래와 같이 코드를 추가합니다. 

<?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"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnBasicAlertDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Basic AlertDialog"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnItemAlertDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="List AlertDialog"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btnBasicAlertDialog"
        tools:layout_editor_absoluteX="8dp" />

    <Button
        android:id="@+id/btnRadioAlertDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="320dp"
        android:text="Radio AlertDialog"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btnItemAlertDialog"
        tools:layout_editor_absoluteX="8dp" />

    <Button
        android:id="@+id/btnCheckBoxAlertDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="320dp"
        android:text="CheckBox AlertDialog"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btnRadioAlertDialog"
        tools:layout_editor_absoluteX="8dp" />

    <Button
        android:id="@+id/btnEditTextAlertDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="320dp"
        android:text="EditText AlertDialog"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btnCheckBoxAlertDialog"
        tools:layout_editor_absoluteX="8dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

위의 코드는 아래 그림과 같이 5개의 버튼을 나란히 생성합니다. 버튼을 누르면 해당 AlertDialog를 실행할 예정입니다.

UI 생성화면

 

코틀린 코드 작성 : MainActivity.kt

기본형

MainActivity.kt의 코드는 아래와 같이 작성합니다. 앞서 위에서 설명한 기본 적인 코드와 동일 합니다. binding.btnBasicAlertDialog.setOnClickListener{} 의 코드가 알림창을 생성하고 호출하는 코드입니다.

package com.blacklog.alertdialogtest

import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import com.blacklog.alertdialogtest.databinding.ActivityMainBinding
import com.blacklog.alertdialogtest.databinding.AlertdialogEdittextBinding

class MainActivity : AppCompatActivity() {

    lateinit var binding : ActivityMainBinding

    val positiveButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Positive")
    }
    val negativeButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Negative")
    }
    val neutralButtonClick = { dialogInterface: DialogInterface, i: Int ->
        toast("Neutral")
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnBasicAlertDialog.setOnClickListener {
            val builder = AlertDialog.Builder(this)
                .setTitle("Title")
                .setMessage("Message")
                .setPositiveButton("Positive", positiveButtonClick)
                .setNegativeButton("Negative", negativeButtonClick)
                .setNeutralButton("Neutral", neutralButtonClick)
                .show()
        }
    }

    fun toast(message:String){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
}

위 코드를 실행하면 아래와 같이 Basic AlertDialog 버튼을 누르면 기본적인 알림창이 표시됩니다. 버튼을 눌렀을 때 발생하는 이벤트는 각각 positiveButtonClick, negativeButtonClick, neutralButtonClick에 정의되어 있습니다. 

Basic AlertDialog 실행 화면

Item 선택 목록형 

위 코드의 onCreate 함수안에 아래의 추가 버튼 리스너 코드를 작성합니다. Item 선택 목록형 알림창을 만들기 위해 아이템 리스트 배열을 생성하고, setItems() 메서드를 사용하여 리스트를 추가하고, 아이템 선택시 발생하는 이벤트 리스너 코드를 등록합니다.

binding.btnItemAlertDialog.setOnClickListener{
    val items = arrayOf("Apple", "Orange", "Mango", "Lemon")
    val builder = AlertDialog.Builder(this)
        .setTitle("Select Item")
        .setItems(items) { dialog, which ->
            toast("${items[which]} is Selected")
        }
        .show()
}

위 코드를 작성하면 List AlertDialog 버튼을 눌렀을 때 아래와 같이 목록 선택형 알림창이 실행됩니다.

List AlertDialog 실행 화면

라디오 버튼 목록형

라디오 버튼도 위의 목록 선택형과 동일하게 목록 중에서 하나를 선택 할 수 있는 UI입니다. setItems() 메서드로 구현된 목록형은 아이템 선택시 알림창이 바로 사라지지만, 아래 코드와 같이 setSingleChoiceItems() 메서드로 구현된 라디오 버튼 타입은 목록 선택 수정이 가능합니다. 아래 코드에서 setSingleChoiceItems() 의 두번째 인자는 디폴트로 선택될 배열의 인덱스 번호를 설정합니다. 기본설정으로 아무 것도 선택하지 않고 싶은 경우 -1 을 입력합니다.

binding.btnRadioAlertDialog.setOnClickListener{
    val items = arrayOf("Apple", "Orange", "Mango", "Lemon")
    var selectedItem: String? = null
    val builder = AlertDialog.Builder(this)
        .setTitle("Select Item")
        .setSingleChoiceItems(items, -1) { dialog, which ->
            selectedItem = items[which]
        }
        .setPositiveButton("OK") { dialog, which ->
            toast("${selectedItem.toString()} is Selected")
        }
        .show()
}

위 코드를 실행하면 Radio AlertDialog 버튼을 눌렀을 때 아래와 같이 알림창이 나타납니다.

Radio AlertDialog 버튼 실행 화면

체크 박스 목록형(다중 선택)

체크 박스형태의 목록은 1개 이상의 다중 선택이 가능한 형태 입니다. 다중 선택 가능한 목록 생성을 위한 setMultiChoiceItems() 메서드의 인자는 목록 배열, 기본 선택 옵션(배열의 인덱스)를 사용합니다. setMultiChoiceItems() 의 리스너 코드는 체크 박스 다이얼로그를 터치 하는 경우 실행됩니다. 체크박스는 선택 및 취소가 되기 때문에 클릭(또는 터치) 결과가 선택되었는지, 취소되었는지를 판단 후 선택된 항목을 저장하는 배열(selectedItemIndex)에 추가를 할지, 삭제를 할지 코드 처리가 필요합니다. 

binding.btnCheckBoxAlertDialog.setOnClickListener {
    val items = arrayOf("Apple", "Orange", "Mango", "Lemon")
    val selectedItemIndex = ArrayList<Int>()

    val builder = AlertDialog.Builder(this)
        .setTitle("Select Items")
        .setMultiChoiceItems(items, null){ dialogInterface: DialogInterface, i: Int, b: Boolean ->
            if(b){
                selectedItemIndex.add(i)
            } else if(selectedItemIndex.contains(i)){
                selectedItemIndex.remove(i)
            }
        }
        .setPositiveButton("OK") { dialogInterface: DialogInterface, i: Int ->
            val selected = ArrayList<String>()
            for(j in selectedItemIndex) {
                selected.add(items[j])
            }
            toast("Selected Itmes : $selected")
        }
        .show()
}

위 코드를 실행하면 CheckBox AlertDialog 버튼을 눌렀을 때 아래와 같이 알림창이 실행됩니다.

CheckBox Dialog 실행 화면

 

EditText 로 입력 받기

AlertDialog 클래스내에서 EditText 로 문자열을 입력 받는 기능은 없습니다. 문자열 입력을 받기 위해 EditText 레이아웃을 생성하고, AlertDialog 내부에 해당 레이아웃을 표시하는 방법을 사용합니다. 이 방법을 응용하면 다양한 UI를 AlertDialog에 삽입할 수 있습니다.

우선 EditText 를 포함하는 레이아웃 파일을 생성합니다. File name 과 Root element는 편한대로 설정하면 됩니다.

레이아웃 파일 생성

생성된 레이아웃 alertdialog_edittext 파일에 아래와 같이 코드를 작성합니다.

<?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">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="22dp"
        android:layout_marginEnd="22dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt 에서 아래와 같이 버튼 리스너 코드를 추가합니다.

binding.btnEditTextAlertDialog.setOnClickListener {
    val builder = AlertDialog.Builder(this)
    val builderItem = AlertdialogEdittextBinding.inflate(layoutInflater)
    val editText = builderItem.editText

    with(builder){
        setTitle("Input Name")
        setMessage("이름을 입력 하세요")
        setView(builderItem.root)
        setPositiveButton("OK"){ dialogInterface: DialogInterface, i: Int ->
            if(editText.text != null) toast("입력된 이름 : ${editText.text}")
        }
        show()
    }
}

위 코드를 입력하면 EditText AlertDialog 버튼 선택 후 아래와 같은 알림창이 실행됩니다.

EditText AlertDialog 실행 화면

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

관련포스트

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

🤞 안드로이드(코틀린) 팝업, 다이얼로그 관련글 목록 보기