[셰이프 드로어블(ShapeDrawable)] 배경변경/테두리만 있는 버튼 만들기

https://sectumsempra.tistory.com/75

[상태 드로어블(StateListDrawable)] 이미지 버튼 만들기 및 이미지 바꾸기

앞 글과 이어지는 내용입니다.

버튼 만들기

drawable 폴더 아래에 새로운 layout파일을 만들고 아래와 같이 입력하자.

 

bbb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    //크기 설정
    <size android:width="200dp" android:height="120dp"/>
    //테두리 설정(선 굵기/색깔)
    <stroke android:width="1dp" android:color="#0000ff"/>
    //채우기 색 설정
    <solid android:color="#aabbff"/>
    //아래 여백
    <padding android:bottom="1dp"/>

</shape>

앞과 같이 버튼을 추가하고 배경을 설정한다.

설정 값과 소스 코드는 아래와 같다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bbb"
        android:text="Button"
        app:backgroundTint="@android:color/transparent"
        app:backgroundTintMode="add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

배경 변경하기

 

이후 배경색을 바꾸기 위해 drawable 폴더 아래에 background.xml파일을 새로 만든다. 코드는 아래와 같다.

 

background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"/>
    
    <corners android:radius="2dp"/>

</shape>

그리고 activity_main에서 배경을 아래와 같이 변경한다.

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"


    android:background="@drawable/background">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bbb"
        android:text="Button"
        app:backgroundTint="@android:color/transparent"
        app:backgroundTintMode="add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />
</androidx.constraintlayout.widget.ConstraintLayout>

테두리만 있는 버튼 만들기

btn.xml파일을 drawable 폴더 아래에 만들어 아래와 같이 코드를 입력한다.

<layer-list>태그를 이용해 여러개의 그래픽을 하나의 XML파일에 넣을 수 있다.

btn.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA"/>
            <solid android:color="#00000000"/>
            <size android:width="200dp" android:height="100dp"/>
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp"
        android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF55DA"/>
            <solid android:color="#00000000"/>
        </shape>
    </item>

</layer-list>

위에서 했던대로 버튼을 하나 만들어 btn2.xml을 background에 지정하면 아래와 같은 화면을 볼 수 있다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"


    android:background="@drawable/background">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bbb"
        android:text="Button"
        app:backgroundTint="@android:color/transparent"
        app:backgroundTintMode="add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn2"
        android:text="Button"
        app:backgroundTint="@android:color/transparent"
        app:backgroundTintMode="add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="170dp" />
</androidx.constraintlayout.widget.ConstraintLayout>