[Android][kotlin] 앱 하단바 색상 변경방법

🖥 Programming/📱 Android (Kotlin)

[Android][kotlin] 앱 하단바 색상 변경방법

MinChan-Youn 2024. 12. 18. 23:00

안녕하세요, 챠니입니다!

오늘은 안드로이드 앱 하단바 색상 변경 방법에 대해 알아보겠습니다. 하단바는 사용자 인터페이스에서 중요한 부분 중 하나로, 앱의 디자인 일관성을 유지하거나 사용자 경험(UX)을 개선하는 데 큰 역할을 합니다.

안드로이드 개발을 진행하다 보면 하단 네비게이션 바의 배경색과 아이콘 색상을 앱의 테마에 맞게 수정해야 하는 경우가 많은데요, 이를 간단히 설정할 수 있는 방법을 단계별로 알아보겠습니다!

1. 하단바 색상 변경 코드 전체 예시

// 하단바 색상 및 아이콘 색상 변경
window.navigationBarColor = ContextCompat.getColor(this, R.color.black) // 배경색 변경
WindowInsetsControllerCompat(window, binding.root).isAppearanceLightNavigationBars = false // true: 회색 아이콘 / false: 흰색 아이콘

위의 코드만으로도 하단바의 배경색과 아이콘 색상을 변경할 수 있습니다.

2. 단계별 설명

(1) 하단바 배경색 변경하기

먼저 하단바의 배경색을 원하는 색상으로 설정하는 방법입니다.

window.navigationBarColor = ContextCompat.getColor(this, R.color.black)

window.navigationBarColor : 하단 네비게이션 바의 배경색을 변경하는 프로퍼티입니다.
ContextCompat.getColor : 색상 값을 가져오는 메서드입니다.
R.color.black : 색상 리소스 파일에 정의된 색상입니다. 이 부분은 원하는 색상으로 변경하시면 됩니다.

Tip:
색상을 추가하려면 res/values/colors.xml 파일에 다음과 같이 정의하면 됩니다.

<color name="black">#000000</color>
<color name="white">#FFFFFF</color>
<color name="custom_color">#FF5733</color> <!-- 원하는 색상 추가 -->

(2) 하단바 아이콘 색상 변경하기

네비게이션 바에는 뒤로 가기, 홈, 최근 앱 버튼 같은 아이콘이 표시되는데, 이 아이콘들의 색상은 배경색에 맞춰 조정해줘야 합니다.

WindowInsetsControllerCompat(window, binding.root).isAppearanceLightNavigationBars = false

WindowInsetsControllerCompat : 시스템 창(상단바, 하단바 등)의 속성을 제어하는 데 사용되는 클래스입니다.
isAppearanceLightNavigationBars : 네비게이션 바 아이콘 색상을 제어합니다.
- true : 아이콘 색상이 어두운 색상(회색)으로 설정됩니다.
- false : 아이콘 색상이 밝은 색상(흰색)으로 설정됩니다.

예시 설명:

배경이 어두운 색상인 경우 → isAppearanceLightNavigationBars = false 설정 → 아이콘이 흰색으로 보입니다.
배경이 밝은 색상인 경우 → isAppearanceLightNavigationBars = true 설정 → 아이콘이 회색으로 보입니다.

3. 코드 활용 예시

하단바 색상을 상황에 맞게 변경하는 예제입니다.

// 배경색과 아이콘 색상을 변경하는 함수
private fun updateNavigationBarColor(isDarkMode: Boolean) {
    if (isDarkMode) {
        // 다크 모드인 경우: 배경색 검정, 아이콘 흰색
        window.navigationBarColor = ContextCompat.getColor(this, R.color.black)
        WindowInsetsControllerCompat(window, binding.root).isAppearanceLightNavigationBars = false
    } else {
        // 라이트 모드인 경우: 배경색 흰색, 아이콘 회색
        window.navigationBarColor = ContextCompat.getColor(this, R.color.white)
        WindowInsetsControllerCompat(window, binding.root).isAppearanceLightNavigationBars = true
    }
}

4. 주의 사항 및 팁

1. Android 버전 호환성

navigationBarColor는 API 레벨 21(Lollipop) 이상부터 사용 가능합니다.
WindowInsetsControllerCompat는 AndroidX 라이브러리로, 다음과 같은 의존성을 추가해야 합니다.

implementation 'androidx.core:core:1.6.0'

2. 테마 디자인

네비게이션 바와 상태바 색상을 앱의 전체 테마에 맞게 설정해주면 더 일관된 디자인을 유지할 수 있습니다.
다크 모드/라이트 모드를 구현할 때 하단바 색상도 함께 고려하면 좋습니다.

3. 테스트

다양한 기기와 OS 버전에서 테스트해보세요. 일부 제조사(삼성, LG 등)의 커스텀 OS는 하단바의 색상 변경이 다르게 동작할 수 있습니다.

5. 결론

하단 네비게이션 바 색상 변경은 앱의 디자인과 사용자 경험에 큰 영향을 미칩니다. window.navigationBarColor와 WindowInsetsControllerCompat를 이용해 간단하고 효과적으로 설정할 수 있습니다.

앱의 테마에 따라 유연하게 적용해보세요! 😊
다음에도 유용한 정보를 가지고 돌아오겠습니다. 감사합니다! 🚀

저작자표시