[Android] xml의 button에 모서리 둥글게, 배경색 설정하는 방법

xml 파일에 버튼을 추가해 다음과 같이 코드를 작성해 줬다.

<Button
        android:id="@+id/btn_newMatching_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:text="Submit"
        android:textSize="20dp"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/frame_newMatching" />

 

이런 버튼이 생성되었는데, 저 버튼의 radius를 15로, 배경색을 검은색으로 변경해보려고 한다.

---

0. 미리 보는 결과 화면

---

1. 우선 res> drawable 파일에 새로운 Drawable Resource File을 생성해 준다.

나중에 알아보기 쉽게 둥근 검은색 버튼(사각형)이라는 의미로 파일명을 'btn_round_black'으로 작성해 주었다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/black"/>
    <corners
        android:radius="15dp"/>
</shape>

그리고 위와 같이 코드를 작성해 주었다.

 

참고로, 코드를 작성하면서 이 파일이 어떤 결괏값을 내는지를 오른쪽 화면에서 확인할 수 있다.

원하는 대로 radius가 15이며 배경색이 검은색인 사각형이 잘 만들어졌다.

---

2. xml 파일의 button에 drawable 파일을 적용시켜 준다.

아까 작성한 button 부분에 android:background="@drawable/btn_round_black"를 추가해 준다.

 

<Button
        android:id="@+id/btn_newMatching_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/btn_round_black"
        android:text="Submit"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/frame_newMatching" />

수정이 완료된 xml의 button 코드이다. (배경색이 검은색이라 글자색을 흰색으로 바꿔주는 코드도 한 줄 추가했다.)

 

원하는 대로 radius와 배경색이 잘 적용된 버튼 디자인을 볼 수 있다.

 

+) 만약 2번 내용을 작성했는데도 원하는대로 적용이 안 되었다면 res> values> themes> themes.xml의 파일을 수정해줘야 한다.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.프로그램 파일명" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

이렇게 작성되어 있는 코드에서 3번째 줄의 MaterialComponents를 AppCompat로 수정해 준다.

 

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.프로그램 파일명" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

수정이 완료된 themes.xml 코드이다.