Android Question How to determine the height of xCLV items?

Daica

Active Member
Licensed User
Helly everyone,

In examples and tutorials, I've seen for xCustomListView, I see people just put in x dip as a value.
For example:

B4X:
Dim p As B4XView = xui.CreatePanel("")
p.Color = xui.Color_Black
     
p.SetLayoutAnimated(0, 0, 0, 100%x, 200dip) '<----- how do I determine what 200dip is supposed to be?
p.LoadLayout("ListViewItems")

My "ListViewItems" layout has a panel that contains all the items, for example maybe a EditText, Label, ImageView, and Button.
Something like this:
1619132303382.png


How do I determine that 200dip is correct? Do I add up all the heights of my items or something? Do I debug 10x and test different heights until I find something that fits?

Another thing is that after adding my item, there is a huge gap between items in my list. In the examples and tutorials I've seen, the items has a nice even gap between them
 

Unobtainius

Active Member
Licensed User
Longtime User
Usually I take the lowest items top plus its height plus hightest items top, but all your items are in a panel, so in this particular case, panel height + (panel top x 2)
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Because your first panel item is offset from the top of the panel you will likely need to add first panel items top to get an even layout.
 
Upvote 0

Daica

Active Member
Licensed User
Usually I take the lowest items top plus its height plus hightest items top, but all your items are in a panel, so in this particular case, panel height + (panel top x 2)

Because your first panel item is offset from the top of the panel you will likely need to add first panel items top to get an even layout.

I'll list all my item's top and height to see if I can get this right.
  • Panel1: TOP: 10, HEIGHT: None, but there is BOTTOM EDGE DIST: 150
  • lblSegmentCode: TOP: 10, HEIGHT: 30
  • TakenPicturePreview: TOP: 40, HEIGHT: 180
  • lblSegmentDetails: TOP: 220, HEIGHT: 50
Panel1 Height (150) + Panel1 Top * 2 (20) + lblSegmentCode Top (10) = 190dip?
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Just think of the panel as the clv row. Use the panels height as the clv height. If you offset the top of the panel then add the offset x 2 to the panel height for the clv height. Note, to use this method, don't offset you controls from the top of the panel like you have in the picture
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
In your pic the panel incasules the other controls so you don't need to take them into account to work out the clv height
 
Upvote 0

Daica

Active Member
Licensed User
Just think of the panel as the clv row. Use the panels height as the clv height. If you offset the top of the panel then add the offset x 2 to the panel height for the clv height. Note, to use this method, don't offset you controls from the top of the panel like you have in the picture

So should I load the layout and THEN grab the panel's height? Something like this...

B4X:
p.SetLayoutAnimated(0, 0, 0, 100%x, 100dip)
p.LoadLayout("ListViewItems")
p.SetLayoutAnimated(0, 0, 0, 100%x, Panel1.height + 10dip) 'offset is 5dip so 5*2 = 10dip
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
? You only set the height once. And first, before you load the layout file
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
In the designer genrate a reference to the panel so the app knows your panel height. It's the only way to refence the panel height otherwise regardless of loading the layout the app still can't access anything about the panel
 
Upvote 0

Daica

Active Member
Licensed User
In the designer genrate a reference to the panel so the app knows your panel height. It's the only way to refence the panel height otherwise regardless of loading the layout the app still can't access anything about the panel

The panel is part of the Layout for the CLV item. Until I load the layout, if I try to access the panel's properties, I will get an error : Object should first be initialized (Panel).
That is why I set the layout twice.

The anchor on my panel is set stretch left/right and top/bottom so there is no "Height" property. Maybe I will try setting the anchor to stretch left/right and vertical anchor to Top
1619140185007.png

1619140285288.png


I'll set the vertical anchor to TOP so that there is a height property so I can use it.
1619140326391.png

270 + (5 * 2) = 290dip
This looks MUCH better now.
 
Last edited:
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
If you are going to anchor the panels top and bottom, strech it in the designer to take up the designer surface otherwise results will be weird
 
Upvote 0

Daica

Active Member
Licensed User
If you are going to anchor the panels top and bottom, strech it in the designer to take up the designer surface otherwise results will be weird

I will try removing the panel as well, and try your method of the lowest items top plus its height plus (highest items top * 2)
Thank you so much for your wisdom
 
Last edited:
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Highest items top x 2
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Yours would be easy if you moved lblSegmentCode to the top of the panel

Then just go panel height + (panel top x 2)
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Remember right click and the panel in he designer and generate panel as b4xview
 
Upvote 0

Unobtainius

Active Member
Licensed User
Longtime User
Then you clv won't have a gap between each row of controls other than its built in one
 
Upvote 0

Daica

Active Member
Licensed User
I see, so there are a few different ways to do it. I will play around with all of it.
The only thing is I have to figure out how to change the size if the text is too long for example.
Thank you for all your help!
 
Upvote 0
Top