Android Full Screen 화면 만들기~~~

Android를 사용하다보면 앱에서 터치를 하면 StatusBar와 아래 백버튼과 홈버튼 같은 시스템 UI가 사라지는 인터렉션을 볼 수 있다.

오늘은 이 부분을 구현하는 법을 알아보았다.

 

이름하야

android Immersivemode..... 

Immersivemode는 동영상 재생 앱 같은 사용자와의 인터렉션이 적은 앱을 만들때 사용되는 기능이다.

영상을 보고 있을때 필요없는 부분을 제거하고, 더 큰화면으로 영상을 보면 유저가 더 좋아지고,

어차피 영상을 보거나 무언가 하고 있을 때는 상호작용이 적어지니 버튼과 statusBar를 가리는 것이다.

 

이 부분을 구현할때는 분기처리가 필요하다

 

Mode

Full Screen 모드는 세가지가 존재한다

 

BEHAVIOR_SHOW_BARS_BY_SWIPE

BEHAVIOR_SHOW_BARS_BY_TOUCH

 

BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

아니 존재했었다...

지금은 위에 두개는 deprecated

BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE와 BEHAVIOR_DEFAULT만 사용하면될듯하다.

3가지 모드가 궁금하신 분들은 참고

https://developer.android.com/training/system-ui/immersive?hl=ko 

전체 화면 모드 사용 설정  |  Android 개발자  |  Android Developers

영어 버전에는 없는 내용인데 한글에는 예전 내용들이 들어있다.

 

 

그래서 SWIPE 액션으로만 다시 시스템UI를 불러올 수 있게 되었다....

여하튼 그래서 버전에 따라 방법을 분기해야한다.

 

SDK VERSION 30 아래

 

systemUiVisibility를 이용해서 View에 Visible을 설정해 주듯이 flag를 설정해주면 된다.

 

기본 ImmersiveMode

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)
        if (hasFocus) hideSystemUI()
    }

    private fun hideSystemUI() {
        window.decorView.systemUiVisibility = (
                View.SYSTEM_UI_FLAG_IMMERSIVE
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_FULLSCREEN)
    }
    
    private fun showSystemUI() {
        window.decorView.systemUiVisibility = (
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
    }

lean back mode

View.SYSTEM_UI_FLAG_IMMERSIVE를 삭제해주면된다

 

sticky immersive mode

View.SYSTEM_UI_FLAG_IMMERSIV -> View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY 

 

아래 View.SYSTEM_UI_FLAG_HIDE_NAVIGATION, SYSTEM_UI_FLAG_FULLSCREEN가 Status bar와 Navigation bar를 삭제하는 flag다

 

 

SDK 30 이상

 

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val windowInsetsController =
        WindowCompat.getInsetsController(window, window.decorView)
    windowInsetsController.systemBarsBehavior =
        WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

    window.decorView.setOnApplyWindowInsetsListener { view, windowInsets ->
        if (windowInsets.isVisible(WindowInsetsCompat.Type.navigationBars())
            || windowInsets.isVisible(WindowInsetsCompat.Type.statusBars())) {
            binding.toggleFullscreenButton.setOnClickListener {
                windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
            }
        } else {
            binding.toggleFullscreenButton.setOnClickListener {
                windowInsetsController.show(WindowInsetsCompat.Type.systemBars())
            }
        }
        view.onApplyWindowInsets(windowInsets)
    }
}

위 코드를 이용하면 가능

 

• WindowInsetsCompat.Type.systemBars() 시스템 UI 전부 가림
• Use WindowInsetsCompat.Type.statusBars() status bar 가림
• Use WindowInsetsCompat.Type.navigationBars() navigation bar 가림

이렇게 버전에 맞게 분기처리해주면 간단하게 사용이 가능하다.

 

추가

 

위 gif를 보면 status bar가 까맣게 되는데

이는 28이상에서 적용되는 displayCutouMode 때문으로 추정 중이다.

window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

이 코드를 사용해서 shortEdges를 사용하거나

 

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

위코드를 theme에 적용해주면된다