[Android][kotlin] StatusBar 상태바 색상 변경, 상태바 아이콘 색상 변경 방법 (title StatusBar 색상 변경)

안녕하세요~ 챠니입니다! :)

오늘은 앱 상단 상태바, 상태바 아이콘의 색상변경 방법에 대해서 알아보겠습니다.

변경 방법은 2가지로 나눌 수 있습니다.

1. 코드로 수정

2. xml파일로 수정

 

오늘은 이 두가지 모두 알아보겠습니다.

참고: 상단바의 색상은 api 21부터, 상단바에 나오는 아이콘과 텍스트 색상은 api 23부터 변경 가능

 

1.  kotlin 코드로 StatusBar 상태바, 상태바 아이콘 색상변경

window.apply {
    //상태바
    statusBarColor = Color.WHITE
    //상태바 아이콘(true: 검정 / false: 흰색)
    WindowInsetsControllerCompat(this, this.decorView).isAppearanceLightStatusBars = true
}

코드는 현재 kotlin으로 작성하였습니다.

위의 코드는 상태바:흰색, 상태바 아이콘: 검정으로 설정한 코드입니다.

 

statusBarColor는 흰색, 검정 뿐만 아니라 다른 색상으로 변경이 가능합니다.

하지만 상태바 아이콘은 true, false로 검정 또는 흰색으로만 변경이 가능합니다.

 

 

2.  themes.xml 수정을 통한 StatusBar상태바, 상태바 아이콘 색상변경

<item name="android:statusBarColor">@color/white</item> <!-- 상태바 색상-->
<item name="android:windowLightStatusBar">true</item>   <!-- 상태바 아이콘(true: 검정 / false: 흰색) -->

themes.xml 파일 수정을 통해 변경하는 방법입니다.

 

위의 코드는 상태바:흰색, 상태바 아이콘: 검정으로 설정한 코드입니다.

 

statusBarColor는 흰색, 검정 뿐만 아니라 다른 색상으로 변경이 가능합니다.

하지만 상태바 아이콘은 true, false로 검정 또는 흰색으로만 변경이 가능합니다.

 

 

 

결과 및 전체코드

상태바, 상태바 아이콘 변경(좌 / 우)

 

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        onClickinit()
    }

    /** onClick Listener */
    private fun onClickinit() {
        binding.tvBlack.setOnClickListener {
            setStatusBar("black")
        }

        binding.tvWhite.setOnClickListener {
            setStatusBar("white")
        }
    }

    /** 상태바 색상 변경 */
    private fun setStatusBar(barColor: String) {
        when (barColor) {
            "black" -> {
                window.apply {
                    //상태바
                    statusBarColor = Color.WHITE
                    //상태바 아이콘(true: 검정 / false: 흰색)
                    WindowInsetsControllerCompat(this, this.decorView).isAppearanceLightStatusBars = true
                }
                Toast.makeText(baseContext, "설정 되었습니다.", Toast.LENGTH_SHORT).show()
            }
            "white" -> {
                window.apply {
                    //상태바
                    statusBarColor = Color.BLACK
                    //상태바 아이콘(true: 검정 / false: 흰색)
                    WindowInsetsControllerCompat(this, this.decorView).isAppearanceLightStatusBars = false
                }
                Toast.makeText(baseContext, "설정 되었습니다.", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:padding="10dp"
        android:text="상태바 색상 변경"
        android:textSize="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:background="#F0F0F0"
        android:padding="10dp"
        android:text="상태바:흰색 / 아이콘:검정"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_black"
        app:layout_constraintTop_toBottomOf="@+id/tv_title" />

    <TextView
        android:id="@+id/tv_black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:background="#F0F0F0"
        android:padding="10dp"
        android:text="상태바:검정 / 아이콘:흰색"
        app:layout_constraintLeft_toRightOf="@+id/tv_white"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_title" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

 

 

 

전체 소스코드

[소스코드]
SetStatusBar: https://github.com/younminchan/kotlin-study/tree/main/SetStatusBar_kotlin

GitHub - younminchan/kotlin-study: kotlin 다양한 예제코드

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview