[Android] Custom Dialog / 커스텀 다이얼로그

 

 

지난 다이얼로그 포스팅에 이어

다이얼로그를 커스텀 하는 방법에 대해 알아보자.

 

 

---

 

 

전체적인 프로세스

 

 

 

✅ drawable 패키지에 Resource xml 파일 만들기

 

다이얼로그의 전체적인 테마를 만들어준다고 생각하면 된다.

 

배경색, 테두리, 둥근 모서리 등을 커스텀 할 수 있다.

 

 

✅ layout 패키지에 다이얼로그 전용 Layout xml 파일 만들기

 

다이얼로그의 전체적인 뼈대를 만들어 준다.

 

그리고 위에서 만들었던 Drawable Resource를

최상위 View Group에 background 속성으로 지정해주면 된다.

 

 

✅ java 파일에서 layout 파일 inflate()

 

getLayoutInflater()를 통해 위에서 만들었던 Layout 파일을 inflate() 해준다.

 

 

✅ Dialog 객체에 setView()

 

위에서 inflate() 해준 View를 setView() 메서드의 인수로 넣어준다.

 

 

---

 

drawable 패키지에 Resource xml 파일 만들기

 

 

위 부제 그대로 drawable 패키지에 xml 파일을 만들어주자.

 

custom_dialog_background.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/main2" />

    <stroke
        android:width="5dp"
        android:color="@color/main1" />

    <corners android:radius="20dp" />
    
</shape>

 

<shape> 태그 안에 각 속성을 작성해 주면 된다.

 

<solid> - 전체적인 색상

원하는 색상을 작성해주면 된다.

본인은 colors.xml 파일에 지정해둔 색상을 사용하였다.

 

<stroke> - 테두리

width 속성으로 테두리 두께를 지정해주고,

테두리 색상을 지정해주면 된다.

 

<corners> - 모서리

radius 속성으로 모서리를 얼마나 깎을지 지정해 주면 된다.

 

 

 

---

 

layout 패키지에 다이얼로그 전용 Layout xml 파일 만들기

 

 

이번엔 layout 파일을 만들어주자.

 

custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_dialog_background"
    >

                <TextView
                    ...
                    />

                <EditText
                    ...
                    />

                <EditText
                    ...
                    />

                <Button
                    ...
                    />


</LinearLayout>

 

다이얼로그의 뼈대가 될 부분이다.

 

하위 View는 본인이 원하는 View를 배치하면 그만이고,

최상단 View Group의 (여기서는 LinearLayout에 해당)

background 속성에 만들어준 Drawable Resource 파일을 작성해주자.

 

 

*사실 단순한 커스텀은 Layout xml 파일만으로도 할 수 있다.

테두리, 둥근 모서리 등을 사용할 것이 아니라면

' drawable 패키지에 Resource xml 파일 만들기 '

파트는 건너뛰어도 무방하다.

 

 

 

---

 

java 파일에서 layout 파일 inflate()

 

 

java 파일에서 방금 위에서 만들어준 layout 파일을 View로 실체화 해준다.

 

DialogActivity.java

View dialogView = getLayoutInflater().inflate(R.layout.custom_dialog, null);

EditText nameEditText = dialogView.findViewById(R.id.dialogNameEditText);
EditText ageEditText = dialogView.findViewById(R.id.dialogAgeEditText);
Button submitButton = dialogView.findViewById(R.id.dialogSubmitButton);

 

해당 Layout의 View를 참조할 수 있다.

 

 

 

---

 

Dialog 객체에 setView()

 

 

위에서 만들어준 View 객체를 Dialog 객체에

setView() 메서드를 통해 넣어준다.

 

DialogActivity.java

AlertDialog dialog = new AlertDialog.Builder(DialogActivity.this)
    .setView(dialogView)
    .create();
    
    
// 원하는 시점에
dialog.show();

 

 

 

여기까지 따라왔다면 대충 다음과 같은 느낌으로 나타날 것이다.

 

 

전체적인 디자인은 생각한대로 잘 나왔지만,

모서리가 상당히 불편해진다;

 

radius 속성으로 모서리가 잘 깎였지만,

뒷 배경이 하얗게 남은 모습을 볼 수 있다.

 

 

다음과 같은 코드를 추가해주면 해결할 수 있다.

AlertDialog dialog = new AlertDialog.Builder(DialogActivity.this)
    .setView(dialogView)
    .create();

// 이 부분 추가
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

dialog.show();

 

 

결과는 다음과 같다.

 

 

모서리가 깔끔해졌다.

 

 

 

---

 

 

 

다이얼로그 커스텀은 되게 간단할 줄 알았는데

의외로 생각했던 것보다는 복잡했던 것 같다.

 

찾아보니 이 포스팅에서 설명한 방법 말고도 2~3가지 방법이 더 있었다.

다음에 기회가 생기면 시도해 보고 포스팅해 봐야겠다.