Android 버튼 디자인, 맞춤 버튼, 원형 버튼, 색상

이 자습서에서는 Android 애플리케이션에서 버튼을 사용자 지정합니다. Android 버튼에 대해 잘 모른다면 계속 진행하기 전에 이 튜토리얼을 확인하세요. xml의 버튼에 선택기와 모양을 설정할 것입니다.

Android 버튼 디자인

선택기는 버튼의 다른 상태에 대해 다른 동작을 정의하는 데 사용됩니다. 드로어블 상태란 무엇입니까? 보기의 다음 각 이벤트(버튼 또는 다른 종류의 보기)는 상태 유형입니다.

• state_pressed
• state_selected
• state_focused
• state_enabled

state_focused는 위젯 위로 마우스를 가져갈 때입니다. 일반적으로 에뮬레이터에서만 작동합니다. state_selected는 보기를 선택하기 위한 것입니다. 버튼에서는 작동하지 않습니다. RadioButton과 함께 작동합니다. 일반적으로 버튼에는 정상, 눌림, 활성화의 세 가지 중요한 상태만 있습니다. 선택기의 각 상태에 대해 버튼에 다른 드로어블/색상/모양을 설정할 수 있습니다. 새로운 Android 스튜디오 프로젝트에서 이들 각각의 구현을 시작하겠습니다.

Android 커스텀 버튼 프로젝트 구조

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:state_focused="true" android:drawable="@color/yellow"/>
    <item android:drawable="@color/green"/>
</selector>

위의 코드에서 각 상태는 item 태그를 사용하여 표현됩니다. 선택기 태그는 어느 정도 if - else if 문처럼 작동합니다. 위에서 아래로 모든 조건을 확인합니다. 조건이 일치할 때마다 버튼에 해당 항목을 설정하고 다음 항목 태그 처리를 중지합니다. 세 번째 항목 태그는 기본 태그입니다. 마지막에 보관하는 것이 중요합니다. 맨 위에 유지하면 다른 두 항목 태그가 실행되지 않습니다. activity_main.xml의 버튼에 있는 위의 드로어블 선택기 파일을 다음과 같이 설정합니다.

<Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

선택기는 버튼의 배경 속성에 설정됩니다.

비활성화 버튼 선택기

다음 선택기 btn_bg_selector_disabled.xml는 활성화되지 않은 버튼에 사용됩니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@color/yellow"/>
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:drawable="@color/green"/>
</selector>

위의 선택기가 작동하려면 android:enabled를 false로 지정해야 합니다.

<Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

다른 드로어블이 있는 선택기

버튼 상태에 따라 표시할 다른 드로어블 이미지를 설정할 수 있습니다. 그렇게 하는 선택기 코드는 btn_drawable_selector.xml 파일에 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/sad" android:state_pressed="true"/>
    <item android:drawable="@drawable/happy" android:state_focused="true"/>
    <item android:drawable="@drawable/happy"/>

</selector>

참고: 집중 상태는 스마트폰에서 작동하지 않습니다. 이제 버튼 배경으로 설정된 드로어블 이미지는 너비/높이가 버튼보다 크면 늘어날 수 있습니다. 따라서 드로어블 이미지에 따라 Button 너비/높이를 설정해야 합니다. xml에 하드코딩하거나 프로그래밍 방식으로 드로어블 치수를 가져오고 버튼 위에 설정하여 그렇게 할 수 있습니다. 편의를 위해 여기에서 전자를 수행했습니다.

<Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

ImageButton은 드로어블에 적절하게 맞기 때문에 드로어블을 버튼 배경으로만 표시해야 할 때 사용하기에 이상적인 뷰입니다. ImageButton은 드로어블 이미지의 크기를 조정하는 android:scale 속성과 함께 제공됩니다.

<ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

Android 버튼 색상

선택기의 상태에 따라 버튼의 텍스트 색상을 변경할 수 있습니다. btn_txt_selector.xml의 다음 코드는 이를 수행합니다. 여기서 android:drawable 대신 android:color를 사용해야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/red"/>
    <item android:state_focused="true" android:color="@color/yellow"/>
    <item android:color="@color/green"/>
</selector>

레이아웃의 버튼:

<Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />

Android 버튼 모양

xml 태그 <shape>를 사용하여 버튼에 사용자 정의 모양을 설정할 수 있습니다. 이러한 xml 파일은 drawable 폴더에도 생성됩니다. 모양은 선택기 내에서 사용할 수 있습니다. 모양은 직사각형(기본값), 타원형, 링, 선으로 설정할 수 있습니다. 모양 태그 내에서 가장 많이 사용되는 태그는 다음과 같습니다.

• - 유형(반지름, 선형, 스윕)과 함께 그라디언트의 시작 및 끝 색상 설정
• - 테두리 색상 및 너비 설정
• - 버튼에 단색 설정
• <코너>- 반경 설정

Android 라운드 코너 버튼

btn_shape_round.xml 파일의 xml 코드는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
    <corners android:radius="10dp" />
</shape>

선택기와 마찬가지로 xml 레이아웃의 버튼에 있는 android:background 태그에서 설정할 수 있습니다.

그라디언트가 있는 Android 버튼 모양

다음 btn_shape_gradient.xml 파일에서 그라데이션을 방사형으로 설정했습니다. gradient_radius 속성도 설정해야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/green"
        android:gradientRadius="30dp"
        android:type="radial"
        android:startColor="@color/yellow" />

    <corners android:radius="@dimen/btn_corner_radius" />

    <stroke
        android:width="4dp"
        android:color="@android:color/black" />

</shape>

Android 버튼 모양 및 선택기 함께 사용

btn_selector_shape.xml에는 선택기가 있습니다. 각 항목에는 모양이 지정되어 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" />
            <corners android:radius="20dp" />
            <stroke android:width="2dp" android:color="@android:color/black" />
        </shape>

    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" />
            <corners android:radius="@dimen/btn_corner_radius" />
            <stroke android:width="4dp" android:color="@android:color/black" />
        </shape>

    </item>
</selector>

이것을 버튼에 설정하면 버튼을 클릭할 때 모양이 직사각형에서 타원형으로 변경됩니다. 선형 그래디언트의 각도는 45의 배수로 지정되어야 합니다. 그렇지 않으면 충돌이 발생합니다. 버튼 모양을 캡슐 btn_shape_capsule.xml로 설정하면 선택기 내부의 모양을 캡슐로 설정합니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />

        </shape>

    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow" />
            <corners android:radius="10dp" />
        </shape>

    </item>

</selector>

위의 버튼 예제를 모두 호스팅하는 MainActivity.java 클래스의 코드는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />


        <Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

        <Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

        <Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

        <ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Shapes+Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />

        <Button
            android:id="@+id/btnRoundShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_round"
            android:padding="8dp"
            android:text="ROUND SHAPE" />

        <Button
            android:id="@+id/btnBgShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:text="SHAPE WITH GRADIENT" />


        <Button
            android:id="@+id/btnSelectorShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_selector_shape"
            android:padding="8dp"
            android:text="SELECTOR SHAPE" />


        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_capsule"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

Android 맞춤 버튼 디자인 앱 출력

Android 버튼 디자인 프로젝트 다운로드