ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • status bar 영역 덮는 view 만들기
    개발/안드로이드 2020. 6. 24. 22:57

     

    안드로이드 런처 화면 상단을 보면 status bar 영역을 배경 영역이 덮고 있는 것을 볼 수 있다. 이렇게 status bar 영역까지 확장할 경우 유저에게 꽉찬 느낌을 줄 수 있어서 틱톡을 비롯한 몇몇 앱에서도 활용하고 있다. 이번 포스트에서는 이렇게 status bar 영역까지 확장하는 방법을 소개한다.

     

     

    1. AppTheme 설정

     

    windowActionBar, windowNoTitle 속성을 추가하고 이 style 값을 activity에서 사용하도록 한다.

     

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    	<!-- Customize your theme here. -->
    	<item name="colorPrimary">@color/colorPrimary</item>
    	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    	<item name="colorAccent">@color/colorAccent</item>
    
    	<item name="windowActionBar">false</item>
    	<item name="windowNoTitle">true</item>
    </style>
    

     

    2. FullScreen 형태로 변경 

     

    activity 또는 fragment에서 현재 window의 systemUiVisibility 플래그 값을 View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 로 변경하고 statusBarColor를 투명으로 바꿔준다. 

    this.window?.apply {
        this.statusBarColor = Color.TRANSPARENT
        decorView.systemUiVisibility =
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    
    }

     

    이렇게 두가지 작업만 적용해도 아래 처럼 status bar 영역까지 차지하게 되는 것을 볼 수 있다. 그런데 앱에서 차지하고 있는 공간이 거의 흰색에 가깝다 보니까 status bar 아이콘들이 잘 보이지 않는 문제점이 있다. 

     

    3. Status Bar Icon 색 변경

     

    이런 경우에 직접 status bar 아이콘의 색깔을 어둡게 설정해줄 수 있다. View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 플래그를 추가하면 아이콘이 light 배경일 때 사용할 수 있도록 어두운 아이콘으로 나오게 된다.

     

    this.window?.apply {
        this.statusBarColor = Color.TRANSPARENT
        decorView.systemUiVisibility =
            View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    
    }

     

    적용하면 아래의 그림처럼 아이콘 색이 변한다

     

    '개발 > 안드로이드' 카테고리의 다른 글

    RxJava - observeOn, subscribeOn  (0) 2020.06.28
    RxJava - combineLatest  (0) 2020.06.28
    Lottie 라이브러리  (0) 2020.06.24
    MediaCodec - Encoding  (0) 2020.06.21
    MediaCodec - Decoding  (0) 2020.05.24

    댓글

Designed by Tistory.