Android popupmenu with icons

PopupMenu — Всплывающее меню

Начиная с Android 3.0, в системе появилась возможность создавать всплывающее меню, привязанное к элементу View. Меню реализовано в виде модального окна, которое отображается снизу от родителя меню или в другом месте, если места снизу недостаточно. PopupMenu не нужно путать с контекстным меню. У них разные задачи, хотя поведение весьма схоже. В новых версиях Android использование всплывающих меню предпочтительнее контекстных, которые можно считать устаревшим интерфейсом.

В Android 4.0 добавили новую функциональность, чтобы работать было проще. В частности, всплывающее меню можно получить из XML-файла, используя метод inflate(int), которому следует передать идентификатор ресурса меню. А до этого приходилось использовать отдельный класс MenuInflator с избыточным кодом.

Также появился слушатель PopupMenu.OnDismissListener для работы с закрытием меню. Он срабатывает либо, когда пользователь щёлкает на пункте меню и меню закрывается, либо пользователь щёлкает в другом месте экрана, и меню также закрывается.

Есть момент, который приводит к конфузу. Сейчас существует два класса с одинаковым именем из двух разных пакетов: android.widget и androidx.appcompat.widget (ещё были android.support.v7.widget.PopupMenu и android.support.v4.widget.PopupMenuCompat). Они практически одинаковы в применении, но в паре моментов поведение отличается.

Например, всплывающее меню из AndroidX может быть прокручиваемым. Когда я щёлкал на изображении, то на экран выводилось только два пункта, и для третьего пункта приходилось прокручивать меню.

Создать всплывающее меню очень просто. По сути мы повторяем шаги по созданию обычного меню. Сначала в ресурсах меню создадим нужный файл:

res/menu/popupmenu.xml

Я постарался использовать всевозможные варианты использования атрибутов, которые отвечают за вывод флажков, доступность и т.д. Есть и другие атрибуты, о которых читайте в документации.

Далее добавим на экран активности текстовую метку, кнопку и ImageView. При щелчке на каждом из этих компонентов мы будем выводить одинаковое всплывающее меню:

Осталось написать код.

Вам надо создать новый экземпляр PopupMenu, указав контекст активности и компонент, к которому будет привязано это меню. Далее загружаете меню из ресурсов и добавляете методы для обработки щелчков. Для отображения на экране вызывается метод show().

Запустив проект, вы можете щёлкать по любому элементу на форме и увидеть всплывающее меню.

Несмотря на то, что в XML мы указали значки, в реальности они не выводятся. В интернете можно найти примеры решения проблемы через программный код. В Android Q (API 29) можно сделать из коробки (см. пример ниже).

Меню со значками (Kotlin)

Напишем другой вариант примера на Kotlin и заставим систему выводить значки. Будем вызывать меню при нажатии на кнопку и выводить информацию в TextView через новый объект popupMenu2 из пакета android.widget, у которого есть специальный метод setForceShowIcon() для вывода значков на экран. И для сравнения оставим код из предыдущего примера.

Создадим новый файл меню res/menu/popup_menu.xml для второго примера.

Программное добавление пунктов

Повесим на новую кнопку возможность программного добавления новых пунктов меню.

Источник

gotoark / Pop-Up Menu With Icon

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

public void showPopupMenuWithIcon(View view) <

PopupMenu popup = new PopupMenu(SavingDatainSQLDB.this, view);

try <

Field[] fields = popup.getClass().getDeclaredFields();

for (Field field : fields) <

if («mPopup».equals(field.getName())) <

field.setAccessible(true);

Object menuPopupHelper = field.get(popup);

Class classPopupHelper = Class.forName(menuPopupHelper.getClass().getName());

Method setForceIcons = classPopupHelper.getMethod(«setForceShowIcon»,boolean.class);

setForceIcons.invoke(menuPopupHelper, true);

break;

>

>

> catch (Exception e) <

e.printStackTrace();

>

popup.getMenuInflater().inflate(R.menu.badge_on_overflow_menu, popup.getMenu());

popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() <

public boolean onMenuItemClick(MenuItem item) <

Toast.makeText(getApplicationContext(), «You Clicked : » + item.getTitle(), Toast.LENGTH_SHORT).show();

return true;

>

>);

popup.show();

>

This comment has been minimized.

Copy link Quote reply

alpha00-coder commented Mar 15, 2021

hello sir this code is not working for the release apk please paste the proguard rules for this for this code so that icons could be shown in release apk too

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Ready Android

Pursuing Perfection Passionately

Thanks to

Evergreen Posts & Pages

Nice to see u 🙂

Popup menu with icon

Important :– In AndoridManifest.xml set theme “@style/Theme.AppCompat.Light”

1.Add android-support-v7-appcompat library to your project.

2. Now create a xml file for popupmenu
Goto Project->res folder->menu folder create popupmenu.xml

it should be like this for simple text and icon popup menu

3. For showing icon in popup menu reflection in used- Main Activity

4.activity_main.xml

5. Mainfest.xml

Share this:

Like this:

13 thoughts on “ Popup menu with icon ”

Thank you! There are a lot of tricks for other components on this site. Keep in touch…Nice to see u 🙂

Good sample. I really pick some idea from dat. Thanks

Thank you! There are a lot of tricks for other components on this site. Keep in touch…Nice to see u 🙂

How can I change the direction of items to “rtl” ?

Thanks Ahmed! for spending your valuable time on this blog.
By default it automatically comes if your app is supporting RTL format. If you see Google Photos app menu after applying Arabic language to the phone, here you found the menu items are in RTL formatted.
Let me know still, are you facing issue with this used custom code?
Contact me @rahul.androidnewsletter@gmail.com with the issue screenshot, might be that will be helpful for me to help you in implementing this feature.

Hellow my name is Martinunups. Wery good article! Thx 🙂

Thank you! There are a lot of tricks for other components on this site. Keep in touch…Nice to see u 🙂

Nice post. I was checking constantly this blog and I am impressed! Very useful info specifically the last part 🙂 I care for such info a lot. I was looking for this particular info for a long time. Thank you and good luck.

Thank you! There are a lot of tricks for other components on this site. Keep in touch…Nice to see u 🙂

Источник

Popup Menu (with Icons!) – Android Kotlin Tutorial (Code)

Trending Tutorials

Learn how to create a popup menu with icons in this Kotlin Android tutorial!

You will learn how to create a menu resource, how to code the popup menu and then how to show icons in the popup menu. It’s a bit trickier than it may seem!

This post contains all the code that’s been written in this YouTube video.

You can also check out this GitHub repository: https://github.com/ResoCoder/PopupMenuTutorial

MainActivity.kt

menu_main.xml

activity_main.xml

About the author

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a Flutter freelancer and most importantly developer educator, he doesn’t have a lot of free time 😅 Yet he still manages to squeeze in tough workouts 💪

You may also like

Create Responsive Flutter Apps with Minimal Effort

Flutter Bottom Navigation with Nested Routing

Flutter AdMob Monetization – Banner and Interstitial Ads

Thanks so much for contributing to the coding ecosystem. Your video was incredibly well done, you are well spoken and go at a very good pace for the complexity of the work you are doing. I also think using YouTube as the system of delivery is good as people can go through the material at their own pace.

Again thank you.

I’m extremely happy that I could help you. Thanks.

Thank you. Nice guide.

Reso Coder is the place for your professional growth as a developer. Learn from project-based tutorials that are not afraid to cover important, yet often overlooked, topics such as good code architecture, testing and even deployment.

Join 15,000+ growth-oriented Flutter developers subscribed to the newsletter who receive weekly Flutter news and resources.

© 2021 Reso Coder Labs s.r.o.

Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.

Hey! We are required to tell you that we use cookies to enhance your experience.

You can find out more about which cookies we are using or switch them off in settings .

Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Источник

Building a Custom Overflow Menu

When I started working at KeepSafe in March 2014, my first major project was to update the UI of our Android application to follow Google’s design guidelines for Android 4.0+.

