스타일 및 테마

스타일View 또는 창의 모양과 형식을 지정하는 속성 모음입니다. 스타일은 높이, 패딩, 글꼴 색상, 글꼴 크기, 배경색 등의 속성을 지정할 수 있습니다. 스타일은 레이아웃을 지정하는 XML과 별개인 XML 리소스에 정의됩니다.

Android의 스타일은 웹 디자인의 cascading 스타일시트와 유사한 철학을 공유합니다. 이를 통해 콘텐츠와 디자인을 구분할 수 있습니다.

예를 들어, 스타일을 사용하여 다음과 같은 레이아웃 XML을 얻을 수 있습니다.

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

또한, 이를 다음으로 변환합니다.

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

스타일과 관련한 모든 특성이 레이아웃 XML에서 제거되어 CodeFont라고 하는 스타일 정의에 추가되었습니다. 이는 그런 다음 style 특성을 사용하여 적용됩니다. 이 스타일에 대한 정의는 다음 섹션에서 확인할 수 있습니다.

테마는 개별 View(위의 예시 참조)가 아니라 전체 Activity 또는 애플리케이션에 적용되는 스타일입니다. 스타일이 테마로 적용된 경우 액티비티 또는 애플리케이션에 포함된 모든 뷰가 자신이 지원하는 각 스타일 속성을 적용합니다. 예를 들어, 액티비티의 테마와 동일한 CodeFont 스타일을 적용할 수 있으며, 그러면 해당 액티비티에 포함된 모든 텍스트에 녹색의 고정 폭 글꼴이 적용됩니다.

스타일 정의

스타일 집합을 생성하려면 프로젝트의 res/values/ 디렉터리에 XML 파일을 저장합니다. XML 파일의 이름은 뭐든지 가능하지만, .xml 확장명을 사용하고 res/values/ 폴더에 저장해야 합니다.

XML 파일의 루트 노드는 <resources>여야 합니다.

생성하려는 각 스타일에 대해, 스타일을 고유하게 식별하는 name(이 특성은 필수임)을 사용하여 <style> 요소를 파일에 추가합니다. 그런 다음, 해당 스타일의 각 속성에 대해 스타일 속성과 이에 대한 원하는 값을 선언하는 name(이 특성은 필수임)을 사용하여 <item> 요소를 추가합니다. <item>의 값은 스타일 속성에 따라 키워드 문자열, 16진수 색상, 다른 리소스 유형에 대한 참조, 또는 기타 값일 수 있습니다. 다음은 단일 스타일을 포함하는 예제 파일입니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

<resources> 요소의 각 하위 요소는 컴파일 시 애플리케이션 리소스 객체로 변환되며, 이 객체는 <style> 요소의 name 특성 값으로 참조될 수 있습니다. 이 예제 스타일은 XML 레이아웃에서 @style/CodeFont로 참조될 수 있습니다(위의 소개 부분 참조).

<style> 요소의 parent 특성은 옵션이며, 이 스타일이 속성을 상속해야 하는 다른 스타일의 리소스 ID를 지정합니다. 그런 후 개발자는 원하는 경우 상속된 스타일 속성을 재정의할 수 있습니다.

액티비티 또는 애플리케이션 테마로 사용하려는 스타일이 XML에서 뷰에 대한 스타일과 정확히 동일하게 정의된다는 점을 유의하세요. 위에 정의된 스타일과 같은 스타일은 단일 뷰에 대한 스타일이나 전체 액티비티 또는 애플리케이션에 대한 테마로 적용될 수 있습니다. 단일 뷰에 대해서나 애플리케이션 테마로 스타일을 적용하는 방법은 뒷부분에 설명되어 있습니다.

상속

<style> 요소에 parent 특성을 사용하여 스타일이 속성을 상속해야 하는 상위 스타일을 지정할 수 있습니다. 이를 사용하여 기존 스타일에서 속성을 상속한 후 변경하거나 추가할 속성만 정의할 수 있습니다. 직접 생성한 스타일에서 상속할 수도 있고 플랫폼에 기본 제공되어 있는 스타일에서 상속할 수도 있습니다. (Android 플랫폼에서 정의한 스타일에서 상속하는 방법에 대한 자세한 내용은 아래에 나와 있는 플랫폼 스타일 및 테마 사용을 참조하세요.) 예를 들어, Android 플랫폼의 기본 텍스트 모양을 상속한 다음 이를 수정할 수 있습니다.

    <style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>

직접 정의한 스타일에서 상속하려는 경우에는 parent 특성을 사용할 필요가 없습니다. 대신, 상속하려는 스타일의 이름을 마침표로 구분하여 새 스타일의 이름 앞에 붙이기만 하면 됩니다. 예를 들어, 위에서 정의한 CodeFont 스타일을 상속하는 새 스타일을 생성하되, 색상을 빨간색으로 만들려면 다음과 같이 새 스타일을 작성하면 됩니다.

    <style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

parent 태그에 <style> 특성이 없지만, name 특성이 CodeFont 스타일 이름(직접 생성한 스타일)으로 시작하므로 이 스타일이 해당 스타일에서 모든 스타일 속성을 상속하는 것을 알 수 있습니다. 그런 후 이 스타일은 android:textColor 속성을 재정의하여 텍스트를 빨간색으로 만듭니다. 이 새 스타일을 @style/CodeFont.Red로 참조할 수 있습니다.

마침표로 이름을 연결하여 원하는 만큼 이러한 상속을 계속할 수 있습니다. 예를 들어, 다음을 사용하여 CodeFont.Red를 더 크게 확장할 수 있습니다.

    <style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>

이는 CodeFontCodeFont.Red 스타일 모두에서 상속한 후 android:textSize 속성을 추가합니다.

참고: 이렇게 이름을 함께 연결하는 상속 기법은 개발자 고유의 리소스로 정의한 스타일에 대해서만 작동합니다. Android 기본 제공 스타일은 이 방법으로 상속할 수 없습니다. TextAppearance와 같은 기본 제공 스타일을 참조하려면 parent 특성을 사용해야 합니다.

스타일 속성

이제 스타일이 어떤 식으로 정의되는지 알았으므로, <item> 요소로 정의되는 스타일 속성 중 어떠한 종류를 사용할 수 있는지 알아봐야 합니다. 여러분은 아마 이러한 속성 일부에 익숙할 것입니다(예: layout_widthtextColor). 물론, 이보다 더 많은 스타일 속성을 사용할 수 있습니다.

특정 View에 적용되는 속성을 찾을 수 있는 가장 좋은 위치는 지원되는 모든 XML 특성 목록이 나와 있는 해당 클래스 참조입니다. 예를 들어, TextView XML 특성 표에 나와 있는 모든 특성을 TextView 요소(또는 해당 서브클래스 중 하나)에 대한 스타일 정의에 사용할 수 있습니다. 참조에 나와 있는 특성 중 하나는 android:inputType입니다. 따라서 여기서는 보통 다음과 같이 <EditText> 요소에 android:inputType 특성을 배치할 수 있습니다.

<EditText
    android:inputType="number"
    ... />

대신, 이 속성을 포함하는 EditText 요소에 대한 스타일을 생성할 수도 있습니다.

<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>

그러면 이제 레이아웃에 대해 작성한 XML이 다음 스타일을 구현할 수 있습니다.

<EditText
    style="@style/Numbers"
    ... />

이 단순한 예제는 일이 늘어나는 것처럼 보일 수 있지만, 더 많은 스타일 속성을 추가하고 다양한 위치에서 스타일을 재사용할 수 있는 기능을 고려할 경우 상당한 이점이 있을 수 있습니다.

모든 사용 가능한 스타일 속성에 대한 자세한 내용은 R.attr 참조에서 확인하세요. 모든 View 객체가 똑같은 스타일 특성을 받는 것은 아니므로 보통 지원되는 스타일 속성에 대한 특정 View 클래스를 참조해야 합니다. 하지만, 일부 스타일 속성을 지원하지는 않는 뷰에 스타일을 적용하면 뷰가 지원되는 속성만 적용하고 다른 속성은 그냥 무시합니다.

그러나, 뷰 요소에서 지원되지 않으며 테마로만 적용될 수 있는 스타일 속성도 일부 있습니다. 이러한 스타일 속성은 전체 창에 적용되며 어떠한 유형의 뷰에도 적용되지 않습니다. 예를 들어, 테마의 스타일 속성은 애플리케이션 제목을 숨기거나, 상태 표시줄을 숨기거나 창의 배경을 변경할 수 있습니다. 이러한 종류의 스타일 속성은 어떠한 View 객체에도 속하지 않습니다. 이러한 테마 전용 스타일 속성을 알아보려면 window로 시작하는 특성과 관련한 R.attr 참조를 검토하세요. 예를 들어, windowNoTitlewindowBackground는 스타일이 액티비티 또는 애플리케이션에 테마로 적용되는 경우에만 유효한 스타일 속성입니다. 스타일을 테마로 적용하는 방법에 대한 자세한 내용은 다음 섹션을 참조하세요.

참고:<item> 요소의 속성 이름에는 android: 네임스페이스를 접두사로 붙여야 합니다. 예를 들면 <item name="android:inputType">과 같이 합니다.

스타일 및 테마를 UI에 적용

스타일을 설정하는 방법은 두 가지가 있습니다.

  • 개별 뷰에 대해 - 레이아웃의 XML에서 뷰 요소에 style 특성을 추가합니다.
  • 전체 액티비티 또는 애플리케이션에 대해 - Android 매니페스트에서 <activity> 또는 <application> 요소에 android:theme 특성을 추가합니다.

스타일을 레이아웃에 포함된 하나의 View에 적용하는 경우 이 스타일에서 정의된 속성은 해당 View에만 적용됩니다. 스타일이 ViewGroup에 적용된 경우 하위 View 요소는 이 스타일 속성을 상속하지않습니다. 즉, 스타일을 직접 적용하는 요소만 해당 속성을 적용합니다. 하지만, 모든 View 요소에 적용되도록 스타일을 적용할 수 있습니다. 이 경우 스타일을 테마로 적용하면 됩니다.

스타일 정의를 테마로 적용하려면 Android 매니페스트에서 Activity 또는 애플리케이션에 스타일을 적용해야 합니다. 이렇게 할 때는 액티비티 또는 애플리케이션 내에 있는 모든 View가 자신이 지원하는 모든 속성을 적용합니다. 예를 들어, 앞의 예에 있는 CodeFont 스타일을 액티비티에 적용하면 텍스트 스타일 속성을 지원하는 모든 뷰 요소가 이들 속성을 적용합니다. 속성을 지원하지 않는 뷰는 이러한 속성을 무시합니다. 뷰가 일부 속성만 지원할 경우 지원되는 속성만 적용합니다.

스타일을 뷰에 적용

다음은 XML 레이아웃에서 뷰에 대한 스타일을 설정하는 방법입니다.

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

이제, CodeFont라는 스타일에 정의된 대로 이 TextView에 스타일이 적용됩니다. (위에 나와 있는 스타일 정의의 샘플을 참조하세요.)

참고: style 특성은 android: 네임스페이스 접두사를 사용하지 않습니다.

테마를 액티비티 또는 애플리케이션에 적용

애플리케이션의 모든 액티비티에 대해 테마를 설정하려면 AndroidManifest.xml 파일을 열고 <application> 태그를 편집하여 스타일 이름을 갖는 android:theme 특성을 포함시킵니다. 예:

<application android:theme="@style/CustomTheme">

애플리케이션에서 하나의 액티비티에만 테마를 적용하려면 android:theme 특성을 <activity> 태그에 대신 추가합니다.

Android가 다른 기본 제공 리소스를 제공하는 것과 마찬가지로, 직접 작성하지 않고 사용할 수 있는 사전 정의된 테마가 많이 있습니다. 예를 들어, Dialog 테마를 사용하고 액티비티를 대화상자처럼 보이게 만들 수 있습니다.

<activity android:theme="@android:style/Theme.Dialog">

또는, 배경을 투명하게 하려면 Translucent 테마를 사용합니다.

<activity android:theme="@android:style/Theme.Translucent">

