Popup window in fragment in kotlin

Question

I need popup window to show my user's options for example, I was wondering to add a long press botton and then when that button clicked, show a popup window with transparent background and when outside clicked close popup window

exactly like this

I have tried so many ways but non of them worked for me.

I have no clue how to use dialog window too.

No matter which one to use, dilog fragment or popup window but I need that my window to be like this(on the top is user name which has given from data base and then options)

here is where should I place popup window:

val mUserAdapter = UserAdapter()
        mUserAdapter.setOnclickListener(AdapterListener({
            if (it != 0L)
                this.findNavController().navigate(
                    UserListFragmentDirections.actionUserListFragmentToIncreaseMoneyFragment(it)
                )
            Log.d("TAG", "navTeat $it ")
        }, {
            deleteDialog(it)
        }
        ) {
            Toast.makeText(activity, "Long", Toast.LENGTH_SHORT).show() //Here instead of Toast, I need POPUP WINDOW

        })

THANKS :)

Answer 1

1.Dialog fragment

assuming you're using navigation component, add the dialogFragment using the <dialog> tag in navGraph,

<dialog
    android:id="@+id/navigation_dialog_fragment"
    android:name="com.app.example.ui.dialogFragment"
    tools:layout="@layout/dialogFragment"/>

override dialog fragment's onCreate() to make the background translucent,

class mDialogFrag: DialogFragment(R.layout.dialog_fragment) {

   override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setStyle(STYLE_NO_FRAME, R.style.DialogTheme)

         //populate UI with data from DB

DialogTheme:

<style name="AppDialogTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">#40000000</item><!--dialog background-->
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
</style>

2.Alert dialog

in your target fragment,

lateinit var mAlert : AlertDialog
//inflate custom layout
val alertBinding = AlertBinding.inflate(LayoutInflater.from(requireContext()))
alertBinding?.apply{
  //populate UI with data from DB
}
val builder = AlertDialog.Builder(requireContext())
mAlert = builder.setView(alertBinding.root)
             .setCancelable(false)
             .create()
mAlert.window?.setBackgroundDrawable(
     ContextCompat.getDrawable(requireContext(),R.drawable.bg_card) //custom dialog background 
)
mAlert.show()

both these methods use custom layout to achieve your requirements. but the DialogFragment was meant for more complicated UI (i.e. gives more control over UI dynamically). whereas, the AlertDialog can be used for more simple UI such as yours.

or you can use the default list called traditional single-choice list AlertDialog like here which is more simple.