B4J Question [SOLVED] Styling A CLV Used As A Button List

[cklester]

2021.04.15 - The fixed project is attached to this OP.

As a follow-up to this thread, the CLV as button list in the attached project is working very well. However, the styling needs to be fixed.

How would I get rid of the border line (#1 in image below) and the white space (#2 in image below).

 

[knutf]

Perhaps you can try/get some inspiration from This post.

 

[TILogistic]

image not found ideaa.png

 

[cklester]

image not found ideaa.png

I'm not getting that error, but I do get an error when attempting to view the SplashLogin layout... There's no reference in the code to ideaa.png that I can find, and I don't see where on the SplashLogin layout it is. Weird!

I've updated the file after removing an image view from SplashLogin. Not sure if that will help...

 

[Andrew (Digitwell)]

I had the problem with ideaa.png missing also...

To fix your problem, you need to do 3 things.

1. use XUIViewsUtils.AddStubToCLVIfNeeded as described here https://www.b4x.com/android/forum/t...ud-color-of-the-customlistview-in-b4j.125218/.
   This will fix the white at the bottom.
   
   
2. set the background colour of the scrollview to transparent.
   clv_MenuButtons.sv.Color = fx.Colors.To32Bit(fx.Colors.transparent)
   This will get rid of the white outline
   
   
3. set the focus color to the background color. This is done in the Designer.
   
   

The code in win_dashboard should be:

Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private fx As JFX

    Private Dashform As Form
    
    Private pn1 As pane_1
    Private pn2 As pane_2
    Private pn3 As pane_3
    
    Private lblDashboardTitle As B4XView
    Private clv_MenuButtons As CustomListView
    
    Private pnLayoutLoader As B4XView
    Private lbl_MenuName As B4XView
    Private lbl_MenuButton As B4XView
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1

    Dashform = B4XPages.GetNativeParent(Me)

    Dashform.Initialize("Dashform",1024,768)
    
    Dashform.SetFormStyle("TRANSPARENT")
    Dashform.BackColor = fx.Colors.Transparent    'To enforce round corner from panel
    Dashform.Resizable = False
    Dashform.RootPane.LoadLayout("DashboardV2")
    Dashform.Title = "App - Dashboard"


    
    Dashform.Show
    Dashform.RootPane.Alpha = 0
    Dashform.RootPane.SetAlphaAnimated(800,1)

'    pnLayoutLoader.SetColorAndBorder(0,5,0xFF3C334E,10)

    pn1.Initialize
    pn2.Initialize
    pn3.Initialize

    AddMenuButton(pn1)
    AddMenuButton(pn3)
    AddMenuButton(pn2)

   ' Remove the white order
    clv_MenuButtons.sv.Color = fx.Colors.To32Bit(fx.Colors.transparent)

    ' Add the colour at the bottom, see https://www.b4x.com/android/forum/threads/solved-is-there-a-bug-with-backgroud-color-of-the-customlistview-in-b4j.125218/
    XUIViewsUtils.AddStubToCLVIfNeeded(clv_MenuButtons, clv_MenuButtons.AsView.Color)
 
    clv_MenuButtons_ItemClick(0,pn1)

End Sub

Private Sub AddMenuButton (val As Object)
    Dim newMenuBttn As B4XView
    newMenuBttn = xui.CreatePanel("")
    newMenuBttn.LoadLayout("menu_ButtonLayout")
    newMenuBttn.Height = 120dip
    lbl_MenuName.Text = CallSub(val,"GetName")
    lbl_MenuButton.Text = CallSub(val,"GetIcon")
    clv_MenuButtons.Add(newMenuBttn,val)
    clv_MenuButtons.sv.Color = fx.Colors.To32Bit(fx.Colors.transparent)
    
End Sub

Private Sub clv_MenuButtons_ItemClick (Index As Int, Value As Object)
    Try
        pnLayoutLoader.RemoveAllViews
        CallSub2(Value,"Show",pnLayoutLoader)
        lblDashboardTitle.Text = "App - " & CallSub(Value,"GetName")
    Catch
        Log("clicked on stub")
    End Try
End Sub

 

[cklester]

To fix your problem, you need to do 3 things.

Brilliant! Thank you!

3. set the focus color to the background color. This is done in the Designer.

I haven't needed to do that, unless it's doing something behind the scenes that is important.

What would happen if I did not set the focus color to the background color?

The code in win_dashboard should be:

    '...
    clv_MenuButtons.sv.Color = fx.Colors.To32Bit(fx.Colors.transparent)
   '...

I'm also not having to do the above mod to the CLV.sv.Color. At least, not for the display's sake...

Thank you for the help!

 

[Andrew (Digitwell)]

@cklester,

Glad that it worked for you with less code.

set the focus color to the background color. This is done in the Designer.

That is strange as this was the only way I could remove the blue focus line around the whole custom control. If you set it to red or yellow, it will become more obvious.

' Remove the white (b)order
clv_MenuButtons.sv.Color = fx.Colors.To32Bit(fx.Colors.transparent)

I found that the Custom control had a single pixel white border around it which I could not remove in any other way but to set the sv colour to your background colour or transparent.