[안드로이드] 커스텀 다이얼로그(Custom Dialog) 둥글게 모서리 디자인하기 (feat. 투명 버튼) 초간단 예제

안드로이드 개발 예제

 

Android Custom Dialog

 

커스텀 다이얼로그

 

둥근 모서리 초간단 예제

 

Rounded Edge

 

Transparent Background

 

 

 

 

 

 

 

 

복잡한 설명은 다 생략하고 최대한 간단히 알아보자.

 

1. 둥근 모서리 구현 과정

2. 예제

 

 

이전 포스팅 내용을 그대로 이어서

다이얼로그의 모서리를 둥글게 만들어 보자.

 

버튼도 기본 버튼은 너무 못나서

투명 버튼으로 대체해보자.

 

 

<이전 포스팅>

사용자 정의 커스텀 다이얼로그 (Custom Dialog) 초간단 예제

2020/08/15 - [Android 개발/android :: 예제] - [안드로이드] 사용자정의 커스텀 다이얼로그 (Custom Dialog) 초간단 예제

 

 

 

 

1. 둥근 모서리 구현 과정

 

1) drawable 파일 생성하기

모서리를 둥글게 만들기 위해서는

둥근 배경을 만들어야 한다.

배경 파일은 drawable 파일로 만들면 된다.

 

[app] - [res] - [drawable]에서 우클릭하여

[New] - [Drawable Resource File]을 누르면 된다.

 

일단 File name만 작성해서 Ok를 누른다.

(예제에서 파일명: round_bg)

 

 

2) 투명한 버튼 만들기

xml 파일에서 각 버튼에 딱 한 줄만 추가하면 된다.

style="@style/Widget.AppCompat.Button.Borderless"

 

 

3) 투명한 배경 만들기

자바 코드에서 배경을 투명하게 설정해줘야 한다.

그렇지 않으면 둥근 모서리 뒤로 하얀 사각 배경이 깔린다.

 

투명 전 (둥근 테두리 아래로 흰색 사각 배경이 있다.)

 

투명 후 (흰색 사각 배경이 없어진다.)

 

이전 포스팅에서 딱 1줄만 추가된다.

dialog01.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

 

 

 

 

2. 예제

 

1) activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
 
    <Button
        android:id="@+id/showBtn"
        android:text="show!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>

이전 포스팅과 동일하다.

 

 

 

2) dialog01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/round_bg"
    android:orientation="vertical">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:text="앱을 종료하시겠습니까?" />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <Button
            android:id="@+id/noBtn"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="아니오" />
 
        <Button
            android:id="@+id/yesBtn"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="네" />
    </LinearLayout>
 
</LinearLayout>

최상위 LinearLayout에

-> android:backgroud="@drawable/round_bg" 추가 (둥근 배경)

 

각 Button에

-> style="@style/Widget.AppCompat.Button.Borderless" 추가 (투명 버튼)

 

TextView가 답답해서 padding을 30으로 두었다.

 

 

 

3) round_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 배경색 -->
    <solid android:color="#ffffff"/>
    <!-- 테두리 색 및 두께 -->
    <stroke android:color="#eeeeee" android:width="2dp" />
    <!-- 모서리 둥글게-->
    <corners android:radius="15dp"/>
 
    <!-- 각각 적용하려면
    <corners android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
    -->
</shape>
 

각각 원하는 값으로 디자인하면 된다.

solid: 배경색

stroke: 테두리

corners: 모서리 각도

 

 

 

4) MainActivity.java

public class MainActivity extends AppCompatActivity {
 
    Dialog dilaog01; // 커스텀 다이얼로그
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        dilaog01 = new Dialog(MainActivity.this);       // Dialog 초기화
        dilaog01.requestWindowFeature(Window.FEATURE_NO_TITLE); // 타이틀 제거
        dilaog01.setContentView(R.layout.dilaog01);             // xml 레이아웃 파일과 연결
 
        // 버튼: 커스텀 다이얼로그 띄우기
        findViewById(R.id.showBtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showDialog01(); // 아래 showDialog01() 함수 호출
            }
        });
    }
 
    // dialog01을 디자인하는 함수
    public void showDialog01(){
        dilaog01.show(); // 다이얼로그 띄우기
        dilaog01.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); // 투명 배경
        /* 이 함수 안에 원하는 디자인과 기능을 구현하면 된다. */
 
        // 위젯 연결 방식은 각자 취향대로~
        // '아래 아니오 버튼'처럼 일반적인 방법대로 연결하면 재사용에 용이하고,
        // '아래 네 버튼'처럼 바로 연결하면 일회성으로 사용하기 편함.
        // *주의할 점: findViewById()를 쓸 때는 -> 앞에 반드시 다이얼로그 이름을 붙여야 한다.
 
        // 아니오 버튼
        Button noBtn = dilaog01.findViewById(R.id.noBtn);
        noBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 원하는 기능 구현
                dilaog01.dismiss(); // 다이얼로그 닫기
            }
        });
        // 네 버튼
        dilaog01.findViewById(R.id.yesBtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 원하는 기능 구현
                finish();           // 앱 종료
            }
        });
    }
}

이전 포스팅과 비교하면

딱 1줄이 추가된다.

 

showDialog01() 안에 한 줄만 추가해주자.

dialog01.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

 

 

 

그런데!

setBackgroundDrawable 부분에서 Warning이 뜬다.

NullPointerException이 일어날 수 있다는 오류인데

실제로 써보면 웬만해선 안 일어나지만

불안하면 다음과 같이 바꿔줘도 된다.

 

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
    Objects.requireNonNull(dilaog01.getWindow()).setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}

 

 

 

5) 사용 화면

 

 

 

전문적인 디자인은 아니지만 많이 깔끔해졌다.

 

개발하는데 전문 디자이너가 없다면 그냥 흰색 검정색이 최고다.