CODEWITHSUNDEEP
androidmaterial-designpopupmenu
Sophara Sum
Sophara Sum

Reputation: 45

How to implement android custom popup menu?

I would like to have design popup menu with its item clickable similar to image below in Android project. Any recommend is really appreciated. Thank you. enter image description here

Upvotes: 0

Views: 2945

Answers (2)

ObinasBaba
ObinasBaba

Reputation: 530

You have to use PopupWindow(popupView, width, height, focusable) :

First: Inflate option menu

override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    super.onCreateOptionsMenu(menu, inflater)
    inflater.inflate(R.menu.option_menu, menu)
}

Second: override onOptionsItemSelected:

override fun onOptionsItemSelected(item: MenuItem): Boolean = when (item.itemId) {
    R.id.popup_window -> {
        showPopup()
        true
    }   
}

Here is the logic of showPopup():

private fun showPopup() {
    val anchor =  requireActivity().findViewById<View>(R.id.popup_window) // set the menuOption as anchor so that the popup will display TOP RIGHT of the screen

   val inflater = requireContext().getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater // get layoutinflater from the system service
    val popupView = inflater.inflate(R.layout.popUp_window_options, null) // inflate the popUp_window_options wictch display on popup


    // create the popup window
    val width = LinearLayout.LayoutParams.WRAP_CONTENT
    val height = LinearLayout.LayoutParams.WRAP_CONTENT
    val focusable = true // lets taps outside the popup also dismiss it

    val popupWindow = PopupWindow(popupView, width, height, focusable)
    popupWindow.elevation = 10f // give it shadow

    PopupWindowCompat.showAsDropDown(popupWindow, anchor, 0, 0, Gravity.CENTER)
    PopupWindowCompat.setWindowLayoutType( popupWindow ,WindowManager.LayoutParams.FLAG_FULLSCREEN)

R.layout.popUp_window_options is your layout that contain the options. Hope it helps. ask any confusion.

After this you will get something like : this

Upvotes: 1

Nikhil Sharma
Nikhil Sharma

Reputation: 847

You can use DialogFragment with custom layout. So just like you create a fragment, you can create a DialogFragment as well, which will have its own custom layout with feature of dialog box. As following -

public class CustomDialogMenu extends DialogFragment {
    
    //global variables

    public static CustomDialogMenu newInstance() {
        Bundle args = new Bundle();
        CustomDialogMenu customDialogMenu = new CustomDialogMenu();
        customDialogMenu.setArguments(args);
        return customDialogMenu;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    
        return inflater.inflate(R.layout.custom_dialog_menu, container);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ........

}

You can use this fragment just like you invoke any other fragment, and custom_dialog_menu.xml will have your custom view you want in your dialog menu.

You can invoke this dialog inside a fragment as well. Code as following -

private void showCustomDialogMenu() {
    FragmentManager fm = getParentFragmentManager();
    CustomDialogMenu customDialogMenu= CustomDialogMenu.newInstance();
    customDialogMenu.setTargetFragment(this, 300);
    customDialogMenu.show(fm, "custom_dialog_menu");
}

For more information follow this code path.

Happy Coding !!

Upvotes: 0

Related Questions