As part of this project, we wanted to move our album manipulation actions into a menu that would pop up when the user clicked an overflow icon on the album being modified. We felt this would be a familiar action because its behavior is analogous to the overflow menu in the Action Bar, and more easily discoverable than the long-press context menu that we previously had.

However, making this menu appear exactly as I wanted proved to be less trivial than its fairly idiomatic nature would suggest. I did a lot of code-diving and customization to construct the menu, show its icons, move the menu position, and fade out the unselected albums.

Constructing the Menu

Fortunately, there was a PopupMenu class in the AppCompat support library. I could use it to create the menu in a way that fit with the Action Bar and overall visual style of Android 4.0.

First, I needed to add the overflow icon to the ListView item representing the album.

I also needed to create a menu resource which would inflate into the PopupMenu to define the content of the menu.

Then I needed an OnClickListener to set on the overflow icon from Java code so the menu appeared when the user clicked on it. My first attempt looked something like this:

Then I just had to attach a listener to the overflow of each album in the ListView’s adapter:

Let’s see what that looks like:

Not too bad! But it wasn’t quite like the mockup our designer had given me. I would have to do some customization.

Showing Icons

The first issue I wanted to address was the lack of icons in the menu. Our designer created great icons for each item, which I had referenced in the menu resource, but for some reason they weren’t being used. Adding icons to the menu would help to set it apart from the background, and draw attention to each item while conveying its function. And it would be a shame to waste the work that went into making them.

From my experience working with other Android menu types, like the Action Bar and context menus, I knew the icon declarations in XML were valid. I suspected they weren’t gone forever–they were just hiding somewhere. Unfortunately the public API for PopupMenu contains no functions with any relation to icons.

Not being one to give up easily, I went source code-diving. I found that a PopupMenu contained a private reference to a member called mPopup–a suspiciously important-sounding name–of the type android.support.v7.internal.view.menu.MenuPopupHelper. That seemed promising, so I looked at the source for MenuPopupHelper, and sure enough, there it was: public void setForceShowIcon(boolean forceShow).

However, this was a method on object that was not only a private member but an object of an internal class. My job was not so easily accomplished with calling a single method–no, I would have to use Java’s reflection APIs to circumvent these restrictions.

Here’s the result:

Moving the Menu Around

The next custom thing we wanted to do was to move the menu to the left a bit. Our designer didn’t like the menu being flush with the right edge of the screen and wanted to move it inward so it stood out more. Once again, there was nothing in the public API to accomplish this, so I was back to source code-diving.

In the MenuPopupHelper class that we looked at above, I found another field conspicuously named mPopup. This time, it was an object of type android.support.v7.internal.widget.ListPopupWindow. A window was exactly what I wanted to move, so I went digging in this class and found the method public void setHorizontalOffset(int offset). But this method only sets a member variable. After searching for that variable’s usages, I found that it is also necessary to invoke public void show() in order to update the position of the window.

There was still one more obstacle in my way though. Despite the reflection code for these methods executing correctly, the menu didn’t move!

After playing with different values for the offset, I found that the location of a zero offset is not what’s originally reflected on the screen. As it turns out, the base position of the window is for the top left corner of the menu window to be anchored to the bottom left corner of the anchor view (in this case, the overflow image). Since this would result in the window being rendered mostly offscreen, Android was moving the window to the left during the draw until it was fully onscreen. This meant that even though I moved the window a little bit to the left relative to its default position, it was still partially offscreen, and thus ended up in the same place.

To place the window where I wanted, I needed to move it to the left, not by the width of the overflow image as I had originally thought, but rather by the entire width of the menu window. Luckily, ListPopupWindow provides a method public int getWidth() to get this width.

The final code looks like this:

And the result is:

Fading Out the Other Albums

There was a final thing to do with the menu. In order to make it clear both that a menu had been opened and which album those menu options would affect, we wanted to fade out all the albums except the selected one.

Luckily these views were readily available. All I had to do was find the ones that hadn’t been selected and apply a fade-out animation to them, as well as set a listener to fade them back in when the menu was dismissed.

Источник