B4A Library Spotlight PopUp Menu

ilan

Expert
Licensed User
hi b4x.com

this is a simple lib i wrote (no wrapper).
Its a Popup Menu in Spotlight look.

this is NOT the feature Spotlight that is available on Android 7, it is a just a PopUp Menu in Spotlight look.

if you like it i would really appreciate a small donation :)

Please tell me if you find any issues or bugs.
I am including the lib files + an example. take a look at it, it should be very simple to understand.
if you have any question don't hesitate to ask me ;)

EDIT: v1.01 support for Fontawesome/Materialdesign Icons (see post #4)

EDIT: v1.02 bug fixed + Example updated

EDIT: v1.03 bug fixed+ Example updated + option to change background color for each item


EDIT: v1.04 bug fixed

EDIT: Source file available!


ezgif.com-77f8f62e38.gif
 

Attachments

Last edited:

ilan

Expert
Licensed User
updated to v1.01
now it supports fontawesome so you can instead of adding icons choose a fontawesome or materialdesign icon and use it as your icon.
like this its much more dynamic.

sample code (fontawesome):

B4X:
    spMenu.Initialize(Me,"spMenu",8%y,False,False,True,newshiftadd,Activity)
    spMenu.additem("תשלום קבוע  ",Colors.Black,15,LoadBitmap(File.DirAssets,"newshiftback.png"))
    spMenu.additem("משמרת חדשה  ",Colors.Black,15,LoadBitmap(File.DirAssets,"newshiftback.png"))     
 
    For i = 0 To 1
        spMenu.ItemIcon(i).Typeface = myFontAwesomelbl.Typeface
        spMenu.ItemIcon(i).Gravity = Gravity.CENTER
        spMenu.ItemIcon(i).TextColor = Colors.White
        spMenu.ItemIcon(i).TextSize = 16
    Next
  
    spMenu.ItemIcon(0).Text = Chr(0xF20B)
    spMenu.ItemIcon(1).Text = Chr(0xF271)
 
Last edited:

iz0ndg

Member
Licensed User
Thank's for your work Ilan !

On LG G2 with rom 7.1.1 work all, but the button are in front of the menu

Screenshot_20170107-220522.png
 

ilan

Expert
Licensed User
You should put the spotlight view in a panel
the spotlight is on a panel. i create a panel that covers the whole screen and all menuitems are added to it.
i always bring it to front when you call the .show function.

the problem appears when you choose a material design theme. the material design theme brings all buttons to the front and that is why the buttons are above the spotlight panel even if i call bringtofront.

setting the elevation property will bring the panel to the front also on material design themes?

i also get the same behavior on other buttons on my app when i use a material design theme. do i have to set the elevation property to all buttons?
 

LucaMs

Expert
Licensed User
Has anyone tried it? I Would like to know if its working
It works well (Android 4.0.4 & 4.4.2).

I have not "investigated" the issue but the first icons are of very poor quality on both (and the test of the first one...):
upload_2017-3-29_17-24-59.png



(Also, I can not exit from the example app, but this is your fault :D)
 

ilan

Expert
Licensed User
I have not "investigated" the issue but the first icons are of very poor quality on both (and the test of the first one...):
yes those are simple png files. it seems like you are testing it on a 32" phone o_O
you could use hd icons or better use Fontawesome icons instead and you will get a very nice result. (like is shown in btn2_Click event)

(Also, I can not exit from the example app, but this is your fault :D)
yes thats true, just change this code and you should be able to exit the app.

B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
    Select KeyCode
        Case KeyCodes.KEYCODE_BACK
            If Spotlightmenu.isOpen Then
                Spotlightmenu.dismiss
                Return True
            Else
                Return False   
            End If
    End Select
    Return False
End Sub
 

LucaMs

Expert
Licensed User
I have not "investigated" the issue
Investigated a little.

yes those are simple png files. it seems like you are testing it on a 32" phone o_O
Tablet 10", but also on smartphone 4.3" bad look. Especially the circles around the images.

I think that you should draw the images using Canvas.DrawBitmap and anti-aliasing, since the PNGs are big enough (64x64). Try please :)
[P.S. no, 64x64 is not enough for my tablet, using an image 128x128 it looks better. So, only the circle should be drawn better, with antialiasing)

Example project: on my tablet, the item height should be set to 6%y, 8%y is too much. I know that it is an example, but I'm thinking that you could also adjust (in the library, not in the project) the minimum height to 45dip or 50dip. Same for the TextSize, but this is less important (maybe).

Finally (LucaMs you're a nuisance :D) you should be able to choose an item also clicking on the images.


Note that I do not know if I'll never use this VERY NICE "view", I'm just trying to help.
 
Last edited:

metrick

Active Member
Licensed User
Even with SetApplicationAttribute(android:theme,"@android:style/Theme.Holo") added to manifest the popup button still covered the button on LG G4. I'm using version 1.02.
The popup look nice. Is there a way to change or custom the popup background?
 

ilan

Expert
Licensed User
Even with SetApplicationAttribute(android:theme,"@android:style/Theme.Holo") added to manifest the popup button still covered the button on LG G4. I'm using version 1.02.
please try out v1.03 and let me know if it is working now.

The popup look nice. Is there a way to change or custom the popup background?
B4X:
Dim bg As ColorDrawable
bg.Initialize(Colors.Green,Spotlightmenu.getitemheight)
Spotlightmenu.ItemPanel(index).Background = bg
 

metrick

Active Member
Licensed User
please try out v1.03 and let me know if it is working now.



B4X:
Dim bg As ColorDrawable
bg.Initialize(Colors.Green,Spotlightmenu.getitemheight)
Spotlightmenu.ItemPanel(index).Background = bg
Ilan: just donate beer for you. thanks for the update. Will try it when I get home.
 
Top