[Android, Kotlin] Custom Dialog with Interface

1. 기능 구현

• 기본 Dialog 가 아닌 이쁘게 꾸며본 Dialog를 만들어보자

  • 프로필 이미지(ImageView) 동그라미로 꾸미기
  • 구독, 좋아요 버튼 꾸미기
  • Interface 를 활용하여 Dialog 의 이벤트를 Main 에서 처리하도록 해보자.

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. ViewBinding 사용을 위한 build.gradle 설정

android { 
    // 뷰 바인딩 옵션 활성화 
    viewBinding { 
        enabled = true 
        } 
    }

 
 

4. activity_main.xml (메인화면 구성)

• TextView : "메인화면"
• Button : "다이얼로그 띄우기"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="메인화면"
        android:textSize="50dp"
        android:textColor="#000"
        />
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/dialog_button"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="다이얼로그 띄우기"
        android:textSize="30dp"
        />
</LinearLayout>

 
 

5. 꾸미기 위한 Layout xml 만들기

res -> drawable 위치에 만들어 놓자.

• rounded_corner_green.xml : 구독 버튼용
• rounded_corner_purple.xml : 좋아용 버튼용
• rounded_corner_sky_white.xml : 배경 테두리용

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#5AF173"/>    
    <corners android:radius="20dp"/>    
</shape>

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#D148DC"/> 
    <corners android:radius="20dp"/>    
</shape>

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#fff"/>
    <stroke android:width="5dp" android:color="#5DFAFA" />
    <corners android:radius="40dp"/>    
</shape>

 
 

6. custom_dialog.xml

• 동그라미 이미지뷰 사용 : Github 참조/사용법 확인

build.gradle 의 dependencies 에 implementation 추가)

dependencies {
    // 동그라미 뷰
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

• 만들어 놓은 rounded_corner_xxx.xml 을 적용해보자.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="@drawable/rounded_corner_sky_white"
        android:padding="40dp"
        >
        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/popo_podo"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="개발하는 겨울시인"
            android:layout_marginVertical="20dp"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="#000"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="안녕하세요!\n구독!좋아요!\n부탁드립니다!!"
            android:textAlignment="center"
            android:lineSpacingExtra="5dp"
            android:layout_marginBottom="10dp"
            />
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/subscribe_btn"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:text="구독!"
            android:textColor="#fff"
            android:textStyle="bold"
            android:layout_marginVertical="10dp"
            android:background="@drawable/rounded_corner_green"
            />
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/like_btn"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:text="좋아요!"
            android:textColor="#fff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/rounded_corner_purple"
            />
    </LinearLayout>
</FrameLayout>

 
 

7. MyCustomDialogInterface.kt

• MyCustomDialog 에서의 이벤트를 MainActivity에 알려주기 위한 Interface를 만들어 보자.

interface MyCustomDialogInterface {

    fun onLikedBtnClicked()
    fun onSubscribeBtnClicked()

}

 
 

8. MyCustomDialog.kt

• Dialog() 를 상속받고 MyCustomDialogInterface를 param 으로 가지는 클래스를 만들어보자.
• ViewBinding Class 로 custom_dialog.xml 를 inflate
• init{} 안에서 param 으로 전달받은 myCustomDialogInterface 초기화
• subscribeBtn, likeBtn 에 setOnClickListener 설정이벤트 발생 시, MainActivity에서 override 할 인터페이스 메소드 호출을 통해 처리하도록 한다.

class MyCustomDialog(context:Context, myCustomDialogInterface: MyCustomDialogInterface) : Dialog(context) {

    private var mBinding : CustomDialogBinding? = null
    private val binding get() = mBinding!!

    private var myCustomDialogInterface:MyCustomDialogInterface? = null

    // 인터페이스 연결
    init {
        this.myCustomDialogInterface = myCustomDialogInterface
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = CustomDialogBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 배경 투명하게
        window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        binding.subscribeBtn.setOnClickListener {
            this.myCustomDialogInterface?.onSubscribeBtnClicked()
        }
        binding.likeBtn.setOnClickListener {
            this.myCustomDialogInterface?.onLikedBtnClicked()
        }
    }
}

 
 

9. MainActivity.kt

• 인터페이스 상속 추가 : MyCustomDialogInterface
• ViewBinding Class 로 custom_dialog.xml 를 inflate
• dialogButton 에 setOnClickListener 설정MyCustomDialog 생성하고 show()를 통해 보여주자.
• Interface Override Method인터페이스 상속으로 반드시 구현해야하는 메소드 2개에 대한 구현

  1. onSubscribeBtnClicked() / 2. onLikedBtnClicked() : Toast 를 통해 메세지를 띄워보자.

class MainActivity : AppCompatActivity(), MyCustomDialogInterface {

    private var mBinding : ActivityMainBinding? = null
    private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.dialogButton.setOnClickListener {
            val myCustomDialog = MyCustomDialog(this, this)
            myCustomDialog.show()
        }
    }
    // Subscribe Button Clicked
    override fun onSubscribeBtnClicked() {
        Toast.makeText(this, "구독버튼 클릭", Toast.LENGTH_SHORT).show()
    }

    // Like Button Clicked
    override fun onLikedBtnClicked() {
        Toast.makeText(this, "좋아요버튼 클릭", Toast.LENGTH_SHORT).show()
    }
}

 
 

10. 실행결과

 
 

11. Reference

유튜버 개발하는 정대리님 : 커스텀 다이얼로그와 인터페이스 활용