Android Question How to design long layouts?

[FrostCodes]

Hello everyone,
I sort of tried a way to build long layout and I like to know if this is a good way around the issue.
I made a main layout that contains just a CustomListView
then I made a longscreen layout that i removed the default variant and made a new one.

The new variant specs is 320 x 1200 ( W x H) and scale of 1 (160dpi)
and I got something like the image attached.

Then I loaded the layout in a panel and attached it to the CustomListView and I was able to get a long scrolling screen.
I tested on a portrait phone and a tablet (landscape) and it seems to work but I would like to know if this is a good way to implement long layouts?
Also for some reason I can't seem to figure out, on landscape mode, I had to add an additional 200dip to the height to make it scale properly.
I suspect the resizing of font and auto sizing but I am not sure.

The sample project is also attached.


Final B4A version here:

How to design long layouts?

Hello everyone, I sort of tried a way to build long layout and I like to know if this is a good way around the issue. I made a main layout that contains just a CustomListView then I made a longscreen layout that i removed the default variant and made a new one. The new variant specs is 320 x...

www.b4x.com

B4J version here:

How to design long layouts in B4J?

Hello everyone, Recently, I asked about a way to build long, scrollable layouts in B4A and we were able to get it working there. Now, I am trying to implement the exact same concept in B4J, but I am running into a specific anchoring/resizing issue unique to desktop screens. I created two...

www.b4x.com

 

[Jerryk]

I think the concept of long layouts is not good. Neither from the user nor the developer point of view. Look at "billions" apps and reanalyze their behavior. Split the app into multiple pages, you will save yourself more nerves

 

[FrostCodes]

I think the concept of long layouts is not good. Neither from the user nor the developer point of view. Look at "billions" apps and reanalyze their behavior. Split the app into multiple pages, you will save yourself more nerves

This doesn't answer my question at all. I am not looking for UX advice or opinions on whether long layouts are 'good concept.'

The project requires a single scrolling view. My question is strictly about B4A layout scaling and why the panel height behaves weirdly in landscape mode. Let's keep the discussion on the actual code problem, please.

Long dashboard screens exist in plenty of successful apps. Sometimes a long scrolling layout is exactly what the user flow needs, especially for a product detail page, a social media feed, or a fitness dashboard.

 

[b4x-de]

If the question is: "Is this a good way to implement long layouts?", then I would say no.

A CustomListView is designed to manage list items. Using it to host a single long layout effectively turns it into a ScrollView with extra overhead and complexity.

For a long form or a single large layout, a ScrollView would be the more natural and straightforward solution.

 

[klaus]

I agree with b4x-de.
I would do it with a ScrollView in 'Layout' and in 'longlayout' a Panel with all the views on it, with the standard variant not a new one, but its height is of course higher than the screen.

And the code:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    Private scvMainLayout As ScrollView
    Private pnlMain As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    
    
    'load the layout onto the internal Panel of the ScrollView
    scvMainLayout.Panel.LoadLayout("longlayout")
    'set the ScrollView's internal Panel height to the layout panel height
    scvMainLayout.Panel.Height = pnlMain.Height
End Sub

This works in both orientations.
Attached the test project.

 

[LucaMs]

A CustomListView is designed to manage list items. Using it to host a single long layout effectively turns it into a ScrollView

CustomListView is a ScrollView (that's why @klaus rightly suggested using the latter).

 

[FrostCodes]

If the question is: "Is this a good way to implement long layouts?", then I would say no.

A CustomListView is designed to manage list items. Using it to host a single long layout effectively turns it into a ScrollView with extra overhead and complexity.

For a long form or a single large layout, a ScrollView would be the more natural and straightforward solution.

You are right. I got confused because I read something like this years ago and even though this does not necessarily apply to my situation, I ended up just going with CustomListView without first testing.

 

[FrostCodes]

I agree with b4x-de.
I would do it with a ScrollView in 'Layout' and in 'longlayout' a Panel with all the views on it, with the standard variant not a new one, but its height is of course higher than the screen.

And the code:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    Private scvMainLayout As ScrollView
    Private pnlMain As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
   
   
    'load the layout onto the internal Panel of the ScrollView
    scvMainLayout.Panel.LoadLayout("longlayout")
    'set the ScrollView's internal Panel height to the layout panel height
    scvMainLayout.Panel.Height = pnlMain.Height
End Sub

This works in both orientations.
Attached the test project.

Klaus, your example worked perfectly and even solved the layout scaling issue. I appreciate both you and @b4x-de answers.

I think this solution will be incredibly helpful as a reference for newer developers who need to create something like a long registration form or a continuous scrolling dashboard.

I'm going to try converting this example to B4J next to see if the same approach applies there as well. Thanks again!

 

[klaus]

You can do the same with B4J, you could also define the ScrollView as a B4XView.
To see what can be done with a ScrollView you might have a look at this thread ScrollView examples summary.
It is an old thread but the principles are still the same.

​

 

[LucaMs]

I assume the example Klaus posted is what you were looking for.
But I'm curious.
When you rotate your smartphone, the app adapts, meaning the ScrollView becomes wider; okay, but wouldn't it be nicer if the scrolling became horizontal at that point?

 

[FrostCodes]

You can do the same with B4J, you could also define the ScrollView as a B4XView.
To see what can be done with a ScrollView you might have a look at this thread ScrollView examples summary.
It is an old thread but the principles are still the same.

​

Thanks, I'll definitely check out that thread!
I've already adapted the sample into a B4J version, but I've hit a small limitation. I'm not sure if it's an issue with my implementation or just an inherent behavior of the view itself.

If you or anyone is curious to take a look, I'd love your feedback. I think templates like this are super useful for devs trying to build long dashboard screens.

 

[FrostCodes]

I assume the example Klaus posted is what you were looking for.
But I'm curious.
When you rotate your smartphone, the app adapts, meaning the ScrollView becomes wider; okay, but wouldn't it be nicer if the scrolling became horizontal at that point?

I think it really depends on the specific use case and what you are trying to achieve.

For a dashboard or a long form, users generally expect to keep scrolling vertically even if they turn the screen.
For many business or utility apps, locking the orientation entirely to portrait is a very common choice, which is why Klaus's example works so perfectly for this scenario.

However, for something like a media or gallery app, switching to horizontal scrolling on rotation makes sense depending on your design decisions.
For instance, portrait mode could display a vertical list of thumbnails, but once the user rotates to landscape, the app could switch to a full-screen, horizontal-swipe view.

On the implementation side, you could definitely achieve this by using a landscape variant in the designer, or by detecting the orientation change to hide the vertical list and load a horizontal layout instead.