안드로이드에서 커스텀 뷰로 사용자 지정 대화상자(Custom Dialog) 만드는 방법

개요

이 튜토리얼에서는 안드로이드(Android)에서 별도의 커스텀 뷰를 인플레이트(inflate)하여 사용자 지정 대화상자(Custom Dialog)를 만들고, 다이얼로그 안의 버튼 클릭 동작까지 구현하는 방법을 단계별로 살펴봅니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project를 선택한 후, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

2단계: 메인 레이아웃 작성 (activity_main.xml)

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/customDialog"
        android:text="Custom Dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

위 코드에는 버튼 하나가 배치되어 있습니다. 사용자가 이 버튼을 클릭하면 커스텀 대화상자가 화면에 표시됩니다.

3단계: MainActivity.java 코드 추가

src/MainActivity.java 파일에 아래 코드를 추가합니다.

package com.example.andy.myapplication;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.customDialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                ViewGroup viewGroup = findViewById(android.R.id.content);
                View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
                Button buttonOk=dialogView.findViewById(R.id.buttonOk);
                builder.setView(dialogView);
                final AlertDialog alertDialog = builder.create();
                buttonOk.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss();
                    }
                });
                alertDialog.show();
            }
        });
    }
}

코드의 핵심 흐름은 다음과 같습니다. 버튼을 클릭하면 AlertDialog.Builder를 생성하고, LayoutInflater로 customview 레이아웃을 인플레이트하여 다이얼로그의 뷰로 설정합니다. 그런 다음 다이얼로그 안의 [확인] 버튼에 클릭 리스너를 연결해, 버튼을 누르면 dismiss() 메서드로 대화상자가 닫히도록 처리했습니다.

4단계: 커스텀 뷰 레이아웃 작성 (customview.xml)

커스텀 대화상자를 표시하려면 별도의 뷰를 만들어 인플레이트해야 합니다. customview.xml 파일을 새로 생성하고 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Success"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
        <Button
            android:id="@+id/buttonOk"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimary"
            android:text="Ok"
            android:textColor="#FFF" />
    </LinearLayout>
</LinearLayout>

이 레이아웃은 제목 텍스트뷰("Success"), 본문 텍스트뷰, 그리고 [Ok] 버튼으로 구성된 세로형 LinearLayout입니다. 실제 프로젝트에서는 여기에 원하는 디자인과 위젯을 자유롭게 추가할 수 있습니다.

5단계: 앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 초기 화면이 표시됩니다.

초기 화면에서 버튼을 클릭하면 아래와 같이 커스텀 대화상자가 열립니다.

마지막으로 다이얼로그의 [Ok] 버튼을 클릭하면 설정해 둔 dismiss() 동작에 따라 대화상자가 닫히는 것을 확인할 수 있습니다.