[Android] 상태 바(Status Bar), 기본 배경 색상 변경하기

안드로이드 앱에서 배경 색을 바꿀 수 있다는 것을 아시나요?

안드로이드 앱에서 기본 배경색을 지정할 수 있다.

만약 그 방법을 모르거나 바꿀 수 있는지 조차 몰랐다면 내가 만드는 앱의 메인 배경 색이 파란색일 때 모든 화면의 background 속성을 파란색으로 지정했을 것이다.

앱의 한 부분에 여러 번 색을 덧칠하면 필요 없는 작업을 하는 것이고, 앱의 성능이 안 좋아질 수 있다.

그래서 앱의 대부분 화면이 파란색이라면 아예 앱의 배경 색을 파란색으로 만들면 모든 화면마다 배경 색을 지정하지 않아도 돼서 편하고, 성능 상으로도 더 좋고... 

내가 말이 긴 이유는 방법이 너무 간단해서 이다.. ㅋㅋ (바람잡이 중)

 

배경 색을 바꾸는 것은 그림을 그리는 도화지 색 자체를 바꾸는 것처럼 생각하면 좋다.

 

배경 색을 바꿔보자

values > themes.xml

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
	...
    
    <item name="android:windowBackground">@color/background</item>
</style>

간단히 현재 적용되고 있는 테마에 windowBackground 속성에 색을 지정해주면 된다.

@color의 색을 참조해 사용할 수도 있고, 직접 HEX 값으로 지정할 수도 있다.

 

상태 바의 색도 바꿔보자

상태 바(Status Bar)는 앱 맨 위에 있는 시계, 와이파이/네트워크/블루투스/배터리 등 각종 아이콘들이 들어가는 공간이다.

상태 바의 색도 변경할 수 있다.

바로 알아보자.

values > themes.xml

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
	...
    <item name="android:windowBackground">@color/background</item>
    
    // 상태 바 변경
	<item name="android:statusBarColor" tools:targetApi="l">@android:color/yellow</item>
    <item name="android:windowLightStatusBar">true</item>
    
</style>

statusBarColor 속성으로 색상을 상태 바의 색상을 지정할 수 있다.

만약 상태 바를 투명으로 하고 싶다면 #000000 으로 지정하면 된다. (맨 앞의 2개 자리가 불투명도를 뜻한다)

 

그리고 windowLightStateBar 속성이 보인다.

이 속성은 상태 바가 밝은 색인지 어두운 색인지를 알려주는 속성이다.

이 속성이 필요한 이유는 상태 바에 위치하는 아이콘들의 색상을 적절하게 바꿔주기 위해서다.

windowLightStatusBar 속성이 true라면 아이콘들은 어두운 색으로, false라면 아이콘들은 밝은 색으로 나타난다.

 

---

 

상황에 따라 색상 바꾸기 (테마 상속)

사실 이 글을 쓰게 된 이유이다.

내가 진행하고 있는 프로젝트는 앱 전체는 밝은 색이지만 스플래시 화면(앱 실행 후 최초에 뜨는 로딩 화면)은 어두운 색이다.

변경 전. 밝은 상태바

배경 색은 잘 지정 됐지만 상태 바는 따로 지정하기가 힘들어 통일감이 떨어지는 모습이었다.

이 화면에서 상태 바의 색을 변경하기 위해서는 테마로 지정해야 한다.

이때 기존의 테마를 상속해서 필요한 속성만 변경 / 추가할 수 있다.

 

values > themes.xml

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    ...
    <item name="android:statusBarColor" tools:targetApi="l">@android:color/yellow</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowBackground">@color/background</item>
</style>

<!-- Splash 화면 테마 -->
<style name="Theme.MyApp.Splash">
    <item name="android:statusBarColor">@color/blue</item>
    <item name="android:windowBackground">@color/blue</item>
</style>

위의 style은 위에서 지정한 MyApp이라는 이름의 테마이다.

앱 전체에 이 테마가 지정되어 있다. 이것은 AndroidManifest.xml 파일을 확인하면 알 수 있다.

AndroidManifest.xml의 <application> 속성 중 theme으로 지정된 테마는 전체 앱에 지정되게 된다.

 

테마를 상속하기 위해서는 name을 상속하고자 하는 부모 테마에 . 을 붙이고 그 뒤에 새로운 이름을 짓는 것이다.

위의 예시에서는 Theme.MyApp이라는 테마를 상속하기 위해서 Theme.MyApp.Splash라는 이름으로 지었다.

이렇게 하면 MyApp 테마의 모든 속성을 그대로 유지하면서 MyApp.Splash에서 새로 지정한 속성 값만 바뀌게 된다.

즉, 위의 예시에서 MyApp과 다 똑같지만 상태바와 배경 색만 파란색으로 변경한 것이다.

 

이렇게 변경한 테마를 적용하고자 하는 화면에 지정해주어야 한다.

AndroidManifest.xml에서 가능하다.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.practice.mytheme">
	...

    <application
    	...
        android:theme="@style/Theme.MyApp">
        
        ...
        <activity
            android:name=".StartActivity"
            android:theme="@style/Theme.MyApp.Splash"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        ...
        </application>

</manifest>

application의 속성으로는 전체 앱에 적용될 테마를 지정한다.

그 밑으로는 이 앱에서 사용하는 액티비티들이 선언되어 있는데, 그중 우리가 만든 MyApp.Splash 테마를 적용할 액티비티인 StartActivity에 android:theme 속성으로 지정해준다.

그러면 결과는 다음과 같이 테마가 적용된 것을 알 수 있다.

 

테마 변경 전, 후