CODEWITHSUNDEEP
kotlinandroid-jetpack-composekotlin-multiplatform
thegera4
thegera4

Reputation: 100

How to disable status bar in Kotlin Multiplatform?

I'm learning Kotlin Multiplatform by doing a small app that will run on Andorid/IOS/Desktop. It shares all logic and UI.

I have an image in my home screen that looks like this like this:

enter image description here

But I want to disable the status bar so that I can use all of the available height to have something like this:

enter image description here

I have found a lot of information on how to do it for android, but I haven't found anything that works for Multiplatform. Does anybody know how to do it?

Thanks in advance..

I have not found anything yet...

Upvotes: 0

Views: 708

Answers (3)

thegera4
thegera4

Reputation: 100

As I mentioned in a comment above, I managed to achieve my goal in Android, by adding this code in the MainActivity.kt file:

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {

    // Enable edge-to-edge (fullscreen) display
    enableEdgeToEdge()

    // Hide the system bar (android bottom bar with 3 buttons) and make it appear when swiping up
    WindowInsetsControllerCompat(window, window.decorView).let { controller ->
        controller.hide(WindowInsetsCompat.Type.navigationBars())
        controller.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    }

    super.onCreate(savedInstanceState)

    setContent {
            App()
    }
}

}

enableEdgeToEdge() This function allows you to use the full screen of the device (as mentioned in the Android documentation) and,

WindowInsetsControllerCompat(window, window.decorView).let { controller -> controller.hide(WindowInsetsCompat.Type.navigationBars()) controller.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE }

This code allowed me to hide the Android bottom navigation bar, as I'm using a bottom nav bar in my app, that sits behind that Android bottom bar, so, I had to hide it because I want a full-immersion experience in my application (the user can still swipe from the bottom of the screen and up to make the android navigation appear).

Finally, I added some modifiers and paddings to some of my UI elements, to move my image to the top, so I achieved my goal:

enter image description here

Upvotes: 0

Divyang Diwasaliwala
Divyang Diwasaliwala

Reputation: 202

Add below code in MainActivity:

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

private fun hideSystemUI() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        val controller = binding.root.windowInsetsController
        controller?.hide(WindowInsets.Type.ime())
        controller?.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        controller?.hide(WindowInsets.Type.systemBars())
    } else {

        window.decorView.systemUiVisibility =
            (View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY 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)
    }
}

Upvotes: 0

Manish
Manish

Reputation: 446

It can be done by adding .NoActionBar.Fullscreen either adding android:theme or adding style.xml. Here's a reference to Kotlin documentation - https://developer.android.com/training/system-ui/status

You can also manage the enabling and disabling of status programmatically.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Hide the status bar
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
        actionBar?.hide()
    }
}

Upvotes: 0

Related Questions