안드로이드 Button style 버튼 꾸미기

안드로이드 Button style 버튼 꾸미기

결과

결과

Layout 코드

<?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:background="@android:color/holo_orange_light"
    android:orientation="vertical">


    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_empty"
        android:text="배경 투명"
        android:textColor="@android:color/background_light"
        android:textSize="24sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style"
        android:text="버튼 스타일"
        android:textColor="@android:color/background_light"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/text_style"
        android:gravity="center"
        android:text="텍스트 뷰"
        android:textColor="#FFA159"
        android:textSize="24sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style"
        android:gravity="center"
        android:text="텍스트 뷰"
        android:textSize="24sp"
        android:textStyle="bold" />
</LinearLayout>

---

파일 생성

- drawable -> resource file을 생성한다.

- 스타일을 쉽게 만들기 위하여 아래 사이트를 이용한다.

https://angrytools.com/android/button/

스타일 제작

- 원하는 스타일을 만든 후 해당 부분을 복사하여 파일에 복사해준 후 사용한다.

투명 Style 코드

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="10dp"
        />
    <solid
        android:color="#00FFFFFF"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#898989"
        />
</shape>

ㄴ 백그라운드를 투명하게 하기 위해서는 solid 부분을 지워주면 된다. 해당 예제는 투명도를 조절하는 방법을 보이기 위하여 작성하였다.

- corners : 사각형 각 모서리부분을 둥글게 만든다. 값이 클수록 각이 없어진다.

- solid : 배경 Color를 지정한다. 여기서는 투명하게 하기 위해서 Color를 "#00FFFFFF" 로 주었다. 

- size : 사이즈를 지정한다. height를 바꾸어주면 높이가 바뀌는것을 확인할 수 있다.

- stroke : 테두리 선을 지정한다. width로 길이를 color로 색을 지정한다.

---

Style 코드

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="8dp"
        />
    <solid
        android:color="#CCFFDD"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#2FEDE7"
        />
</shape>

- padding : padding 값을 지정해 줄수 도 있다.