이 튜토리얼에서는 안드로이드 앱에서 전체 화면 크기의 커스텀 다이얼로그(Full Screen 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.app.Activity;
import android.graphics.Rect;
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.view.Window;
import android.view.WindowManager;
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) {
Rect displayRectangle = new Rect();
Window window = MainActivity.this.getWindow();
window.getDecorView().getWindowVisibleDisplayFrame(displayRectangle);
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);
ViewGroup viewGroup = findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
dialogView.setMinimumWidth((int)(displayRectangle.width() * 1f));
dialogView.setMinimumHeight((int)(displayRectangle.height() * 1f));
builder.setView(dialogView);
final AlertDialog alertDialog = builder.create();
Button buttonOk=dialogView.findViewById(R.id.buttonOk);
buttonOk.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
alertDialog.dismiss();
}
});
alertDialog.show();
}
});
}
}4단계: customview.xml 레이아웃 생성
커스텀 다이얼로그를 표시하려면 별도의 커스텀 뷰(custom view)를 인플레이트(inflate)해서 사용해야 합니다. res/layout 폴더에 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>5단계: 다이얼로그 커스텀 테마 적용
위 MainActivity 코드에서 알럿 다이얼로그(Alert Dialog)에 커스텀 테마를 적용하는 부분은 다음과 같습니다.
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);
커스텀 테마를 사용하기 위해 res/values/styles.xml 파일에 아래와 같이 스타일 태그를 추가합니다.
<style name="CustomAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">@drawable/popup_background</item>
</style>위 코드에서는 다이얼로그 배경으로 popup_background를 지정했습니다. 따라서 drawable 폴더에 popup_background.xml 파일을 생성하고 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
</shape>전체 화면 다이얼로그의 핵심 코드
다이얼로그를 전체 화면 크기로 표시하는 핵심은 현재 화면의 가시 영역(Rect)을 구한 뒤, 다이얼로그 뷰의 최소 너비와 최소 높이를 화면 크기만큼 설정하는 것입니다. 해당 코드는 다음과 같습니다.
Rect displayRectangle = new Rect();
Window window = MainActivity.this.getWindow();
window.getDecorView().getWindowVisibleDisplayFrame(displayRectangle);
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.CustomAlertDialog);
ViewGroup viewGroup = findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
dialogView.setMinimumWidth((int)(displayRectangle.width() * 1f));
dialogView.setMinimumHeight((int)(displayRectangle.height() * 1f));
builder.setView(dialogView);
final AlertDialog alertDialog = builder.create();
Button buttonOk=dialogView.findViewById(R.id.buttonOk);
buttonOk.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
alertDialog.dismiss();
}
});
alertDialog.show();앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기를 컴퓨터에 연결했다고 가정합니다. 안드로이드 스튜디오에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션에서 자신의 모바일 기기를 선택하면, 모바일 기기에 아래와 같은 초기 화면이 표시됩니다.
초기 화면에서 버튼을 클릭하면 아래 그림처럼 전체 화면을 채우는 커스텀 다이얼로그가 열립니다.
