PowerMenu

Additional

Language
Java
Version
2.1.6 (Oct 7, 2020)
Created
Oct 29, 2017
Updated
Oct 14, 2020
Owner
Jaewoong Eum (skydoves)
Contributors
Sebastien ROUIF (sebastienrouif)
Codacy Badger (codacy-badger)
Jaewoong Eum (skydoves)
0xflotus
Sung-Soo Hong (ssaqua)
5
Activity
Badge
Generate
Download
Source code
APK file

Blurb

PowerMenu

🔥 The powerful and easiest way to implement modern material popup menu. PowerMenu can be fully customized and used for popup dialogs. DownloadI really appreciate that 🔥Power Menu is used in more than GradleAnd add a dependency code to your module's build.gradle file.dependencies { implementation "com.github.skydoves:powermenu:2.1.6" }120,000+ project's dependency all over the 🌎world.



Table of Contents

1. PowerMenu 2. Customizing Popup3. Preference4. Menu Effect5. Dialogs6. Anchor7. Background8. Avoid Memory leak9. Functions10. Lazy initialization in Kotlin










Usage

Basic example

This is a basic example on a screenshot. Here is how to create PowerMenu using PowerMenu.Builder.

PowerMenu powerMenu = new PowerMenu.Builder(context)
          .addItemList(list) // list has "Novel", "Poerty", "Art"
          .addItem(new PowerMenuItem("Journals", false)) // add an item.
          .addItem(new PowerMenuItem("Travel", false)) // aad an item list.
          .setAnimation(MenuAnimation.SHOWUP_TOP_LEFT) // Animation start point (TOP | LEFT).
          .setMenuRadius(10f) // sets the corner radius.
          .setMenuShadow(10f) // sets the shadow.
          .setTextColor(ContextCompat.getColor(context, R.color.md_grey_800))
          .setTextGravity(Gravity.CENTER)
          .setTextTypeface(Typeface.create("sans-serif-medium", Typeface.BOLD))
          .setSelectedTextColor(Color.WHITE)
          .setMenuColor(Color.WHITE)
          .setSelectedMenuColor(ContextCompat.getColor(context, R.color.colorPrimary))
          .setOnMenuItemClickListener(onMenuItemClickListener)
          .build();

We can add an item or an item list using PowerMenuItem class. This is how to initialize PowerMenuItem.

new PowerMenuItem("Travel");
new PowerMenuItem("Poetery", false); // item name, isSelected (default is false).
new PowerMenuItem("Art", R.drawable.icon_art) // item name, item menu icon.
new PowerMenuItem("Travel", R.drawable.icon_travel, true) // item name, item menu icon, isSelected .

The first argument is an item title, and the other is selected status. If isSelected is true, the item's text and the background color will be changed by settings like below.


.setSelectedTextColor(Color.WHITE) // sets the color of the selected item text. 
.setSelectedMenuColor(ContextCompat.getColor(context, R.color.colorPrimary)) // sets the color of the selected menu item color.

OnMenuItemClickListener is for listening to the item click of the popup menu.

private OnMenuItemClickListener<PowerMenuItem> onMenuItemClickListener = new OnMenuItemClickListener<PowerMenuItem>() {
    @Override
    public void onItemClick(int position, PowerMenuItem item) {
        Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        powerMenu.setSelectedPosition(position); // change selected item
        powerMenu.dismiss();
    }
};

After implementing the listener, we should set using setOnMenuItemClickListener method.

.setOnMenuItemClickListener(onMenuItemClickListener)

The last, show the popup! Various show & dismiss methods.

powerMenu.showAsDropDown(view); // view is an anchor

Customizing Popup

We can customize item styles using CustomPowerMenu and your customized adapter. Here is how to customize the popup item that has an icon.


Firstly, we should create our item model class.

public class IconPowerMenuItem {
    private Drawable icon;
    private String title;

    public IconPowerMenuItem(Drawable icon, String title) {
        this.icon = icon;
        this.title = title;
    }
 // --- skipped setter and getter methods
}

And we should create our customized XML layout and an adapter. Custom Adapter should extend MenuBaseAdapter<YOUR_ITEM_MODEL_CLASS>.

public class IconMenuAdapter extends MenuBaseAdapter<IconPowerMenuItem> {

    @Override
    public View getView(int index, View view, ViewGroup viewGroup) {
        final Context context = viewGroup.getContext();

        if(view == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.item_icon_menu, viewGroup, false);
        }

        IconPowerMenuItem item = (IconPowerMenuItem) getItem(index);
        final ImageView icon = view.findViewById(R.id.item_icon);
        icon.setImageDrawable(item.getIcon());
        final TextView title = view.findViewById(R.id.item_title);
        title.setText(item.getTitle());
        return super.getView(index, view, viewGroup);
    }
}

The last, create the CustomPowerMenu with the onMenuItemClickListener.

