How to hide bottom navigation bar in fragment when dialog is displayed in Kotlin?

Question

I am having a hard time hiding the bottom navigation bar when a dialog is displayed. I want that to NOT appear since the application is shown in full-screen mode.

Here is the class that builds the dialog:

class CreateNewFolderDialogFragment : DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

        return activity?.let {
            // Use the Builder class for convenient dialog construction
            //val builder = AlertDialog.Builder(it, R.style.AppBaseTheme)
            val builder = AlertDialog.Builder(it)
            val inflater = requireActivity().layoutInflater;

            // Inflate and set the layout for the dialog
            // Pass null as the parent view because its going in the dialog layout
            builder.setView(inflater.inflate(R.layout.create_new_folder_dialog, null))
                    // Add action buttons
                    .setPositiveButton("OK",
                            DialogInterface.OnClickListener { dialog, id ->
                                // create folder ...
                            })
                    .setNegativeButton("Cancel",
                            DialogInterface.OnClickListener { dialog, id ->
                                getDialog()?.cancel()
                            })
            builder.create()


        } ?: throw IllegalStateException("Activity cannot be null")
    }
}

And here is the call of it inside another fragment:

fun createNewFolderDialog() {

        val supportFragmentManager: FragmentManager = (activity as AppCompatActivity).supportFragmentManager

        val newFragment = CreateNewFolderDialogFragment()

        newFragment.show(supportFragmentManager, "newfolder")


}

And here is a screenshot of what I get when I show the dialog. As you can see the bottom navigation bar is shown. I'd like to prevent that to appear, ever.

Nikhil Jain · Answer 1 · 2021-04-15T18:09:00.873

1

You can hide the system navigation bar through the following code :

window.decorView.apply {
    // Hides the navigation bar.
    systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
}

There are few limitations to hide the system navigation bar, you can check this on the below link. Source - Android Documentation

You can use the window object of the DialogFragment class and can set the above flag in your CreateNewFolderDialogFragment class in onStart method like the code below:

override fun onStart() {
    super.onStart()
    dialog?.window?.decorView?.apply {
        // Hide both the navigation bar
        systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
    }
}

edited Apr 15 '21 at 18:09

answered Apr 15 '21 at 17:27

Nikhil Jain

649
5
11

Thank you for your answer Nikhil, but where should I put that code? – Fabrizio Ferrari Apr 15 '21 at 17:43
@FabrizioFerrari The dialog object has a window object and you can use this method in your onStart() method of CreateNewFolderDialogFragment. – Nikhil Jain Apr 15 '21 at 18:03
It works, thank you Nikhil! There is just a problem: when I click any of the buttons in the dialog, the bar appears, and I have to click the buttons again to close the dialog and make the bar disappear again. Thought? – Fabrizio Ferrari Apr 15 '21 at 18:08
I think there are few limitations to this flag, you can check the Android link I have provided in my answer. btw, I have updated the answer with the code as well. – Nikhil Jain Apr 15 '21 at 18:10
Thank you again, I'll try to figure it out, but it looks to me that the dialog loses focus. Therefore, I have to click twice to make the buttons work: click one time to give focus to it again (and the bottom bar appears), then clicking again to trigger the button click. Any thoughts on how to give focus to the dialog right after hiding the bar? – Fabrizio Ferrari Apr 15 '21 at 18:16
There is this note from Android documentation that says "With this approach, touching anywhere on the screen causes the navigation bar (and status bar) to reappear and remain visible. The user interaction causes the flags to be cleared." I think you can go through this answer - https://stackoverflow.com/questions/21724420/how-to-hide-navigation-bar-permanently-in-android-activity – Nikhil Jain Apr 15 '21 at 18:29
Thanks, Nikhil, I solved it. I am posting the solution in my original post. – Fabrizio Ferrari Apr 15 '21 at 19:02
Glad to know it helped! – Nikhil Jain Apr 16 '21 at 02:23
you're welcome, upvote my answer if it helped you :) – Nikhil Jain Apr 17 '21 at 15:56

score 1 · Answer 2 · answered Apr 15 '21 at 19:04

I solved the problem with this:

override fun onStart() {
    super.onStart()
    dialog?.window?.decorView?.apply {
        systemUiVisibility = View.SYSTEM_UI_FLAG_LOW_PROFILE or
                    View.SYSTEM_UI_FLAG_FULLSCREEN or
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
                    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                    SYSTEM_UI_FLAG_HIDE_NAVIGATION
    }
}

Thanks to @Nikhil for the provided hints!

How to hide bottom navigation bar in fragment when dialog is displayed in Kotlin?

2 Answers2