Theme이란 앱에서 사용할 색, 글꼴 등을 모아둔 것이다.

1. Color

안드로이드 앱에서 사용하는 Color에는 아래와 같은 여러 종류가 있다.

1. Primary : 앱의 메인 색으로 대부분의 컴포넌트에 적용된다

2. Secondary : 앱의 두 번째 메인 색으로 Primary Color를 보완하며 강조하는 색으로 많이 사용된다.

   • Floating Action Button
   • checkbox, radio button 같은 선택 버튼

3. Variant Color: Primary/Secondary와 짙기만 다른 색. 다크 모드등에 사용되거나 여러 컴포넌트의 색을 다양하게 입히고 싶을 때 사용된다.

   • TopAppBar와 System Bar를 구분하기 위해 사용.
     아래 이미지에서 SystemBar에 Variant Color, TopAppBar에 Primary Color가 적용되었음을 알 수 있다
     

4. Background : 앱의 백그라운드 컬러, 스크롤뷰, 리사이클러 뷰의 배경색으로 사용된다

5. Surface : 컴포넌트의 배경 컬러. Card View, Menus등의 배경 컬러로 사용된다

6. Error : 컴포넌트에서 에러가 발생했을 때 사용되는 색

7. On (Color) : 각 색위에 컴포넌트가 나타날 때 사용되는 색. 예를 들어 OnPirmary color는 primary색을 사용하는 컴포넌트 위에 다른 컴포넌트가 나타날 때 사용된다.

2. Theme과 Style 차이

Theme과 Style은 key-value형태로 작성한다는 측면에서 닮아 보인다.유사점이 많은 만큼 실제로 혼용해서 쓰기도 하는 것 같다. Android 공식 문서에서 둘의 차이점을 알 수 있는데 다음과 같다.

Theme
타일, 레이아웃, 위젯 등으로 참조할 수 있는 명명된 리소스 모음
Ex) Color.xml

Style
특정 뷰 유형의 속성
Ex) < style> 태그로 묶인 item 모임, styles.xml에 있는 것들

Application에 Style을 설정할때 어트리뷰트 이름이 Android:Theme이라 더 헷갈린다..

3. Theme과 Style 적용

Theme과 Style은 Application, Activity, View에 모두 적용할 수 있다. 그리고 View > Activity > Application의 순서에 우선해서 Style이 적용된다.

즉 Application에 textColor가 정의되어 있는데 TextView에서 다른 색으로 textColor를 또 지정한면 TextView에서 정의한 색이 실제 뷰에 나타난다.

1) Application Theme

Application Theme은 App에서 사용할 style을 모두 정의한다.

<style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
</style>

Application Theme을 만들었다면 AndroidManifest파일의 < application > 태그를 찾아 android:theme 어트리뷰트를 위 값으로 설정하면 된다

2) View Style

특정 View에서 사용할 Style을 설정한다.

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

View의 style 어트리뷰트를 사용할 style로 설정한다

<com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next"/>

[참고자료]

MDC 103 CodeLab
Color System
Android Developer : 스타일과 테마
Android Developer : Colors