CustomPowerMenu customPowerMenu = new CustomPowerMenu.Builder<>(context, new IconMenuAdapter())
       .addItem(new IconPowerMenuItem(ContextCompat.getDrawable(context, R.drawable.ic_wechat), "WeChat"))
       .addItem(new IconPowerMenuItem(ContextCompat.getDrawable(context, R.drawable.ic_facebook), "Facebook"))
       .addItem(new IconPowerMenuItem(ContextCompat.getDrawable(context, R.drawable.ic_twitter), "Twitter"))
       .addItem(new IconPowerMenuItem(ContextCompat.getDrawable(context, R.drawable.ic_line), "Line"))
       .setOnMenuItemClickListener(onIconMenuItemClickListener)
       .setAnimation(MenuAnimation.SHOWUP_TOP_RIGHT)
       .setMenuRadius(10f)
       .setMenuShadow(10f)
       .build();
private OnMenuItemClickListener<IconPowerMenuItem> onIconMenuItemClickListener = new OnMenuItemClickListener<IconPowerMenuItem>() {
    @Override
    public void onItemClick(int position, IconPowerMenuItem item) {
        Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        iconMenu.dismiss();
    }
};

Preference

PowerMenu supports saving of the last selected menu and recovering as lifecycle. Here is how to save and recover selected menu.

return new PowerMenu.Builder(context)
    // saves the position automatically when the menu is selected.
    // If we set the same preference name on the other PowerMenus, they will share the saving position.
   .setPreferenceName("HamburgerPowerMenu")

    // invokes the listener automatically that has the saved position arguments along the lifecycle rule.
    // lifecycle rules should be ON_CREATE, ON_START or ON_RESUME.
    // in the below codes, the onMenuClickListener will be invoked when onCreate lifecycle.
   .setLifecycleOwner(lifecycleOwner)
   .setInitializeRule(Lifecycle.Event.ON_CREATE, 0) // Lifecycle.Event and default position.
   --- skips ---

Here are the methods related to preference.

.getPreferenceName() // gets the preference name of PowerMenu.
.getPreferencePosition(int defaultPosition) // gets the saved preference position from the SharedPreferences.
.setPreferencePosition(int defaultPosition) // sets the preference position name for persistence manually.
.clearPreference() // clears the preference name of PowerMenu.

Menu Effect

We can give two types of circular revealed animation effect. Here is how to create a menu effect simply.



.setCircularEffect(CircularEffect.BODY) // shows circular revealed effects for all body of the popup menu.
.setCircularEffect(CircularEffect.INNER) // Shows circular revealed effects for the content view of the popup menu.

Dialogs

We can create looks like dialogs using PowerMenu.



Here is an example of the normal dialog. Dialogs are composed of a header, footer, and body.

PowerMenu powerMenu = new PowerMenu.Builder(context)
           .setHeaderView(R.layout.layout_dialog_header) // header used for title
           .setFooterView(R.layout.layout_dialog_footer) // footer used for yes and no buttons
           .addItem(new PowerMenuItem("This is DialogPowerMenu", false)) // this is body
           .setLifecycleOwner(lifecycleOwner)
           .setAnimation(MenuAnimation.SHOW_UP_CENTER)
           .setMenuRadius(10f)
           .setMenuShadow(10f)
           .setWith(600)
           .setSelectedEffect(false)
           .build();

And we can create a customized dialog like below.

CustomPowerMenu customPowerMenu = new CustomPowerMenu.Builder<>(context, new CustomDialogMenuAdapter())
         setHeaderView(R.layout.layout_custom_dialog_header) // header used for title
        .setFooterView(R.layout.layout_custom_dialog_footer) // footer used for Read More and Close buttons
         // this is body
        .addItem(new NameCardMenuItem(ContextCompat.getDrawable(context, R.drawable.face3), "Sophie", context.getString(R.string.board3)))
        .setLifecycleOwner(lifecycleOwner)
        .setAnimation(MenuAnimation.SHOW_UP_CENTER)
        .setWith(800)
        .setMenuRadius(10f)
        .setMenuShadow(10f)
        .build();

Anchor

We can show the popup menu as drop down to the anchor.

.showAsAnchorLeftTop(view) // showing the popup menu as left-top aligns to the anchor.
.showAsAnchorLeftBottom(view) // showing the popup menu as left-bottom aligns to the anchor.
.showAsAnchorRightTop(view) // using with .setAnimation(MenuAnimation.SHOWUP_TOP_RIGHT) looks better
.showAsAnchorRightBottom(view) // using with .setAnimation(MenuAnimation.SHOWUP_TOP_RIGHT) looks better
.showAsAnchorCenter(view) // using with .setAnimation(MenuAnimation.SHOW_UP_CENTER) looks better

or we can control the position of the popup menu using the below methods.

.getContentViewWidth() // return popup's measured width
.getContentViewHeight() // return popup's measured height

like this :

// showing the popup menu at the center of an anchor. This is the same using .showAsAnchorCenter.
hamburgerMenu.showAsDropDown(view, 
        view.getMeasuredWidth()/2 - hamburgerMenu.getContentViewWidth(), 
       -view.getMeasuredHeight()/2 - hamburgerMenu.getContentViewHeight());