Android Question [SOLVED] Determining the Custom List View Panel height for different devices

mfstuart · Sep 20, 2021

I'm using the Custom List View to display Purchase Orders - header and line items - each on their own CLV.
How do I set the optimum panel height for different devices, a phone compared to a tablet?
I debugged this on a Samsung S10 phone to figure out what the optimum height should be, but on a Samsung Tab A tablet, the height is too short. The height needs to be increased.

So how do you determine the panel height that works for all devices?

The detail values (Labels) are loaded into a Panel with the following code:

PO Header:

    Do While rs.NextRow
        Dim p As Panel
        p.Initialize("")
        p.Height = 400dip      '<=== set the panel height
        clvOrders.Add(p, rs.GetInt("POID"))
        
        p.LoadLayout("PO_Header_Detail")
        lblRequestedBy.Text = rs.GetString("POUserID")
        lblPOID.Text = rs.GetInt("POID")
        lblPODate.Text = rs.GetString("PODate")
        lblReqDate.Text = rs.GetString("ReqDate")
        lblPark.Text = rs.GetString("LocName") & " (" & rs.GetString("LocCode") & ")"
        lblDesc.Text = rs.GetString("Description")
        lblVendor.Text = rs.GetString("VendorName") & " (" & rs.GetString("VendorID") & ")"
        lblType.Text = rs.GetString("POTypeDesc")
        lblAmount.Text = "$" & NumberFormat2(rs.GetDouble("POAmount"), 0, 2, 2, True)
        Dim LineCount As Int = rs.GetInt("LineCount")
    Loop

Thanx in advance,
Mark Stuart

Erel · Sep 21, 2021

Can you post a screenshot?

mfstuart · Sep 21, 2021

Samsung Tab A - tablet: notice the word TYPE is cut off at the bottom:

Samsung S10 phone: all text is appearing as needed:

B4X Layout:

Let me know if you need anything more.

Thanx,
Mark Stuart

asales · Sep 21, 2021

Maybe this can help you:
1 - Put all the labels inside a panel in the layout
2 - Check the back panel size in the layout to get the correct height

B4X:

'check the panel size - it changes in different devices
Dim pTemp As B4XView = xui.CreatePanel("")
pTemp.SetLayoutAnimated(0, 0, 0, 100%x, 100%y)
pTemp.LoadLayout("layout")
Dim p2 As Panel = pTemp.GetView(0)  'first item of the layout = back panel

'put the size of the back panel into a variable
Dim PanelHeight As Int = p2.Height
pTemp.RemoveAllViews

'create the panel to the CLV
Dim p As B4XView = xui.CreatePanel("")
p.SetLayoutAnimated(0, 0, 0, 100%x, PanelHeight)
p.LoadLayout("layout")

'adjust the size of the panel in CLV accordly to the size of the device
p.Height = PanelHeight

mfstuart · Sep 21, 2021

asales said:

Maybe this can help you:
1 - Put all the labels inside a panel in the layout
2 - Check the back panel size in the layout to get the correct height

B4X:

'check the panel size - it changes in different devices
Dim pTemp As B4XView = xui.CreatePanel("")
pTemp.SetLayoutAnimated(0, 0, 0, 100%x, 100%y)
pTemp.LoadLayout("layout")
Dim p2 As Panel = pTemp.GetView(0)  'first item of the layout = back panel

'put the size of the back panel into a variable
Dim PanelHeight As Int = p2.Height
pTemp.RemoveAllViews

'create the panel to the CLV
Dim p As B4XView = xui.CreatePanel("")
p.SetLayoutAnimated(0, 0, 0, 100%x, PanelHeight)
p.LoadLayout("layout")

'adjust the size of the panel in CLV accordingly to the size of the device
p.Height = PanelHeight

On the line Dim p2 As Panel... , the code is only putting the first view (in my case a Label) into that panel. What would be the default Height of that p2 Panel? It would have some random value? 'Cause, I would have to code your example into mine to see, but on first look, it seems random and its height only be what the height of that first view.

Anyway thank you. I will try it out.
Mark Stuart

Mahares · Sep 21, 2021

Looking at the layout, it appears to be a classic layout. But, it can use some proper views anchoring along with perhaps some tweaking with designer script. FOr instance, the bottom 2 labels: lblPOTypeDesc and lblAmount should be anchored to the bottom of the parent panel.
I think you should attach a copy of the layout .bal file. Someone in the forum will probably figure it out.

mfstuart · Sep 21, 2021

I've attached two layout files. One with the views in the panel and one without a panel.
Can someone see what is required to make the views fit vertically for different devices?

Thank you,
Mark Stuart

mfstuart · Sep 21, 2021

asales said:

Maybe this can help you:
1 - Put all the labels inside a panel in the layout
2 - Check the back panel size in the layout to get the correct height

B4X:

'check the panel size - it changes in different devices
Dim pTemp As B4XView = xui.CreatePanel("")
pTemp.SetLayoutAnimated(0, 0, 0, 100%x, 100%y)
pTemp.LoadLayout("layout")
Dim p2 As Panel = pTemp.GetView(0)  'first item of the layout = back panel

'put the size of the back panel into a variable
Dim PanelHeight As Int = p2.Height
pTemp.RemoveAllViews

