Android Question [SOLVED] B4XDialog - possible to have scrollbar?

mfstuart · May 18, 2023

I'm using the B4XDialog to display a "Color Picker" and I'd like to have a scrollbar added to it, as I want to add more colors to pick from than the vertical size of the B4XDialog.
There are 4 shades of a color across and there will be many more colors vertically.
I need a dialog that is cross platform and will allow the user to scroll vertically to pick a color.
The user touches on a color to select it. The dialog should then close after selecting a color.

I have a layout with 24 Labels on it.

What is the best way to do this?
the B4XDialog is loaded like this...

B4X:

Dim rs As ResumableSub = dg.ShowCustom(ListOfColorsPanel,"","","CANCEL")

Thanx,
Mark Stuart

My Color Picker - B4XDialog:

PaulMeuris · May 18, 2023

B4X CustomListView ?

mfstuart · May 18, 2023

Using CLV, I would have to load each line of the 4 colors then load that layout into the CLV.
Is that how you see it?

TILogistic · May 18, 2023

see demo:

Grid Class - PreoptimizedCLV

Grid using Erel sample code based on PreoptimizedCLV -> https://www.b4x.com/android/forum/threads/grid-class-preoptimizedclv.116309/#post-726808 Example applied on F1, Work very nice: The idea of this class is to be able to load in a 3 column Grid (customizable) a long list of url images...

www.b4x.com

Grid Class, easy and fast grid

Hello, I would like to share with all people a small Class code. Together we can keep improving code and to have a quick and easy to use. Images are via URL using the #AdditionalJar: picasso-2.5.2, can you read more about that in...

www.b4x.com

search:

Search Results

www.b4x.com

toby · May 19, 2023

Alternatively you can use the ColorTemplate which allows you to pick any color.

B4X:

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Dim dialog As B4XDialog
    Dim colorTemplate As B4XColorTemplate
End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    dialog.Initialize(Root)
    colorTemplate.Initialize
    
    Wait For(dialog.ShowTemplate(colorTemplate, "Yes", "No", ""))complete(intResult As Int)
     If intResult=xui.DialogResponse_Positive Then 
        Root.Color=colorTemplate.SelectedColor
    End If 
End Sub

TILogistic · May 19, 2023

other.

[B4X] XUI Views - Cross platform views and dialogs

