Android Material Design(Style & Theme이란)

Android에서 스타일 및 테마를 사용하면, 웹 디자인의 스타일시트와 유사하게 앱 디자인의 세부사항을 UI 구조 및 동작과 분리할 수 있다.

 

Style

- 단일 View의 모양을 지정하는 속성의 모음.

- 글꼴 색상, 글꼴 크기, 배경 색상 등과 같은 속성을 지정.

 

Theme

- 개별 뷰뿐만 아니라 app, activity 또는 view 계층 구조에 전체적으로 적용되는 속성 모음입니다.

- 테마를 적용하면 뷰에서 지원하는 각 테마 속성이 app, activity, 모든 view에 적용됩니다.

- 테마를 통해  status bar 및 창 배경과 같이 뷰가 아닌 요소에도 스타일을 적용할 수 있습니다.

 

*스타일 및 테마는 res/values/의 스타일 리소스 파일(일반적으로 이름은 styles.xml임)에서 선언

Style와 Theme

테마와 스타일은 유사점이 많지만 용도가 서로 다릅니다.

테마와 스타일은 attribute를 res에 매핑하는 키-값 쌍이라는 동일한 기본 구조를 갖습니다.

 

Style은 특정 view type의 속성을 지정

예를 들어 특정한 하나의 스타일을 사용해 버튼 속성을 지정할 수 있습니다. 스타일에 지정하는 모든 속성은 레이아웃 파일에서 설정할 수 있는 속성입니다. 모든 속성을 스타일로 추출하면 여러 위젯에서 손쉽게 속성을 사용하고 관리할 수 있습니다.

 

Theme는 Style, Layout, Widget 등으로 참조할 수 있는 명명된 리소스 모음을 정의합니다.

Theme는 colorPrimary와 같은 시맨틱 이름에  Android 리소스에 할당합니다.

 

스타일 및 테마는 함께 작동하도록 설계되었습니다.

예를 들어 버튼의 한 부분은 colorPrimary이고 다른 부분은 colorSecondary이도록 지정하는 Style을 만들 수 있습니다.

색상을 실제 정하는것은 Theme에서 한다.

 

device가 야간 모드로 전환되면 앱이 '밝은' 테마에서 '어두운' 테마로 전환하고 모든 리소스 이름의 값을 변경할 수 있습니다.

Style은 시맨틱 이름을 사용하고 특정 색상 정의가 아니기 때문에 변경할 필요가 없습니다.

 

Style 만들기 및 적용

1. 스타일을 고유하게 식별하는 name 속성을 사용하여 <style> 요소를 추가합니다.
2. 정의하려는 각 스타일 속성에 <item> 요소를 추가합니다.각 item의 name은 레이아웃의 XML 속성으로 사용할 속성을 지정합니다. <item> 요소의 값은 이 속성의 값입니다.

생성

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

android:textColor(XML속성) -----  #00FF00(Res)에 맵핑된다.

 

적용하기

<TextView
    style="@style/GreenText"
    ... />

Style에 지정된 각 속성을 View가 가지고 있다면  View에 적용됩니다.

뷰에서 허용하지 않는 모든 속성은 무시되고 적용되지 않습니다

 

*

 

style 속성이 추가된 요소만 스타일 속성을 받습니다. 하위 뷰에는 스타일이 적용되지 않습니다.

하위 뷰가 style을 상속받게 하려면 대신 android:theme 속성을 사용하여 스타일을 적용하세요.

 

개별 뷰에 스타일을 적용하는 대신 일반적으로 전반적인 APP, Activity  또는 View 모음에 스타일을 테마로 적용할 수 있습니다.

 

Style extend 및 Custom

고유한 스타일을 만들 때는 플랫폼 UI 스타일과의 호환성을 유지할 수 있도록 항상 프레임워크 또는 support 라이브러리의 기존 스타일을 확장해야 합니다.

 

- Style을 확장하려면 parent 속성을 사용하여 확장하려는 스타일을 지정

- 상속받은 스타일 속성을 재정의 또는 새 스타일 속성을 추가할 수 있습니다.

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

 

항상 Android support 라이브러리에서 핵심 앱 스타일을 상속받아야 합니다.

지원 라이브러리의 스타일은 각 버전에서 사용 가능한 UI 속성에 맞춰 각 스타일을 최적화함으로써 Android 4.0(API 수준 14) 이상과의 호환성을 제공합니다. 지원 라이브러리 스타일의 이름은 흔히 플랫폼의 기존 스타일과 비슷하지만 AppCompat을 포함합니다.

 

라이브러리 또는 자체 프로젝트에서 스타일을 상속받으려면 위에 표시된 @android:style/ 부분 없이 상위 Style name을 선언해야 합니다. 예를 들어 다음 예는 지원 라이브러리에서 텍스트 모양 스타일을 상속받습니다.

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

 

parent 속성을 사용하는 대신 점 표기법을 통해 Style 이름을 확장하여 스타일을 상속받을 수 있습니다(플랫폼의 스타일 제외).

즉, 상속받으려는 스타일 이름을 마침표로 구분하여 스타일 이름 앞에 붙입니다.

일반적으로 다른 라이브러리의 스타일이 아닌 자체의 고유한 스타일을 확장할 때만 이렇게 해야 합니다.

예를 들어 다음 스타일은 위의 GreenText 스타일에서 모든 스타일을 상속받은 후 텍스트 크기를 증가시킵니다.

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Style을 Theme로 적용

style을 만들 때와 동일한 방식으로 theme를 만들 수 있습니다. 차이점은 적용 방식입니다.

View에서 style 속성으로 스타일을 적용하는 대신 AndroidManifest.xml 파일의 <application> 태그 또는 <activity> 태그에서 android:theme 속성으로 테마를 적용합니다.

 

app 전체에 적용

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

특정 Activity에 적용.

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

App 또는 Activity의 모든 View에는 지정된 테마에 정의된 스타일이 적용됩니다.

View가 스타일에 선언된 속성의 일부만 지원하면 View에는 지원되는 속성만 적용되고 지원되지 않는 속성은 무시됩니다.

5

Android 5.0(API 수준 21) 및 Android 지원 라이브러리 v22.1부터는 레이아웃 파일의 뷰에 android:theme 속성도 지정할 수 있습니다. 이렇게 하면 레이아웃 파일의 뷰 및 모든 하위 뷰의 테마가 수정되며 이 작업은 인터페이스의 특정 부분에서 테마 색상 팔레트를 변경하는 데 유용합니다.

앞의 예는 Android 지원 라이브러리에서 제공하는 Theme.AppCompat과 같은 테마를 적용하는 방법을 보여줍니다. 그러나 일반적으로 개발자는 자체 앱 브랜드에 맞게 테마를 맞춤설정하려고 합니다. 그렇게 하는 가장 좋은 방법은 지원 라이브러리에 있는 이러한 스타일을 확장하고 다음 섹션에 설명된 것처럼 일부 속성을 재정의하는 것입니다.