'create the panel to the CLV
Dim p As B4XView = xui.CreatePanel("")
p.SetLayoutAnimated(0, 0, 0, 100%x, PanelHeight)
p.LoadLayout("layout")

'adjust the size of the panel in CLV accordly to the size of the device
p.Height = PanelHeight

In your comments 1 & 2, which is that panel in your code?

Mahares · Sep 21, 2021

mfstuart said:
Can someone see what is required to make the views fit vertically for different devices?

Attached is a complete B4XPages project with xClv and your layout with_panel.bal. I tested in a samsung Tab A 7 inch and a samsung S10e phone. Both look good. I adjusted your layout. Check it out.

asales · Sep 22, 2021

mfstuart said:
On the line Dim p2 As Panel... , the code is only putting the first view (in my case a Label) into that panel. What would be the default Height of that p2 Panel? It would have some random value? 'Cause, I would have to code your example into mine to see, but on first look, it seems random and its height only be what the height of that first view.

Anyway thank you. I will try it out.
Mark Stuart

Here my code, based in the @Mahares example (Thanks, @Mahares ).
The AutoScaleAll is enable in the layout.
You can see the difference between the examples in the pictures.
Both fit in differents resolutions.
Asales: Mahares:

mfstuart · Sep 22, 2021

asales said:
Here my code, based in the @Mahares example (Thanks, @Mahares ).
The AutoScaleAll is enable in the layout.
You can see the difference between the examples in the pictures.
Both fit in differents resolutions.
Asales: View attachment 119425 Mahares:View attachment 119426

Thank you for your test app.
I tested it on both my devices: Samsung S10 and Samsung Tab A, and the layout fits as it should when running it on the devices.
I see how putting a panel on the layout with the views "inside" it, makes the difference.
I had to change my CLV_ItemClick to use the Value instead of inspecting the Index value.
The btnItems_Click had to change as well, because of the added Panel onto the layout.

And the panel is to fit the dimensions of the views, not the panel to fit the device size or gray area in the layout.
Mark Stuart

mfstuart · Sep 22, 2021

Mahares said:
Attached is a complete B4XPages project with xClv and your layout with_panel.bal. I tested in a samsung Tab A 7 inch and a samsung S10e phone. Both look good. I adjusted your layout. Check it out.

Hi Mahares,
I had changed my layout to what you have in yours, and also added the panel onto the layout and put the views "in" the panel.
Thank you for the time and effort you took to show me how all this works.
Mark Stuart

Mahares · Sep 22, 2021

asales said:
You can see the difference between the examples in the pictures.

Hi @asales: I am glad Mark will have the luxury of picking what suits him best from all these methods. That is what counts.
Your code could have been simplified some by using something like this:

B4X:

Root.LoadLayout("with_panel")
    Dim PanelHeight As Int = Panel1.Height  'get the height of Panel1  .Panel1 declared as B4XView in Class_Globals
    Panel1.RemoveViewFromParent    
    For i= 0 To 29
        Dim Pnl As B4XView = xui.CreatePanel("")
        Pnl.SetLayoutAnimated(0, 0,0, xClv.AsView.Width, PanelHeight)
        Pnl.LoadLayout("with_panel")
        Dim lbl As List = Array(lblPOID, lblRequestedBy, lblReqDate, lblPODate, lblPark, lblDesc, lblVendor, lblPOTypeDesc, lblAmount)
        For Each l As B4XView In lbl
            l.Color = xui.Color_Cyan
        Next
        xClv.Add(Pnl, i)
    Next

Instead of:

B4X:

For i= 0 To 29
        'check the panel size - it changes in different devices
        Dim pTemp As B4XView = xui.CreatePanel("")
        pTemp.SetLayoutAnimated(0, 0, 0, 100%x, 100%y)
        pTemp.LoadLayout("with_panel")
        Dim p2 As Panel = pTemp.GetView(0)  'first item of the layout = back panel
        'put the size of the back panel into a variable
        Dim PanelHeight As Int = p2.Height
        pTemp.RemoveAllViews        
        Dim Pnl As B4XView = xui.CreatePanel("")
'        Pnl.SetLayoutAnimated(0, 0,0, xClv.AsView.Width, 400dip)
        Pnl.SetLayoutAnimated(0, 0,0, xClv.AsView.Width, PanelHeight)
        Pnl.LoadLayout("with_panel")
        Dim lbl As List = Array(lblPOID, lblRequestedBy, lblReqDate, lblPODate, lblPark, lblDesc, lblVendor, lblPOTypeDesc, lblAmount)
        For Each l As B4XView In lbl
            l.Color = xui.Color_Cyan
        Next
        xClv.Add(Pnl, i)
    Next

Also, you do not need to have the procedure of getting the variable PanelHeight inside the loop.

Android Question [SOLVED] Determining the Custom List View Panel height for different devices

mfstuart

Active Member

Erel

B4X founder

mfstuart

Active Member

asales

Expert

mfstuart

Active Member

Mahares

Expert

mfstuart

Active Member

Attachments

mfstuart

Active Member

Mahares

Expert

Attachments

asales

Expert

Attachments

mfstuart

Active Member

mfstuart

Active Member

Mahares

Expert

Similar Threads

Android Question [SOLVED] Determining the Custom List View Panel height for different devices

Active Member

B4X founder

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Active Member

Expert

Attachments

Expert

Attachments

Active Member

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency