안드로이드 다른 모양 버튼(custom button) 만들기

버튼의 모양을 다르게 만들기 위해서는 추가 작업이 필요하다. 

또한 버튼에 이미지를 넣고 그 이미지의 크기를 제어하자.

 

<최종 화면>

버튼

---

우선 xml 작업을 하자.

android:drawableLeft, android: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"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        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.784">
        <Button
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:text="left"
            android:drawableLeft="@drawable/icon"
            android:paddingLeft="20dp"
           android:background="@drawable/left_btn_backgound"/>
        <Button
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:text="right"
            android:drawableLeft="@drawable/icon"
            android:paddingLeft="20dp"
            android:background="@drawable/right_btn_backgound"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
 

이제 버튼에 들어갈 android:background(배경)와 android:drawableLeft(이미지)에 들어갈 아이콘을 만들것이다.

 

<배경 만들기>

res->drawable (마우스 우클릭) -> new -> Drawable Resource File

파일 이름을 임의로 정하고, Root element를 shape로 해주자.

left_btn_backgound.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#FFFFFF"/>
        <stroke
            android:width="1dp"
            android:color="#0A64BE" />
    <size
        android:width="200dp"
        android:height="36dp" />
    <corners android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"/>
</shape>
 

 

<이미지 만들기>

File -> New -> Vector Asset을 들어가자. 

(만약 이미지 파일이 있다면 아래 작업을 넘어가도 된다. 이미지 파일을 drawable에 추가.)

임의로 아무 이미지를 선택해서 추가했다.

res->drawable (마우스 우클릭) -> new -> Drawable Resource File

파일 이름을 임의로 정하고, Root element를 layer-list로 해주자.

icon.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_android_black_24dp"
        android:width="30dp"
        android:height="30dp"/>
</layer-list>
 

---

이렇게 해주면 이미지의 크기도 변경이 가능하며 버튼에 text도 쓸 수 있다.