최종 업데이트 : 2022-03-15 09:47:35 +0900
안드로이드 Theme 변경하기
Theme은 우리나라에서는테마라고 부르고 영어권에서는 띰? 이라고 부른다.- theme은 각각의 뷰 뿐만 아니라 앱, 액티비티, 뷰 계층에 적용되는 스타일의 집합이다.
- 하위 뷰에도 동일한 스타일이 적용되며 뷰가 아닌 상태바, 윈도우 백그라운드 등에도 적용된다.
- theme을 적용하는 이유는 시스템에 일관성 있는 디자인을 보여주기 위함이다.
- 테마의 색상을 변경할 때 Color Tool를 참고하여 수정할수도 있다.
내가 만드는 것보다 Material 팀에서 제공해주는걸 이용하는게 심적으로 편할 것 같다.
현재 앱의 Theme 확인하기
app -> res -> values -> themes.xml에 들어가면 현재 theme의 색상들을 볼 수 있다.
1
<style name="Theme.Example" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
- 위 xml코드의 의미는 이 theme의 이름은
Theme.Example이며Example은 대게 앱의 이름을 나타낸다. theme에서는 클래스와 동일하게 상속 구조를 가지고 있다. 따라서DarkActionBar를 상속받아 하위 theme에서 필요한 부분을 재구현하고 구현하지 않은 부분은 상위 theme을 이용하게 된다.예시로 아래 코드는 상위
DarkActionBar의colorPrimary를 재정의해주고 있는 것이다.1
<item name="colorPrimary">@color/purple_500</item>
현재 앱 테마 변경하기
Color Tool 사이트를 참고하여 나는 정열적인 빨간색과 핑크핑크를 선택해서 아래와 같이 적용했다.
- colors.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<?xml version="1.0" encoding="utf-8"?> <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> <color name="black">#FF000000</color> <color name="white">#FFFFFFFF</color> <color name="red">#FFD50000</color> <color name="red_light">#FFFF5131</color> <color name="red_dark">#FF9B0000</color> <color name="pink">#FFF48FB1</color> <color name="pink_light">#FFFFC1E3</color> <color name="pink_dark">#FFBF5F82</color> </resources>
- themes.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.Example" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/red</item> <item name="colorPrimaryVariant">@color/red_dark</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/pink</item> <item name="colorSecondaryVariant">@color/pink_dark</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> </resources>
다크테마 적용하기
다크테마에서는 light에서 설정한 색보다 밝은 색을 사용한다고 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.Example" parent="Theme.MaterialComponents.DayNight. DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/red</item> <item name="colorPrimaryVariant">@color/red_light</item> <item name="colorOnPrimary">@color/black</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/pink_light</item> <item name="colorSecondaryVariant">@color/pink_light</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> </resources>
- Android 9.0 (API LEVEL 29) 이상부터 사용할 수 있다.
app -> res -> values -> themes.xml(night)또는app -> res -> values-night -> themes.xml에서 찾을 수 있다.- 핸드폰에서 설정을 해서 봐도 되지만
activity_main.xml의 디자인 모드에서 Night로 바꿔 확인해볼 수 있다. (초승달같은 모양)
[참고]
- https://developer.android.com/codelabs/basic-android-kotlin-training-change-app-theme
Comments powered by Disqus.