XUI Views is a b4x library (https://www.b4x.com/android/forum/threads/100383/#content). The same b4xlib library is compatible with B4A, B4i and B4J It is a collection of custom views and dialogs. Everything is written in B4X. The source code is included inside the b4xlib file, which is a zip...

www.b4x.com

PaulMeuris · May 19, 2023

mfstuart said:
Using CLV, I would have to load each line of the 4 colors then load that layout into the CLV.
Is that how you see it?

Yes.
Here's what i had in mind:

create an item layout: a panel with 4 labels (set the corner radius of each label at 25 to get a circle)
create a subroutine to fill the CLV: a for loop for the number of item panels you want
for each iteration call a subroutine to fill each item panel using the item layout
create a subroutine to set the colors of the labels and call that subroutine in the fill items subroutine
set for each label a tag indicating the CLV item index and the label number (1-4)
in the label click events you can use the label tag to identify the color label

Here's how it might look like:

In this example i use random colors but you can set the correct colors in the set colors subroutine.
You could read color values from a JSON file for instance.
Add the CLV to your ListOfColorsPanel and you are good to go.
Happy coding!

mfstuart · May 19, 2023

Thanx Paul,
I'll give it a try and if I figure it out, I'll post the app as a demo.
Mark

mfstuart · May 21, 2023

PaulMeuris said:
Yes.
Here's what i had in mind:

create an item layout: a panel with 4 labels (set the corner radius of each label at 25 to get a circle)
View attachment 142140

create a subroutine to fill the CLV: a for loop for the number of item panels you want

for each iteration call a subroutine to fill each item panel using the item layout

create a subroutine to set the colors of the labels and call that subroutine in the fill items subroutine

set for each label a tag indicating the CLV item index and the label number (1-4)

in the label click events you can use the label tag to identify the color label

Here's how it might look like:
View attachment 142141
In this example i use random colors but you can set the correct colors in the set colors subroutine.
You could read color values from a JSON file for instance.
Add the CLV to your ListOfColorsPanel and you are good to go.
Happy coding!

I tried your idea, but did not complete it. As I was running it to my tablet, I realized that this idea is not really suitable as I really want a "popup" dialog UI.
The B4XDialog does create its own Activity for the Dialog, and it "overlays" this dialog on the self-created Activity. Looks good.

Now, if only I can get the scrollable list of colors in this Dialog.

Can a panel have a vertical scrollbar for oversized layouts?
I see there are 5 Scroll... properties (in code) for a Panel. Can they be utilized for my situation? I've never used them before.

Thanx,
Mark Stuart

PaulMeuris · May 22, 2023

Did you add the CLV to your ListOfColorsPanel (replacing the 24 labels that were there before) ?
Can you post the code you have so far ?

PaulMeuris · May 22, 2023

mfstuart · May 22, 2023

I removed the code from the demo app that I had tried with your ideas, and resorted to what I use in my other app.
I still use the B4A Default for development - haven't gotten to learn the newer B4XPages concept yet.

I've attached my version of the Color Picker.

I'm trying to find the B4X web page for help on the 5 "Scroll..." properties for the B4XDialog. Can't seem to find it. Searching the forum, can't find anything on these properties either.

Regards,
Mark Stuart

PaulMeuris · May 23, 2023

As i suggested in message #10 you can replace the labels with the CLV.
I have modified your PickAColor version to use a CLV. See the attached zip-file.
You can compare your version with my B4XPages test version i also attach. There is only one activity.
The vertical scrolling is done in the CLV. You don't need any other scrolling properties from the B4XDialog!
Your version uses a text file with hex strings whereas my version uses a JSON file. The implementation is slightly different.
Happy coding!

mfstuart · May 23, 2023

Paul,
Unfortunately, I get the following error when trying to run your B4XPages app...

B4X:

B4A Version: 12.20
Parsing code.    (0.11s)
    Java Version: 8
Building folders structure.    (0.01s)
Running custom action.    Error
-------------------------------------------------------------------------------
   ROBOCOPY     ::     Robust File Copy for Windows                            
-------------------------------------------------------------------------------
  Started : Tuesday, May 23, 2023 10:26:30 AM
   Source : D:\Projects\B4A\Shared Files\
     Dest : D:\Projects\B4A\PickAColor_Paul\Files\
    Files : *.*
       
  Options : *.* /DCOPY:DA /COPY:DAT /R:1000000 /W:30
------------------------------------------------------------------------------
2023/05/23 10:26:30 ERROR 2 (0x00000002) Accessing Source Directory D:\Projects\B4A\Shared Files\
The system cannot find the file specified.

AnandGupta · May 23, 2023

mfstuart said:

Paul,
Unfortunately, I get the following error when trying to run you B4XPages app...

B4X:

B4A Version: 12.20
Parsing code.    (0.11s)
    Java Version: 8
Building folders structure.    (0.01s)
Running custom action.    Error
-------------------------------------------------------------------------------
   ROBOCOPY     ::     Robust File Copy for Windows                            
-------------------------------------------------------------------------------
  Started : Tuesday, May 23, 2023 10:26:30 AM
   Source : D:\Projects\B4A\Shared Files\
     Dest : D:\Projects\B4A\PickAColor_Paul\Files\
    Files : *.*
       
  Options : *.* /DCOPY:DA /COPY:DAT /R:1000000 /W:30
------------------------------------------------------------------------------
2023/05/23 10:26:30 ERROR 2 (0x00000002) Accessing Source Directory D:\Projects\B4A\Shared Files\
The system cannot find the file specified.

Please change the robocopy line in the B4X project. It is pointing to path in Pauls hdd.

Mahares · May 23, 2023

I think it is easier to simply comment this line and you will be good to go:
#CustomBuildAction: folders ready, %WINDIR%\System32\Robocopy.exe,"..\..\Shared Files" "..\Files"

AnandGupta said:
the robocopy line in the B4X project. It is pointing to path in Pauls hdd

I don't think the OP started working with B4XPages based on his post #12. He may not be familiar with what you are telling him.

mfstuart · May 23, 2023

Paul, thanx for posting both of the Pick a Color apps. Much appreciated!
Loading the CLV is the key thing in your changes that I was struggling with, so kudos to you!

I changed some scripts, colors, and layouts in my (Default) app...
Commented out the 4 subs: lbl_Click.
If you change the Event Name on each of the labels in the clvitem_layout.bal to "PickColor", then you only need 1 _Click event - PickColor_Click. See the app for this.

I've attached my app changes.

Thanx all for your suggestions. I think I'm going with what Paul put together.

Mark Stuart

EDIT: I've updated the demo app - PickAColor1.zip - code and many more colors.

AnandGupta · May 23, 2023

Hi @mfstuart, glad that you found the better solution.
But I think you should mark @PaulMeuris 's message as solved, instead of self.

Mahares · May 24, 2023

mfstuart said:
I'm going with what Paul put together

Maybe before you declare the thread solved, should you not give other members a chance to comment on your project in post #17. I have 2 remarks:
1. You open the colors list file twice when only once is sufficient.
2. The exact number of colors on the xClv appears only if you have a list of colors divisible by 4. For instance if the list has 62 colors, two of them are left out and your XClv displays only 60. Therefore, the below code you have in your project is suspicious:

B4X:

For i = 0 To (lst.Size/4) - 1
        Dim pnl As Panel = clv1_item(i,lst)
        clv1.Add(pnl,i)
    Next

PaulMeuris · May 24, 2023

The PickColor_Click event subroutine is a good idea.

mfstuart said:
There are 4 shades of a color across and there will be many more colors vertically.

You don't need to change the code for filling the clv1 but be aware that your list of colors must have a number of colors that is divisible by 4!
The layout contains 4 labels in each row panel.

Android Question [SOLVED] B4XDialog - possible to have scrollbar?

Active Member

Active Member

Active Member

Expert

Well-Known Member

Attachments

Expert

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Attachments

Active Member

Attachments

Active Member

Expert

Expert

Active Member

Attachments

Expert

Expert

Active Member

Similar Threads