Android Custom Dialog 만들기, Fullscreen Dialog 만들기, Transparent Dialog 만들기

무엇을 원하는가?

이런 Dialog를 만들고 싶다면?

 

1. 완전 커스텀한 뷰의 Dialog
2. 전면을 다 차지하는 Dialog

---

단계별로 따라 하기

1. AlertDialog 사용하기

Dialog를 띄우는 가장 쉬운 방법은 AlertDialog.Builder가 제공하는 기능만 사용하는 것입니다.

setTitle, setMessage, setPositiveButton을 조합하면 위의 Dialog와 일치하는 정보를 제공할 수 있습니다.

 

개발 기간이 너무 촉박하다면 이 코드를 사용해보세요.

AlertDialog.Builder(context)
    .setTitle("로그인 해볼까요?")
    .setMessage("로그인 후 사용할 수 있는 기능입니다.")
    .setPositiveButton("로그인 하기", null)
    .setNegativeButton("x") { dialog, _ -> dialog.dismiss() }
    .show()

참고로, dialog.dismiss()를 호출하여 취소 버튼을 눌렀을 때, Dialog를 종료시키는 이벤트를 연결할 수 있습니다.

 

이 코드의 결과는 아래와 같습니다. 👇

 

심심하지만 정보는 있다.

 

2. CustomView 사용하기

너무 심심합니다. 커스텀 뷰를 사용해 봅시다. 다음과 같은 순서로 따라오시면 됩니다.

1. 보여주고 싶은 커스텀 뷰 xml을 작성한다.
2. LayoutInflater를 이용해서 xml을 로드한다.
3. AlertDialog.Builder.setView를 사용해서 나만의 view를 지정한다.

alert_dialog.xml이라는 파일을 만들었다고 가정하겠습니다.

val layoutInflater = LayoutInflater.from(context)
val view = layoutInflater.inflate(R.layout.alert_dialog, null)

AlertDialog.Builder(context)
    .setView(view)
    .show()

 

엉성한 커스텀 뷰

 

뒤에 배경이 이상한데 이건 조금 있다가 커스텀 Style 지정하기에서 다루도록 하고, 우선 custom view를 사용하실 땐, 아까 봤던 AlertDialog.Builder의 인터페이스는 사용할 수 없습니다. (setTitle, setMessage, setPositiveButton)

 

view객체에 직접 연결해 주도록 합니다.

val layoutInflater = LayoutInflater.from(context)
val view = layoutInflater.inflate(R.layout.alert_dialog, null)

val alertDialog = AlertDialog.Builder(context)
    .setView(view)
    .create()

val textTitle = view.findViewById<TextView>(R.id.text_title)
val textSubtitle =  view.findViewById<TextView>(R.id.text_subtitle)
val buttonConfirm =  view.findViewById<TextView>(R.id.button_confirm)
val buttonClose =  view.findViewById<View>(R.id.button_close)

textTitle.text = "로그인 해볼까요?"
textSubtitle.text = "로그인 후 사용할 수 있는 기능입니다."
buttonConfirm.text = "로그인 하기"
buttonClose.setOnClickListener {
    alertDialog.dismiss()
}

alertDialog.show()

주의하실 것은 alertDialog의 참조를 얻기 위해서 create()를 사용해 Dialog 객체를 만드는 과정과 Dialog를 노출하는 show()를 분리했다는 것입니다.

(create 없이 show 하면 객체를 생성하고 바로 보여줍니다.)

취소 버튼을 누를 때 dialog객체의 dismiss를 호출해 주어야 하니 어쩔 수 없는 선택입니다.

 

이제 좀 덜 심심합니다. 좀 불편하긴 하지만

 

3. 커스텀 Style 지정하기

뒤의 배경으로 나오는 것은 우리가 어떤 Theme을 적용하고 있느냐에 따라서 다를 겁니다. 시스템마다 AlertDialog를 보여주는 스타일이 다르게 구현되어 있을 수 있거든요.

우리는 다음과 같은 목적이 있다면 스타일을 건드려야 합니다.

• 전체 화면을 다 차지하고 싶다.
• Dim 처리를 하고 싶다. (백그라운드 회색)
• Dialog가 센터에 나오도록 처리하고 싶다.

<style name="CustomAlertDialog">
    <!-- 꽉 채운 화면에 배경 없이 (custom view 영역만 보일 것이다.) -->
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowMinWidthMajor">100%</item>
    <item name="android:windowMinWidthMinor">100%</item>

    <!-- Dim 처리 -->
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:colorBackground">?attr/colorBackgroundFloating</item>
    <item name="android:windowCloseOnTouchOutside">true</item>

    <!-- Dialog 가 센터에 나오도록 하자. -->
    <item name="android:windowIsFloating">true</item>
</style>

각 속성의 필요한 설명은 주석에 달았고 속성 이름으로 적절히 유추할 수 있을 겁니다.

 

그리고 마지막으로 적용해줍니다.

// Builder의 두번째 인자로 Dialog Style 지정하기
val alertDialog = AlertDialog.Builder(context, R.style.CustomAlertDialog)
    .setView(view)
    .create()

Great! 🙌이제 자유롭게 커스텀 Dialog를 사용하세요.