[Android] Style 정의하기

Android에서는 Theme과 Style을 통해서 비주얼 속성을 미리 정의하고 재사용 할 수 있습니다. Style은 개별적인 View에 적용되는 비주얼 속성을 정의합니다. Theme은 앱 전체에 적용되는 속성들을 정의합니다. 만약 특정 Theme을 적용하면 앱 전체의 Activity, View가 영향을 받습니다.

Style의 정의 및 사용

1. res/values 폴더에 styles.xml을 추가합니다.
   API 레벨 별로 Style을 적용할 수 있습니다. 예를들어 Android 5.0 (API 21) 이상에서 만 적용되어야 한다면 res/values-v21/styles.xml 형태로 정의할 수 있습니다.
   
2. styles.xml에 Style을 정의해주세요.
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   <code class="hljs xml"><span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span> <span class="hljs-tag"><<span class="hljs-name">resources</span>></span>     <span class="hljs-comment"><!-- parent 속성은 생략할 수 있음. 아래는 Support Library의 TextApperance를 상속받아 재정의하는 예 --></span>     <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"TextDefault"</span> <span class="hljs-attr">parent</span>=<span class="hljs-string">"TextAppearance.AppCompat"</span>></span><span class="xml">         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:textColor"</span>></span>#333333<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:textSize"</span>></span>12sp<span class="hljs-tag"></<span class="hljs-name">item</span>></span>     </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>       <span class="hljs-comment"><!-- parent 속성을 통해 다른 스타일 상속 가능 --></span>     <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"TextError"</span> <span class="hljs-attr">parent</span>=<span class="hljs-string">"TextDefault"</span>></span><span class="xml">         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:textColor"</span>></span>#FF0000<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:background"</span>></span>#EEEEE<span class="hljs-tag"></<span class="hljs-name">item</span>></span>     </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>           <span class="hljs-comment"><!-- Dot(.) 문자를 통해 다른 스타일 확장 가능 --></span>     <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"TextError.Critical"</span>></span><span class="xml">         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:textStyle"</span>></span>bold<span class="hljs-tag"></<span class="hljs-name">item</span>></span>     </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">resources</span>></span> </code>

3. 레이아웃 XML에서 style 속성을 통해 사용할 수 있습니다.
   

   1 2 3 4

   <code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">TextView</span>     <span class="hljs-attr">style</span>=<span class="hljs-string">"@style/TextError"</span>     <span class="hljs-attr">...</span> /></span> </code>

Theme의 정의 및 사용

1. 프로젝트를 생성하면 /res/values/themes.xml이 생성되며 기본적인 Theme이 정의되어 있습니다. themes.xml 파일이 없다면 /res/values/themes.xml 파일을 추가하시면 됩니다.
2. themes.xml 파일을 열고 원하는 형태로 Theme를 정의하시면 됩니다.
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">resources</span> <span class="hljs-attr">xmlns:tools</span>=<span class="hljs-string">"http://schemas.android.com/tools"</span>></span>     <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"BaseAppTheme"</span> <span class="hljs-attr">parent</span>=<span class="hljs-string">"Theme.AppCompat.Light.DarkActionBar"</span>></span><span class="xml">         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"colorPrimary"</span>></span>@color/colorPrimary<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"colorPrimaryDark"</span>></span>@color/colorPrimaryDark<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"colorAccent"</span>></span>@color/colorAccent<span class="hljs-tag"></<span class="hljs-name">item</span>></span>     </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>           <span class="hljs-comment"><!-- parent 속성을 통해 다른 Theme 상속 가능 --></span>     <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"AppTheme"</span> <span class="hljs-attr">parent</span>=<span class="hljs-string">"BaseAppTheme"</span>></span><span class="xml">         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:windowActivityTransitions"</span>></span>true<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:windowEnterTransition"</span>></span>@android:transition/slide_right<span class="hljs-tag"></<span class="hljs-name">item</span>></span>         <span class="hljs-tag"><<span class="hljs-name">item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android:windowExitTransition"</span>></span>@android:transition/slide_left<span class="hljs-tag"></<span class="hljs-name">item</span>></span>     </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">resources</span>></span> </code>

3. Theme은 AndroidManifest.xml 파일에서 적용할 수 있습니다.
   

   1 2 3 4 5 6 7 8 9 10 11

   <code class="hljs xml"><span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span> <span class="hljs-tag"><<span class="hljs-name">manifest</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>     <span class="hljs-attr">package</span>=<span class="hljs-string">"kr.test.testApp"</span>></span>       <span class="hljs-tag"><<span class="hljs-name">application</span>         <span class="hljs-attr">android:label</span>=<span class="hljs-string">"@string/app_name"</span>         <span class="hljs-attr">android:theme</span>=<span class="hljs-string">"@style/Theme.AppTheme"</span> <span class="hljs-attr">...</span>></span>             ...            <span class="hljs-tag"></<span class="hljs-name">application</span>></span> <span class="hljs-tag"></<span class="hljs-name">manifest</span>></span> </code>

References

• Styles and themes : https://developer.android.com/guide/topics/ui/look-and-feel/themes