[번역] 안드로이드 스타일 적용하기 : 일반적인 테마 속성

이 글은 안드로이드 공식 Medium 블로그에 있는 글인 Android Styling: Common Theme Attributes를 개인적인 학습을 목적으로 번역 한 글입니다.

혹시 번역이 틀렸거나 의견이 있으시면 아래 댓글로 알려주세요.

 

---

안드로이드 스타일 적용하기 이전 글에서, 테마와 스타일의 차이점에 대해서 알아보고, 테마가 바뀌더라도 역할을 나누어 유연한 스타일과 레이아웃을 구현하는 법에 대해서 알아보았습니다.

https://hckim999.tistory.com/32

[번역] 안드로이드 스타일 적용하기 : 테마와 스타일

우리는 리소스를 간접적으로 활용하기 위해 테마 속성을 사용하기를 권장합니다. 그렇게 함으로써 다크테마와 같은 테마들을 사용할 수 있습니다. 리소스를 레이아웃 혹은 스타일에 직접 참조한다면(심지어, 리소스들을 하드코딩 한다면), Theme attribute를 대신 사용해야 하는 것은 아닌지 검토 해 보세요.

 

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<ConstraintLayout ...
  android:foreground="@drawable/some_ripple"
  android:background="@color/blue" />

기존 코드

 

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<ConstraintLayout ...
  android:foreground="?attr/selectableItemBackground"
  android:background="?attr/colorPrimarySurface" />

개선 코드

 

하지만, 어떤 Theme attribute를 사용해야 할까요? 이 글에서는 이것에 대해서 중점적으로 다룰 예정입니다. 이 글에서 다룰 attribute 목록들은 Material, AppCompat 그리고 플랫폼에서 왔습니다. 모든 theme attribute에 대해서는 다루지 않으며, 나머지 theme attribute들은 글 끝부분에 걸어둔 소스 링크를 살펴보길 권합니다. 이 글에서 다루는 attribute들은 제가 주로 사용하는 것들 위주로 다루었습니다.

Colors, 색상

앱을 구현할 때 사용할 수 있는 색상에 대한 의미있는 이름(semantic name)의 대다수는 Material color system에서 왔습니다. (theme의 attrs로 구현할 수 있습니다.)

 

 

• ?attr/colorPrimary 앱에서의 주요 브랜딩 색상 (primary branding color)
• ?attr/colorSecondary 앱에서의 두번째 브랜딩 색상 (secondary branding color), 주로 주요 브랜딩 색상(colorPrimary)을 좀 더 돋보이게 하기 위해서 사용 함
• ?attr/colorOn[Primary, Secondary, Surface etc] 각 이름들의 색상에 대비되는 색상
• ?attr/color[Primary, Secondary]Variant 각 이름들의 색상의 그림자
• ?attr/colorSurface 컴포넌트(카드, 시트, 메뉴 등)의 표면 색상.
• ?android:attr/colorBackground 스크린의 백그라운드.
• ?attr/colorPrimarySurface 라이트 테마에서는 colorPrimary이고, 다크테마에서는 colorSurface를 나타내는 색상.
• ?attr/colorError 에러를 표시하기 위한 색상.

또 다른 유용한 색상.

• ?attr/colorControlNormal 아이콘 및 컨트롤의 보통 상태에 적용되는 색상.
• ?attr/colorControlActivated 아이콘/컨트롤이 활성화 상태일 때(예를 들어 체크박스가 체크되었을 때) 적용되는 색상
• ?attr/colorControlHighlight 컨트롤을 강조할 때 적용되는 색상(예를 들어 리플, 리스트에서 선택된 것)
• ?android:attr/textColorPrimary 가장 눈에 띄어야 할 텍스트 색상
• ?android:attr/textColorSecondary 두번째 텍스트 색상.

Dimens, 길이 및 넓이, 두께

• ?attr/listPreferredItemHeight 리스트에서 각 아이템의 일반적인(혹은 최소의) 높이
• ?attr/actionBarSize 툴바의 높이

Drawables

• ?attr/selectableItemBackground 리플 혹은 상호작용 가능한 아이템에 대한 강조(앞면 색상을 위해서도 유용함)
• ?attr/selectableItemBackgroundBorderless 경계선이 없는 리플
• ?attr/dividerVertical 요소 별 구분하는 세로 직선
• ?attr/dividerHorizontal 요소 별로 구분하는 가로 직선

TextAppearances

Material에는 텍스트 크기에 따라 앱에서 사용되는 텍스트 스타일을 각각 종류별 정의 해 두었습니다. textAppearance로 설정이 가능하게 테마 속성으로 제공됩니다.

 

 

• ?attr/textAppearanceHeadline1 96sp 사이즈의 light
• ?attr/textAppearanceHeadline2 60sp 사이즈의 light
• ?attr/textAppearanceHeadline3 48sp 사이즈의 regular
• ?attr/textAppearanceHeadline4 34sp 사이즈의 regular
• ?attr/textAppearanceHeadline5 24sp 사이즈의 regular
• ?attr/textAppearanceHeadline6 20sp 사이즈의 medium
• ?attr/textAppearanceSubtitle1 16sp 사이즈의 default
• ?attr/textAppearanceSubtitle2 14sp 사이즈의 medium
• ?attr/textAppearanceBody1 16sp 사이즈의 regular
• ?attr/textAppearanceBody2 14sp 사이즈의 regular
• ?attr/textAppearanceCaption 12sp 사이즈의 regular
• ?attr/textAppearanceButton 글자가 모두 대문자로 표시되는 14sp 사이즈의 medium
• ?attr/textAppearanceOverline 글자가 모두 대문자로 표시되는 10sp 사이즈의 regular

