Android Button 모서리 둥글게 만들기 (feat. Radius)

Android Button 모서리를 둥글게 만드는 방법에 대해 알아봅시다.

다이얼로그 / 버튼 등 각진 모서리는 올드한 이미지를 줍니다.

View 모서리를 둥글게 만들어서 이쁜 layout 을 만들어 봅시다.

본 내용에서는 다이얼로그 화면으로 설명합니다.

Button 모서리 둥글게

 

Android Button 모서리 둥글게 만들기 위한 xml 작성

drawable 영역에 둥근 속성을 추가. (파일명은 share_round_popup.xml 로 설정)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/shape_popup">
    <stroke android:width="10dp"
        android:color="@color/grey_200"/>
    <padding android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        />
    <corners android:radius="15dp"      />
    <solid android:color="@color/grey_200" />
</shape>

중요한 부분은 'android:radius' 부분이며 radius의 값이 클수록 더 둥글게 된다.

 

Android Button 모서리 둥글게 만들기 위한 다이얼로그 작성

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/share_round_popup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#333333"
        app:layout_constraintBottom_toTopOf="@+id/btn_no" />
    <TextView
        android:id="@+id/btn_yes"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="네"
        android:gravity="center"
        android:textSize="16dp"
        android:paddingVertical="16dp"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_no" />

    <TextView
        android:id="@+id/btn_no"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingVertical="16dp"
        android:text="아니요"
        android:textColor="@color/black"
        android:textSize="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_yes"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/popupText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:layout_marginBottom="64dp"
        android:textColor="@color/white"
        android:text="메인 텍스트"
        app:layout_constraintBottom_toTopOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout 영역에 background 속성을 전에 만든 share_roound_popup.xml 로 설정하면 둥근 다이얼 로그를 확인할수 있습니다.

 

Android Button 적용 전/후 비교

변경 전.

변경 후

 

참고사항

다이얼로그에서 모서리 둥글게 할 경우에 둥글게된 부분이 흰색 으로 흔적이 남는 경우가 있다.

이 경우 다이얼로그를 호출하는 부분에서 아래 내용을 추가해주면 된다.

octDialog.setCanceledOnTouchOutside(false);  //다이알로그 밖에 터치했을 때 다이알로그가 꺼짐.(true) 안꺼짐 (false)
octDialog.setCancelable(true);  //다이알로그 취소 가능. ( back버튼 )
octDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);

//아래 2개를 해야 모서리 라운딩 백그라운드 컬러가 없어짐. (중요)
octDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
octDialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
octDialog.show();