How To Enable Fullscreen Mode in Android?

In many case you would like to give your users full immersive experience of your app,i.e. when user play games , when they see picture or read books or read presentations on slides.In this post we are gonna learn how we can give fullscreen experience to user with different available options in Android.

Fullscreen mode hides system bars (status bar and navigation bar). And user won't be able to access them easily,So don't apply fullscreen mode for some extra screen space for your app.Apply Fullscreen when you think it is necessary.

Fullscreen Options On Android.

In Android you can provide fullscreen experience to your users with following three options.

1. Lean back
2. Immersive.
3. Immersive Sticky.

In all this three options system bar and navigation bar will hide and your user get fullscreen experience of your app.The main different between those option is how your user show status bar and navigation bar again.

Lets Learn More About Each Of  Those Options.

 

1. Lean back

You should use this approach when user will not interacting with screen heavily. i.e. when user      watching a video.User can see status bar and navigation bar by clicking anywhere in the screen and status bar and navigation bar will not hide again automatically.your app has to hide status bar and navigation bar if your app want fullscreen experience again.

You can enable Lean back mode by passing  SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION flags in setSystemUiVisiblility() method.

As you can see in following code snippet.

	public fun onCreate(savedInstanceState : Bundle){
	super.onCreate(savedInstanceState)
	//Hide navigation bar and status bar.
	window.decorView.apply{
	systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
	View.SYSTEM_UI_FLAG_FULLSCREEN
	}
	//Set main layout
	setContentView(R.layout.main_activity)
	}

view raw MainActivitiy.kt hosted with ❤ by GitHub

When user click any where in screen status bar and navigation bar will show and hide automatically. If you want to enable Lean back mode again then call the setSystemUiVisibility() method again with same flags.

As you can see in following code snippet.
System bars will automatically hide after 1 second they show.

	public fun onCreate(savedInstanceState : Bundle){
	super.onCreate(savedInstaceState)
	//set listener to decore view, so you get callback when system bar show or hide.
	window.decorView.setOnSystemUiVisibilityChangeListener { visibility ->
	// Note that system bars will only be "visible" if none of the
	// LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set.
	if (visibility and View.SYSTEM_UI_FLAG_FULLSCREEN == 0) {
	// The system bars are visible.we will hide it again after 1 sec.
	Handler().postDelayed({
	//enable Lean back mode again.
	enableLeanback()
	}, 1000)
	} else {
	// The system bars are NOT visible. Make any change you want
	}
	}
	//enable Lean back mode
	enableLeanback()
	//set main layout
	setContentView(R.layout.main_activity)
	}
	//enable Lean back mode
	private fun enableLeanback(){
	window.decorView.apply{
	systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
	or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
	}
	}

view raw MainActivitiy.kt hosted with ❤ by GitHub

2. Immersive

You should use this approach when user will interacting with screen heavily.i.e when user play games, watch images in gallery , read paged book etc.when user need to see system bars.they swipe at any edges where system bars are hidden.In immersive mode system bars only visible with this intended swipe gesture.So that the user's engagement with you app in not disturbed by and other touches and swipe gestures.

You can enable Immersive mode by passing  SYSTEM_UI_FLAG_IMMERSIVE  flag with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION flags in setSystemUiVisibility() method.

As you can see in following code snippet.

	public fun onCreate(savedInstanceState : Bundle){
	super.onCreate(savedInstanceState)
	//enable immersive mode.
	window.decorView.apply{
	systemUiVisibility = View.SYSTEM_UI_FLAG_IMMERSIVE
	or View.SYSTEM_UI_FLAG_FULLSCREEN
	or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
	}
	//set main layout
	setContentView(R.layout.main_activity)
	}

view raw MainActivitiy.kt hosted with ❤ by GitHub

In immersive mode if system bars re-appear then they will not be automatically hide , your app needs to set those flags again if your app wants to enable immersive mode again.

As you can see in following code snippet.
System bars will automatically hide after 1 second they show.

	public fun onCreate(savedInstanceState : Bundle){
	super.onCreate(savedInstaceState)
	//set listener to decore view, so you get callback when system bar show or hide.
	window.decorView.setOnSystemUiVisibilityChangeListener { visibility ->
	// Note that system bars will only be "visible" if none of the
	// LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set.
	if (visibility and View.SYSTEM_UI_FLAG_FULLSCREEN == 0) {
	// The system bars are visible.we will hide it again after 1 sec.
	Handler().postDelayed({
	//enable immersive mode again.
	enableImmersiveMode()
	}, 1000)
	} else {
	// The system bars are NOT visible. Make any change you want
	}
	}
	//enable immersive mode
	enableImmersiveMode()
	//set main layout
	setContentView(R.layout.main_activity)
	}
	//enable immersive mode
	private fun enableImmersiveMode(){
	window.decorView.apply{
	systemUiVisibility = View.SYSTEM_UI_FLAG_IMMERSIVE
	or View.SYSTEM_UI_FLAG_FULLSCREEN
	or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
	}
	}

view raw MainActivitiy.kt hosted with ❤ by GitHub

3. Immersive sticky

In normal immersive mode if user swipe from edge of screen then system take care of revealing and your app will not know that swipe gesture occurred.If app provide feature in which user needs to swipe from very edge of screen (i.e. drawing app) then you should enable "sticky" immersive mode.

In sticky immersive mode while swipe from very edge of the screen then system bar will appear but they are semi-transparent and hide automatically after some time or as soon as user touches of click anywhere outside the system bars and the touch gesture will passed all the way down to app.

For example in image editing app when user start the drawing from very edge of screen the system bars will appears and drawing also start from that very edge of the screen.

You can enable Immersive sticky mode by passing SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION flags in setSystemUiVisibility() method.

As you can see in following code snippet.

	public fun onCreate(savedInstanceState : Bundle){
	super.onCreate(savedInstanceState)
	//enable immersive sticky mode.
	window.decorView.apply{
	systemUiVisibility = View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
	or View.SYSTEM_UI_FLAG_FULLSCREEN
	or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
	}
	//set main layout
	setContentView(R.layout.main_activity)
	}

view raw MainActivitiy.kt hosted with ❤ by GitHub

In immersive sticky mode system bars (status bar and navigation bar ) will hide automatically,and your app will not get any callback about show and hide system bars.