[안드로이드] style 과 theme

😶 style 과 theme 개요

android 에서 style 은 단일 View 모양을 지정하는 속성의 모음이고 theme 는 단일 View 뿐만 아니라 Activity, 앱, 뷰 계층 구조에 전체적으로 적용되는 속성 모음이다. theme 에는 상태 표시줄 및 창 배경과 같이 뷰가 아닌 요소에도 스타일을 적용할 수 있다.

 

 

 

😶 style 적용하기

style 은 단일 View 에 적용할 수 있으며 res/values/styles.xml 파일에 추가할 수 있다. style 은 속성이 추가된 요소(ex. View) 만 적용되고 하위 뷰에는 스타일이 적용되지 않는다. 하위 뷰가 스타일을 받게 하려면 android:theme 속성을 사용해야 한다.

 

res/values/styles.xml )

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

 

이렇게 선언한 style 을 특정 뷰에 적용하는 건 다음과 같다.

<TextView
    style="@style/GreenText"
    ... />

 

 

😶 점 표기법

style 에서 점 표기법을 사용하면 스타일을 확장할 수 있다.

 

다음과 같이 NameStyle 과 NameStyle.Large 스타일이 있다면 NameStyle.Large 는 NameStyle 을 확장한 스타일이 된다. 따라서 NameStyle 의 textSize 와 textColor, background 속성을 전부 다 갖는다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="NameStyle">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/black</item>
        <item name="android:background">#B8B8B8</item>
    </style>

    <style name="NameStyle.Large">
        <item name="android:textSize">30sp</item>
    </style>
</resources>

 

 

😶 theme 적용하기

style 때와 마찬가리로 동일한 방식으로 theme 를 만들 수 있다. 같은 style 이지만 적용 방식이 다르고 정의하는 속성 값들도 앱에서 더 광범위하게 적용할 수 있는 값이다. style 은 단일 View 의 style 속성에 적용하지만 theme 는 android:theme 속성이나 AndroidManifest.xml 파일의 <application> 태그나 <activity> 태그에서 적용할 수 있다.

 

 

예시 ) AndroidManifest.xml

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

 

예시 ) theme 로 사용되는 style (res/values/themes.xml)

기본 속성 외의 상태 바의 색상을 정의할 수도 있다.

<!-- Base application theme. -->
<style name="Theme.myApp" parent="Theme.MaterialComponents.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

 

예시 ) ViewGroup 에 theme

android:theme 속성을 사용하면 하위 뷰까지 같은 스타일로 지정된다. 

 <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:theme="@style/NameStyle">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="사랑해"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="사랑해"/>
</LinearLayout>

 

 

 

스타일 및 테마  |  Android 개발자  |  Android Developers

 

Android styling: themes vs styles

 

Android styling: common theme attributes