웹사이트 검색

안드로이드 머티리얼 디자인 버튼 스타일 디자인

오늘 우리는 머티리얼 디자인의 Android 버튼에 대해 자세히 알아보고 버튼의 다양한 스타일을 보여주는 애플리케이션을 개발할 것입니다.

Android 머티리얼 디자인 버튼

Android의 버튼은 우리의 작업을 애플리케이션과 통신하는 데 사용됩니다. 머티리얼 디자인의 도입으로 Lollipop 이전 장치와도 호환되는 다양한 종류의 버튼 스타일이 도입되었습니다. 레이아웃의 기본 버튼은 다음과 같이 정의됩니다.

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.journaldev.androidbuttonstyling.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NORMAL BUTTON"/>

</LinearLayout>

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:layout_margin="12dp"
        android:text="BACKGROUND COLOR BUTTON"/>

android:backgroundTint 특성을 사용하여 Button의 색조 색상을 설정할 수도 있습니다. Android SDK > 21인 경우에만 작동합니다.

Android 버튼 스타일링

머티리얼 디자인에서 버튼은 크게 다음 두 가지 범주에 속합니다.

  • 돋움 버튼 - 기본 버튼입니다.
  • 플랫 버튼 - 테두리가 없습니다. 일반적으로 대화 상자에서 사용됩니다

다음은 사용 가능한 기본 버튼 스타일입니다.

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"

style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

마지막 두 스타일은 플랫 버튼 범주에 속합니다.

Android 컬러 버튼

다음과 같은 방법으로 버튼에 기본 컬러 버튼 스타일을 설정할 수 있습니다.

<Button
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="COLORED BUTTON"
        android:padding="8dp" />

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorButtonNormal">@color/myBlue</item>
        <item name="colorControlHighlight">@color/myWhite</item>

    </style>

</resources>

<style name="PrimaryColoredButton" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorButtonNormal">@color/myPeach</item>
        <item name="colorControlHighlight">@color/myRed</item>
</style>

참고: 버튼의 스타일을 색상으로 부모로 설정해야 합니다. 다음 코드는 테마가 설정된 xml의 버튼에 대한 것입니다.

<style name="PrimaryColoredButton" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorButtonNormal">@color/myPeach</item>
        <item name="colorControlHighlight">@color/myRed</item>
</style>

애플리케이션의 기본 버튼 스타일을 변경하려면 styles.xml 내부의 AppTheme 스타일에서 android:buttonStyle 속성을 사용할 수 있습니다.

Android 플랫 버튼

플랫 버튼은 Borderless 또는 Borderless일 수 있습니다. Colored Borderless.Colorless는 텍스트 색상이 색상이어야 함을 의미합니다. 배경이 아닙니다. styles.xml 파일에 다음 스타일을 추가합니다.

<style name="FlatButton" parent="Theme.AppCompat.Light">
        <item name="android:textColor">@color/myPeach</item>
        <item name="colorControlHighlight">@color/myRed</item>
</style>

이제 xml 레이아웃에 다음 버튼을 추가합니다.

<Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:padding="8dp"
        android:text="BORDERLESS BUTTON" />

    <Button
        android:theme="@style/FlatButton"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:padding="8dp"
        android:text="BORDERLESS BUTTON STYLED" />

Android 머티리얼 디자인 버튼 프로젝트 다운로드