loading...
Cover image for Full screen / Immersive application in Android Studio

Full screen / Immersive application in Android Studio

jeffp11 profile image Jeffrey Prado Updated on ・2 min read

As every beginner, I started getting guided by the documentation of Android Studio which is very helpful.

Alt Text

Somehow, I get involved in the need of develop a full screen app. That’s why I decided to explain very explicit and step by step what you will need to get it.

Normal app

Alt Text

Full screen app

Alt Text

Basically, what we must do is explained in the previous Android documentation I mentioned, so let’s take a look of it:

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)
}

So, what we have is:
· onWindowsFocusChanged detects every time If you gain window focus, you may want to re-hide the system bars by calling hideSystemUI
· hideSystemUI change the systemUiVisibility to enable the full screen flags
· showSystemUI show the system bars

The simplest way is to add this code to every activity you want to display on full screen mode, but a better way is to create your custom activity which will be the parent of the rest.

Our custom activity has to be an open class so we can extend from it later and obviously it has to extend from AppCompatActivity.

open class MasterActivity : AppCompatActivity() {
    companion object {
        const val GLOBAL: Int = (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)
    }

To optimize code lines I decided to create a constant value with the flags we will need.

Then on the onCreate function we call our fullScreenCall where is the logic for the full screen mode

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        fullScreenCall()
    }

The onResume should call it too for better UX.

    override fun onResume() {
        super.onResume()
        fullScreenCall()
    }

fullScreenCall is the function where we set the full screen mode accordingly the SDK version of the device, if it is between 11 and 19 the machine set GONE to systemUiVisibility. On the other hand, for versions after 19th all the machine does is to set the full screen flags.

    open fun fullScreenCall() {
        if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { 
            this.window.decorView.systemUiVisibility = View.GONE
        } else if (Build.VERSION.SDK_INT >= 19) {
            decorView.systemUiVisibility = GLOBAL
        }
    }

As I explained with the code provided by Android documentation, onWindowFocusChanged will detect when the focus changes and it will set the flags for the screen mode again

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)
        window.decorView.systemUiVisibility = GLOBAL
    }

Then the only step we have to do is to extend from our MasterActivity like this:

class AnotherActivity: MasterActivity()

There we go, you will have a full screen app. THANKS FOR READING

Posted on by:

jeffp11 profile

Jeffrey Prado

@jeffp11

Computer Sience's Student interested on Mobile Development and Games!

Discussion

pic
Editor guide