코틀린 status bar(상태바) 투명, 확장하기

앱을 만든다.... 빌드시켜 만들어진 화면을 본다....

 

하지만 뭔가 깔끔하지 않고 못생긴 느낌의 화면...

 

 

상태바를 투명화 하여 확장해보겠습니다.

 

 

fun setStatusBarTransparent() {
   window.apply {
       setFlags(
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
        )
    }
    if(Build.VERSION.SDK_INT >= 30) {	// API 30 에 적용
        WindowCompat.setDecorFitsSystemWindows(window, false)
    }
}

api가 30에서 적용이 안되는 경우가 있기 때문에 위같이 적용하여 줍니다.

setFlags 를 적용 했을때 상태바뿐만 아니라 아래쪽 네비게이션바(뒤로가기)로도 확장이 되기 때문에 아래쪽도 패딩을 줘야 합니다.

 

 

 

 

잘 적용된것을 확인 할 수 있습니다.

 

 

하지만 appbar가 적용되어 있는 화면에서 적용을 하면 상태바 있는 범위까지 appbar가 침범을 합니다. 

이럴땐 상태바의 높이를 구해서 appbar의 위쪽 padding을 상태바의 높이만큼 적용해 주면 상태바 아래로 appbar를 위치 시킬 수 있습니다. 

 

 

// 상태바 높이 구하기
    fun statusBarHeight(): Int {
        val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")

        return if (resourceId > 0) resources.getDimensionPixelSize(resourceId)
        else 0
    }
    
// 네비게이션 바 높이 구하기    
    fun navigationHeight(): Int {
        val resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android")

        return if (resourceId > 0) resources.getDimensionPixelSize(resourceId)
        else 0
    }

위의 함수를 사용 하여 상태바 높이를 구하고 onCreate()에서 appbar의 패딩을 적용해 줍니다.

 

 

        var topAppBar = findViewById<MaterialToolbar>(R.id.topAppBar)

        // 상태바 만큼 padding줘서 상태바 아래에 appbar 깔끔하게 나오게 하기
        topAppBar.setPadding(
            0,
            statusBarHeight(),
            0,
            0
        )

위의 코드를 적용해 줍니다.

 

 

상태바 아래에 appbar가 정렬된것을 확인할수 있습니다.

 

 

 

+ 추가 내용

앱을 키자 마자 상태바가 하얀색으로 적용 되도록 하려면 values/themes 값을 변경 해줍니다.

    <style name="Base.Theme.Calendar_kt" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    </style>