이 튜토리얼에서는 안드로이드 앱에서 커스텀 다이얼로그(Custom Dialog)를 만들고 화면에 표시하는 방법을 단계별로 알아봅니다. 기본 AlertDialog에 직접 만든 레이아웃을 적용해 자유롭게 디자인된 다이얼로그를 구현할 수 있습니다.
1단계: 새 프로젝트 생성
Android Studio를 실행하고 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다.
2단계: 메인 레이아웃 작성
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 코드 작성
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;
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) {
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);
builder.setView(dialogView);
AlertDialog alertDialog = builder.create();
alertDialog.show();
}
});
}
}4단계: 커스텀 다이얼로그 레이아웃 만들기
커스텀 다이얼로그를 표시하려면 별도의 뷰(View)를 인플레이트(inflate)해서 다이얼로그에 설정해야 합니다. 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(실행) 아이콘을 클릭합니다. 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 초기 화면이 표시됩니다.
위 결과는 앱의 초기 화면입니다. 여기서 버튼을 클릭하면 아래와 같이 커스텀 다이얼로그가 열리는 것을 확인할 수 있습니다.
핵심 정리
커스텀 다이얼로그 구현의 핵심은 AlertDialog.Builder의 setView() 메서드입니다. LayoutInflater로 직접 만든 XML 레이아웃을 인플레이트한 후 빌더에 전달하면, 기본 다이얼로그 대신 원하는 디자인의 다이얼로그를 손쉽게 표시할 수 있습니다. 이 방식을 활용하면 확인 창, 로딩 창, 입력 폼 등 다양한 형태의 UI를 유연하게 구현할 수 있습니다.