Shape, 모양

Material Design에서는 small, medium 그리고 large component로 구현 된 shape system을 사용합니다. 직접 구현한 component에 shape 속성을 설정한다면,  MaterialShapeDrawable를 background로 사용하는게 좋을거라는걸 기억 해 두세요.

 

 

• ?attr/shapeAppearanceSmallComponent Button, Chip, Text Field 등에서 사용됩니다. 모서리에 4dp 곡선 처리를 합니다.
• ?attr/shapeAppearanceMediumComponent Card, Dialog, Date Picker 등에서 사용됩니다. 모서리에 4dp 곡선처리를 합니다. 
• ?attr/shapeAppearanceLargeComponent Bottom Sheet 등에 사용됩니다. 모서링 0dp 곡선처리를 하기때문에 사각형으로 표시됩니다.

버튼 스타일

너무 세분화했다고 생각하실 수도 있지만, Material에서는 버튼을 Contained, Text and Outlined 3가지 타입으로 구분합니다. MDC(Material Design Component)는 MaterialButton을 style 속성으로 설정할 수 있게 제공합니다.

 

• ?attr/materialButtonStyle 기본
• ?attr/borderlessButtonStyle 텍스트 스타일의 버튼
• ?attr/materialButtonOutlinedStyle 외부 선만 있는 버튼

 

Floats

• ?android:attr/disabledAlpha alpha 설정을 제거
• ?android:attr/primaryContentAlpha foreground에 alpha를 설정
• ?android:attr/secondaryContentAlpha secondary에 alpha 적용

 

App vs Android namespace

몇몇 속성은 ?android:attr/foo 와 같이 속성을 참조하고 있고, 몇몇 다른 속성들은 ?attr/bar와 같이 속성을 참조하는 것을 보셨을 것입니다. 그 이유는 몇몇 속성은 안드로이드 플랫폼에 선언이 되어 있기 때문입니다. 그렇기 때문에 안드로이드쪽을 참조하고 싶으면, namespace로 참조 해야 합니다. (view 속성의 android:id로 접근하는 것과 같습니다). 어플리케이션을 AppCompat, MDC와 같이 컴파일 할 때 정적 라이브러리에서 참조되는 것이 아니라면, namespace가 필요하지 않습니다. (app:baz를 layout에서 사용하는 것과 비슷합니다.) colorPrimary와 같은 몇몇 속성들은 platform과 library 모두에 중복적으로 선언되어 있습니다. 이런 경우 모든 API 버전에서 사용 하기 위해서, non-platform(플랫폼에 종속되지 않는 것) 즉, 하위 호환을 지원해 주기 위해서 라이브러리에서 중복 선언됩니다. In these cases, I’ve listed the non-platform versions above.

 

모든 API 버전에서 사용할 수 있는 non-platform 속성을 사용하세요

 

추가 자료

사용 가능한 테마 속성의 전체 리스트는 아래 소스를 참조하세요.

• Android platform
• AppCompat

Material Design Component는 아래와 같습니다.

• Color
• Shape
• Type

직접 정의하기

테마에 따라서 직접 정의하고 싶은 테마 속성이 있을수도 있습니다. 걱정 하지 마세요. 직접 정의하면 됩니다! Google I/O app에는 컨퍼런스 세션 목록을 보여주는 두 화면이 있습니다.

컨퍼런스 세션 리스트를 보여주는 두 화면

두 화면은 대체적으로 비슷하지만, 왼쪽 화면은 시간을 표시하기 위해서 왼쪽에 공간을 둬야 하고, 오른쪽 화면은 그럴 필요가 없습니다. 우리는 이를 테마 속성에 아이템 정렬을 추상화하여 구현함으로써, 우리는 테마를 이용해 다양하게 나타내고, 다른 화면에서 같은 레이아웃을 사용하였습니다.

 

1. attrs.xml에 theme 속성을 정의합니다. 

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<attr name="sessionListKeyline" format="dimension" />

2. 다른 테마에 다른 값(different values)을 각각 지정합니다.

https://github.com/google/iosched/blob/89df01ebc19d9a46495baac4690c2ebfa74946dc/mobile/src/main/res/values/themes.xml#L51

https://github.com/google/iosched/blob/89df01ebc19d9a46495baac4690c2ebfa74946dc/mobile/src/main/res/values/themes.xml#L78

 

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<style name="Theme.IOSched.Schedule">
  …
  <item name="sessionListKeyline">72dp</item>
</style>

<style name="Theme.IOSched.Speaker">
  …
  <item name="sessionListKeyline">16dp</item>
</style>

3. 각각의 화면에 Theme 속성을 사용합니다.

 

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<Guideline …
  app:layout_constraintGuide_begin="?attr/sessionListKeyline" />

 

모든것에 궁금증을 가지세요.

어떤 theme 속성이 사용이 가능한지 알게 됨으로써, 레이아웃, 스타일, 혹은 Drawable을 구성할 때 사용할 수 있습니다. theme 속성을 사용함으로써, 테마(다크테마 등)를 제공하는데 훨씬 수월해지고, 훨씬 유연하고 유지보수 쉽게 구현할 수 있습니다. 좀 더 깊게 알아보기 위해서, 다음 글을 참조 해 주세요.

https://medium.com/androiddevelopers/android-styling-prefer-theme-attributes-412caa748774

Android Styling: Prefer Theme Attributes