개요
이 튜토리얼에서는 Android 앱에서 커스텀 AlertDialog(사용자 정의 다이얼로그)를 구현하는 방법을 단계별로 알아봅니다. 기본 다이얼로그 대신 자신만의 레이아웃과 디자인을 적용한 다이얼로그를 만들면 앱의 사용자 경험을 한층 더 향상시킬 수 있습니다.
Step 1 — 새 프로젝트 생성
Android Studio에서 새 프로젝트를 생성합니다. 상단 메뉴에서 File → New Project로 이동한 후, 필요한 모든 정보를 입력하여 새 프로젝트를 만듭니다.
Step 2 — activity_main.xml 작성
다음 코드를 res/layout/activity_main.xml에 추가합니다. 화면 중앙에 다이얼로그를 호출하는 버튼 하나를 배치합니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/buttonShowDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@color/colorPrimary"
android:padding="15dp"
android:text="Android Custom Dialog Example"
android:textAllCaps="false"
android:textColor="#ffffff" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 3 — 커스텀 다이얼로그 레이아웃(my_dialog.xml) 작성
커스텀 다이얼로그에 사용할 레이아웃 파일입니다. 다음 코드를 res/layout/my_dialog.xml에 추가합니다.
이 레이아웃은 상단에 성공 아이콘이 있는 헤더 영역, 제목 텍스트, 본문 설명 텍스트, 그리고 확인 버튼으로 구성됩니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/colorPrimary">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_success" />
</RelativeLayout>
<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="@drawable/button_background"
android:text="Ok"
android:textColor="@color/colorPrimary" />
</LinearLayout>
Step 4 — 버튼 배경 드로어블(button_background.xml)
확인 버튼에 적용할 외곽선 스타일의 배경입니다. 다음 코드를 res/drawable/button_background.xml에 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="2dp" android:color="@color/colorPrimary" />
<solid android:color="@android:color/transparent" />
<corners android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" />
</shape>
</item>
</selector>
Step 5 — 성공 아이콘 벡터 드로어블(ic_success.xml)
다이얼로그 헤더에 표시될 체크 아이콘입니다. 다음 코드를 res/drawable/ic_success.xml에 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:height="24dp"
android:viewportHeight="512"
android:viewportWidth="512"
android:width="24dp">
<path android:fillColor="#FFFFFF" android:pathData="M468.907,214.604c-11.423,0 -20.682,9.26
-20.682,20.682v20.831c-0.031,54.338 -21.221,105.412 -59.666,143.812c38.417,38.372
-89.467,59.5 -143.761,59.5c-0.04,0 -0.08,0 -0.12,0C132.506,459.365 41.3,368.056 41.364,255.883c0.031,
-54.337 21.221,-105.411 59.667,-143.813c38.417,- 38.372 89.468,-59.5 143.761,
-59.5c0.04,0 0.08,0 0.12,0c28.672,0.016 56.49,5.942 82.68,17.611c10.436,4.65 22.659,
-0.041 27.309,-10.474c4.648,-10.433 -0.04,-22.659 - 10.474,-27.309c-31.516,-14.043
-64.989,-21.173 -99.492,-21.192c-0.052,0 -0.092,0 - 0.144,0c-65.329,0 -126.767,25.428
-172.993,71.6C25.536,129.014 0.038,190.473 0,255.861c-0.037,65.386 25.389,126.874 71.599,
173.136c46.21,46.262 107.668,71.76 173.055,71.798c0.051,0 0.092,0 0.144,0c65.329,0 126.767,
-25.427 172.993,-71.6c46.262,-46.20971.76,-107.66871.798,-173.066v20.842C489.589,
223.864 480.33,214.604 468.907,214.604z"/>
<path android:fillColor="#FFFFFF" android:pathData="M505.942,39.803c-8.077,- 8.076 -21.172,-8.076
-29.249,0L244.794,271.701l-52.609,-52.609c-8.076,-8.077 -21.172,-8.077 -29.248,0c-8.077,8.077
-8.077,21.172 0,29.249l67.234,67.234c4.038,4.0399.332,6.058 14.625,6.058c5.293,0 10.586,-2.019 14.625,
-6.058L505.942,69.052C514.019,60.975 514.019,47.88 505.942,39.803z"/>
</vector>
Step 6 — MainActivity.java 작성
버튼 클릭 시 커스텀 다이얼로그를 띄우는 핵심 로직입니다. 다음 코드를 src/MainActivity.java에 추가합니다.
핵심은 LayoutInflater를 사용해 my_dialog.xml 레이아웃을 인플레이트한 뒤, AlertDialog.Builder의 setView() 메서드로 해당 뷰를 설정하는 것입니다.
package com.app.sample;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.buttonShowDialog).setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
showCustomDialog();
}
});
}
private void showCustomDialog() {
ViewGroup viewGroup = findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(this).inflate(R.layout.my_dialog, viewGroup, false);
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setView(dialogView);
AlertDialog alertDialog = builder.create();
alertDialog.show();
}
}
Step 7 — AndroidManifest.xml 설정
다음 코드를 Manifests/AndroidManifest.xml에 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.app.sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 Android 스마트폰이 컴퓨터와 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run(실행) 아이콘을 클릭하세요. 실행 옵션 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 기본 화면이 표시됩니다.
마무리
지금까지 Android에서 커스텀 AlertDialog를 구현하는 전체 과정을 살펴보았습니다. 이 방식을 활용하면 단순 확인창뿐 아니라 로그인 폼, 진행 상태 안내, 에러 알림 등 다양한 형태의 다이얼로그를 자유롭게 디자인할 수 있습니다. 필요에 따라 버튼 클릭 리스너를 추가하거나, 다이얼로그 크기와 애니메이션을 조절해 더욱 세련된 UI를 구현해 보세요.