Lesson 13: App UI Design

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

Android styling

Android styling system

• 앱의 시각적 디자인을 지정하는 데 사용됩니다.
• 앱 전체에서 일관된 모양을 유지하는 데 도움이 됩니다.
• 계층적.(상위 스타일에서 상속하고 특정 속성을 재정의할 수 있음)

Precedence of each method of styling

각 스타일 지정 방법의 우선순위를 요약합니다. 예를 들어 Theme에서 텍스트 크기를 18sp, Style에서 16sp, View에서 직접 14sp로 설정합니다. 속성은 Theme나 Style에서 정의된 것보다 우선되기 때문에 최종적으로 14sp로 표시됩니다.

Themes

• 앱 전반에 걸쳐 광범위하게 유용한 Named 리소스 모음.
• Named 리소스를 테마 속성이라고 합니다.
• 예시
  • 테마를 사용하여 앱에서 기본 및 보조 색상 정의.
  • 테마를 사용하여 Activity 내 모든 텍스트의 기본 글꼴 설정.

Declare a theme

res/values/themes.xml 파일에서 <style> 태그를 사용해서 테마를 정의합니다.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
    <item name="colorPrimary">@color/orange_500</item>
    <item name="colorPrimaryVariant">@color/orange_700</item>
    <item name="colorSecondary">@color/pink_200</item>
    <item name="colorSecondaryVariant">@color/pink_700</item>
    ...
</style>

Apply a theme

AndroidManifest.xml에서 사용할 때

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

layout file에서 사용할 때

<ConstraintLayout …
    android:theme="@style/Theme.MyApp">

Refer to theme attribute in a layout

특정 리소스 대신 테마 속성을 직접 참조하여 보다 유연한 레이아웃과 스타일을 정의할 수 있습니다.

layout file에서 사용할 때

<LinearLayout …
    android:background="?attr/colorSurface">

?attr/themeAttributeName 구문 사용.

?attr/colorPrimary
?attr/colorPrimaryVariant

Styles

테마의 범위를 광범위한 View 및 ViewGroup 집합에 적용하는 것을 살펴봤습니다. 보다 좁은 범위의 View에서 시각적 속성을 정의하려면 스타일을 사용할 수 있습니다.

• 스타일은 특정 뷰 속성의 모음입니다.
• View의 타입.
• 스타일을 사용하여 글꼴 크기 또는 색상과 같은 재사용 가능한 정보 컬렉션을 만듭니다.
• 앱 전체에서 사용되는 공통 디자인의 작은 집합을 선언하는데 유용합니다.

Declare a style

res/values/styles.xml 파일에 정의합니다.

<style name="DescriptionStyle">
    <item name="android:textColor">#00FF00</item>
    <item name="android:textSize">16sp</item>
    ...
</style>

Apply a style

레이아웃 파일 내에서 스타일 속성을 지정하여 View에 적용합니다.

<TextView
    style="@style/DescriptionStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/description_text" />

Refer to theme attribute in a style

스타일 내에서도 테마 속성을 참조할 수 있습니다.

<style name="DescriptionStyle">
    <item name="android:textColor">?attr/colorOnSurface</item>
    <item name="android:textSize">16sp</item>
    ...
</style>

View attributes

• View attributes을 사용하여 각 View애 대해 명시적으로 설정.
• 스타일이나 테마를 통해 설정할 수 있는 모든 속성을 사용할 수 있습니다.
• 여백, 패딩 또는 제약 조건과 같은 사용자 지정 또는 일회성 디자인에 사용.

Resources directory

Provide alternative resources

앱에는 각기 다른 장치 구성에 맞게 여러 리소스 집합이 포함될 수 있습니다. 사용자가 앱을 실행하면 Android는 기기와 가장 잘 맞는 리소스를 자동으로 선택하고 로드합니다.

• values-b+es : 장치 locale이 스페인어로 설정된 경우.
• values-night : 다크모드가 켜졌을 경우.

Color resources

앱 전체에서 색상의 이름을 지정하고 표준화하는 방법.

res/values/colors.xml 파일에서 설정.

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    ...
</resources>

#AARRGGBB 형식의 16진수 색상으로 지정합니다.

Dimension resources

레이아웃에서 수치 값의 이름을 지정하고 표준화하는 방법.

res/values/dimens.xml 파일에서 설정.

<resources>
    <dimen name="top_margin">16dp</dimen>
</resources>

레이아웃에서는 @dimen/<name>으로, 코드에서는 R.dimen.<name>으로 참조합니다.

<TextView …
    android:layout_marginTop="@dimen/top_margin" />

Typography

Scale-independent pixels (sp)

• density-independent pixels (dp)에 해당하는 텍스트.
• 텍스트 사이즈 sp로 지정(사용자 선호도 고려)
• 사용자는 설정 앱에서 글꼴 및 디스플레이 크기를 조정할 수 있습니다.

Type scale

• 앱과 콘텐츠에 대해 응집력 있는 방식으로 함께 작동하도록 설계된 스타일 세트
• 각각의 목적이 있는 재사용 가능한 텍스트 카테고리를 포함합니다.(예: 헤드라인, 부제목)

TextAppearance

• typeface (android:fontFamily)
• weight (android:textStyle)
• text size (android:textSize)
• capitalization (android:textAllCaps)
• letter spacing (android:letterSpacing)

Examples using TextAppearance

<TextView
   ...
   android:textAppearance="@style/TextAppearance.MaterialComponents.Headline1"
   android:text="@string/title" />

<TextView
   ...
   android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
   android:text="@string/body_text" />

Customize your own TextAppearance

기존 스타일을 상속하고 필요한 부분을 수정할 수도 있습니다.

<style name="TextAppearance.MyApp.Headline1"
        parent="TextAppearance.MaterialComponents.Headline1">
    ...
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">64sp</item>
    <item name="android:letterSpacing">0</item>
    ...
</style>

Use a custom TextAppearance in a theme

테마에서 새로운 스타일을 사용할 수 있습니다.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
   ...
   <item name="textAppearanceHeadline1">@style/TextAppearance.MyApp.Headline1</item>
   ...
</style>

Localization

사용자의 언어와 문화에 따라 대체 리소스를 제공할 수 있는 기능.

Localize your app

• localized된 부분을 앱의 핵심 Kotlin 기능과 분리합니다.
  • 예: 사용자에게 보이는 문자열을 string.xml에서 가져옵니다.
• 사용자가 앱을 실행하면 Android 시스템은 기기의 locale에 따라 로드할 리소스를 선택합니다.
• locale별 리소스를 찾을 수 없는 경우 Android는 기본 리소스로 대체합니다.

Support different languages and cultures

• 지원할 locale을 결정합니다.
• res 디렉토리에 locale 별 디렉토리를 생성합니다.
  • <resource type>-b+<language code>[+<country code>]
  • 예: layout-b+en+US, values-b+es
• 해당 디렉토리에 locale 별 리소스를 제공합니다.

Support languages that use RTL scripts

• 사용자는 오른쪽에서 왼쪽(RTL) 스크립트를 사용하는 언어를 선택할 수 있습니다.
• manifest 앱 태그에 android:supportsRtl="true"를 추가합니다.
• 레이아웃 파일에서 왼쪽과 오른쪽을 시작과 끝으로 변경합니다.
  • android:paddingLeft -> android:paddingStart
• 문자열을 현지화하고 메시지의 텍스트 형식을 지정합니다.
• -ldrtl(layout-direction-right-to-left) 및 -ldltr(layout-direction-left-to-right) 리소스 디렉토리 한정자를 사용하여 특정 리소스를 제공할 수도 있습니다.