테마를 좋아하지만 변경하려는 경우에는 테마를 사용자 지정 테마의 parent로 추가하기만 하면 됩니다. 예를 들어, 기존의 조명 테마를 다음과 같이 원하는 색을 사용하도록 수정할 수 있습니다.

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

(참고로, 여기서 색상은 개별 리소스로 제공되어야 합니다. android:windowBackground 특성은 다른 리소스에 대한 참조만 지원하기 때문입니다. android:colorBackground와 달리, 색상 리터럴은 지정할 수 없습니다.)

이제, Android 매니페스트 안에 Theme.Light 대신 CustomTheme을 사용합니다.

<activity android:theme="@style/CustomTheme">

플랫폼 버전으로 기반으로 테마 선택

최신 버전의 Android에는 애플리케이션에 사용할 수 있는 추가 테마가 있으며, 개발자는 이전 버전과의 호환성을 유지하는 동시에 최신 버전의 플랫폼에서 실행하는 동안 이러한 테마를 사용하기를 원할 수 있습니다. 플랫폼 버전에 따라 서로 다른 상위 테마 간을 전환하는 특정 리소스를 사용하는 사용자 지정 테마를 통해 이 작업을 수행할 수 있습니다.

예를 들어, 다음은 사용자 지정 테마에 대한 선언입니다. 이는 그저 표준 플랫폼의 기본 조명 테마일 뿐입니다. res/values 아래에 있는 XML 파일로 이동합니다(대개 res/values/styles.xml).

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>

애플리케이션이 Android 3.0(API 레벨 11) 이상 버전에서 실행 중일 때 이 테마가 최신 홀로그램 테마를 사용하도록 하려면 res/values-v11의 XML 파일에 이 테마에 대한 대체 선언을 추가하되, 상위 테마를 홀로그램 테마로 만들면 됩니다.

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

이제, 다른 테마와 같이 이 테마를 사용해 보세요. 그러면 애플리케이션이 Android 3.0 이상 버전에서 실행 중인 경우 자동으로 홀로그램 테마로 전환합니다.

테마에 사용할 수 있는 표준 특성 목록은 R.styleable.Theme에서 확인할 수 있습니다.

플랫폼 버전이나 기기 구성에 따라 테마 및 레이아웃과 같은 대체 리소스를 제공하는 방법에 대한 자세한 내용은 리소스 제공 문서를 참조하세요.

플랫폼 스타일 및 테마 사용

Android 플랫폼은 애플리케이션에 사용할 수 있는 대규모 스타일 및 테마 모음을 제공합니다. R.style 클래스에서 사용 가능한 모든 스타일에 대한 참조를 확인할 수 있습니다. 여기에 나와 있는 스타일을 사용하려면 스타일 이름에 있는 밑줄을 모두 마침표로 바꿔야 합니다. 예를 들어,"@android:style/Theme.NoTitleBar"를 사용하여 Theme_NoTitleBar 테마를 적용할 수 있습니다.

하지만, R.style 참조가 잘 문서화되어 있지 않고 스타일을 완전하게 설명하지 않으므로, 이러한 스타일과 테마에 대한 실제 소스 코드를 보면 각각이 제공하는 스타일 속성이 무엇인지 더 잘 이해할 수 있을 것입니다. Android 스타일 및 테마를 더 잘 알아보려면 다음 소스 코드를 검토하세요.

이러한 파일은 예제를 통해 정보를 익히는 데 도움이 됩니다. 예를 들어, Android 테마 소스 코드에서 <style name="Theme.Dialog">의 선언을 찾을 수 있습니다. 이 정의에서는 Android 프레임워크에서 사용되는 스타일 대화상자에 사용되는 모든 속성을 볼 수 있습니다.

XML의 스타일 및 테마 관련 구문에 대한 자세한 내용은 스타일 리소스 문서를 참조하세요.

스타일 또는 테마를 정의하는 데 사용할 수 있는 사용 가능한 스타일 특성(예: "windowBackground" 또는 "textAppearance")에 대한 자세한 내용은 스타일을 생성하는 R.attr 또는 해당 View 클래스를 참조하세요.