Android Question What is the best way to do popups?

Daica

Active Member
Licensed User
I want to improve on user experience and UI a bit more in my app. Right now all I do is use a simple MsgBox to show messages.
I want to add popups for certain things, like errors, success, etc.

What is the best way to do it without making the code confusing or messy?
Here are some ways I thought of, and tried out, but not sure.

1. Have 1 "popupPanel" that is declared in Class_Globals.
* When I need to show a popup, add the panel to Root
* Load the layout for the popup, depending on what kind of popup (error, success, etc)
* Update/Set the icons and text on the popup
* When popup is closed, remove all views

2. Use Alex's Library (https://www.b4x.com/android/forum/threads/b4x-as-floatingpanel.141754/#content)
* Similar to option 1 but most of the logic is already handled

3? 4?
 

Alexander Stolte

Expert
Licensed User
Longtime User
 
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
 
Upvote 0

Daica

Active Member
Licensed User
I saw this before and have used it in some of my smaller projects, the thing is that, and this is my opinion, it just doesn't look quite as "pretty"?
For example, this is what I had in mind (Using Alex's login template btw :D)

1690574202785.gif


The examples you gave, they're good for simple and quick popups, but its hard to make it similar to the GIF

I can't name the competition but it seems there are a lot more pretty widgets and components available to developers to use.
However, people like you and many other developers on B4X are still releasing things, so thats super great to see.

If I was more skilled, I could create a bunch of these widgets and components as well to compete
 
Last edited:
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
Or you can omit the popup. The TextField also supports text under the input field. Or use a ToastMessage. I don't know when I last saw MessageBoxes in an app.
Example #1
1690575061542.png

Example #2
 
Upvote 1

Alexander Stolte

Expert
Licensed User
Longtime User
but its hard to make it similar to the GIF
To have the effect as in the picture is generally difficult. In B4A there is an animation lib. with which you can do this easily, but unfortunately this is not available in b4i. And an own bounce animation is not so easy to achieve. I had tried 2 years ago to get one. But it did not look natural
 
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
but its hard to make it similar to the GIF
Anyway, here is a B4X Example of the gif :D
It looks better in real
Test.gif

B4X:
    Dim Dialog As B4XDialog
    Dialog.Initialize(Root)
   
    Dialog.BorderCornersRadius = 20dip
    Dialog.BackgroundColor = xui.Color_White
   
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 300dip, 400dip)
    p.SetColorAndBorder(xui.Color_White,0,0,20dip)
   
    p.LoadLayout("CustomDialog")
   
    Dialog.ShowCustom(p,"","","")
    SetCircleClip(Dialog.Base,20dip)
   
    Sleep(500)
    Dialog.Base.SetRotationAnimated(50,10)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,0)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,-10)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,0)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,10)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,0)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,-10)
    Sleep(50)
    Dialog.Base.SetRotationAnimated(50,0)
    Sleep(50)
 

Attachments

  • Test.zip
    9.4 KB · Views: 163
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
? B4XDialog
1.gif

Ref:
 
Last edited:
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
If you want, you can create a class with B4XDialog like this:
Note:
I already have a class that I have created.
 
Upvote 0

Ilya G.

Active Member
Licensed User
Longtime User
If you want, you can create a class with B4XDialog like this:
Note:
I already have a class that I have created.

Can you share it?
 
Upvote 0

Daica

Active Member
Licensed User
If you want, you can create a class with B4XDialog like this:
Note:
I already have a class that I have created.

If it is something you can share, that would be wonderful
 
Upvote 0
Top