Android styling: common theme attributes

Theme

테마를 활용하면 스타일과 레이아웃을 유연하게 작성하고, 변경을 격리할 수 있다.

특히, 테마 속성(theme attributes)을 사용하여 리소스를 간접적으로 참조하는 방식을 추천한다.
이를 통해 리소스를 다양하게 변경할 수 있으며(예: 다크 테마 지원), 레이아웃이나 스타일에서 직접적으로 리소스를 참조하거나 하드코딩된 값 사용을 피하고, 테마 속성을 사용하는 것이 권장된다.

theme attributes

1. Colors

Material 색상 시스템은 의미론적 이름을 사용해 색상을 정의한다.

Material 색상 속성

• ?attr/colorPrimary: 앱의 주요 브랜딩 색상.
• ?attr/colorSecondary: 앱의 보조 브랜딩 색상, 일반적으로 주요 브랜딩 색상의 밝은 보완 색상.
• ?attr/colorOn[Primary, Secondary, Surface 등] : 지정된 색상 위에서 대비를 이루는 색상.
• ?attr/color[Primary, Secondary] Variant: 주어진 색상의 대체 음영.

• ?attr/colorSurface: 카드, 시트, 메뉴와 같은 구성 요소 표면 색상.
• ?android:attr/colorBackground: 화면 배경색상.
• ?attr/colorError: 오류 표시 색상.

• ?attr/colorPrimarySurface:
  라이트 테마에서는 colorPrimary, 다크 테마에서는 colorSurface로 전환.

기타 색상 속성

• ?attr/colorControlNormal: 기본 상태 아이콘/컨트롤 색상.
• ?attr/colorControlActivated: 활성 상태의 아이콘/컨트롤 색상.
• ?attr/colorControlHighlight:
  컨트롤 하이라이트(예: 리플 효과, 리스트 선택자)에 적용되는 색상.

• ?android:attr/textColorPrimary: 주요 텍스트 색상.
• ?android:attr/textColorSecondary: 보조 텍스트 색상.

2. Dimens

• ?attr/listPreferredItemHeight: 리스트 항목의 표준(최소) 높이.
• ?attr/actionBarSize: 툴바 높이.

3. Drawables

• ?attr/selectableItemBackground:
  클릭 가능한 항목의 리플/하이라이트 효과. 포그라운드(foregrounds)로도 유용하게 사용 가능.

• ?attr/selectableItemBackgroundBorderless: 경계 없는 리플.
• ?attr/dividerVertical: 수직 구분선 드로어블.
• ?attr/dividerHorizontal: 수평 구분선 드로어블.

4. TextAppearances

Material 텍스트 스타일 스케일

• ?attr/textAppearanceHeadline1: 기본 96sp 크기의 light 텍스트
• ?attr/textAppearanceHeadline3 : 기본 48sp 크기의 regular 텍스트.
• ?attr/textAppearanceHeadline6: 기본 20sp 크기의 medium 텍스트.

• ?attr/textAppearanceSubtitle1: 기본 16sp 크기의 regular 텍스트
• ?attr/textAppearanceBody1: 기본 16sp 크기의 regular 텍스트.

• ?attr/textAppearanceButton: 버튼 텍스트 (기본 14sp, 대문자).

5. Shape

Material의 모양 시스템은 구성 요소의 모양을 쉽게 정의하고, 테마와 연동하여 유지보수를 단순화한다.
커스텀 구성 요소에서 모양을 설정할 때는 MaterialShapeDrawable을 사용하는 것이 가장 안정적이며, 권장된다.

• ?attr/shapeAppearanceSmallComponent:
  버튼, 칩, 텍스트 필드 등에 사용 (기본 4dp 둥근 모서리).

• ?attr/shapeAppearanceMediumComponent:
  카드, 다이얼로그, 날짜 선택기 등 중간 크기 구성 요소에 사용. (기본 4dp 둥근 모서리).

• ?attr/shapeAppearanceLargeComponent:
  바텀 시트 등에 사용 (기본 0dp 모서리, 사각형).

6. Button Styles

Material에서 제공하는 버튼 스타일:

• ?attr/materialButtonStyle:
  기본 Contained(포함) 스타일 버튼.
  별도로 스타일을 지정하지 않으면 이 스타일이 기본값으로 적용된다.

• ?attr/borderlessButtonStyle:
  텍스트 스타일 버튼을 위한 속성.
  테두리나 배경 없이 깔끔한 텍스트만 표시된다.

• ?attr/materialButtonOutlinedStyle:
  Outlined(외곽선) 스타일 버튼을 위한 속성.
  버튼 외곽에 테두리가 있는 스타일로, 비활성화된 느낌을 줄 때 자주 사용된다.

7. Floats

• ?android:attr/disabledAlpha:
  위젯이 비활성화 상태일 때 적용되는 기본 투명도(alpha) 값.

• ?android:attr/primaryContentAlpha:
  주요 콘텐츠(foreground 요소)에 적용되는 투명도 값.

• ?android:attr/secondaryContentAlpha:
  보조 콘텐츠(secondary 요소)에 적용되는 투명도 값.

App vs Android namespace

• ?android:attr/foo:
  Android 플랫폼에서 제공하는 속성
  따라서,네임스페이스(android:)를 명시적으로 참조해야 한다.
  ex. 레이아웃 속성에서 android:id 참조

• ?attr/bar:
  AppCompat 또는 Material Design Components에서 제공
  이러한 속성은 앱에 컴파일되므로, 별도의 네임스페이스를 지정할 필요가 없다.
  ex. app:baz를 레이아웃에서 사용하는 방식과 유사.

비플랫폼 속성을 사용하는 것이 더 유리하다 더 넓은 호환성을 보장하며, 모든 API 레벨에서 사용할 수 있도록 백포트(backport)되었기 때문이다.
백포트란? 이전 API 레벨에서도 해당 기능을 사용할 수 있도록 지원하는 것

Do It Yourself

테마 속성으로 추상화되지 않은 요소는 사용자 정의 테마 속성을 생성하여 관리할 수 있다.
테마 속성을 사용하면 같은 레이아웃을 기반으로 화면별로 유연하게 커스터마이징할 수 있다.
이는 유지보수성을 높이고 코드 중복을 줄이는 데 도움이 된다

• Android 플랫폼 테마 속성
• AppCompat 속성
• Material Design Components 속성

출처 : https://medium.com/androiddevelopers/android-styling

테마 속성을 사용하면 dark theme와 같은 테마를 더 쉽게 지원할 수 있으며,
더 유연하고 유지보수 가능한 코드를 작성할 수 있게 된다

Material Design 시스템의 고급 기능을 활용하려면 MDC를 사용해야 합니다.
특히, Material의 모양(Shape) 시스템이나 다크 테마 전환, MaterialButton 스타일과 같은 고급 기능은 MDC가 필요합니다.
?attr/shapeAppearanceSmallComponent,
?attr/materialButtonOutlinedStyle 등은 MDC에서만 동작합니다.