How to make scrollview always fill entire screen

Solar2D General Questions/Discussion
1

Hello, I’m trying to create a scrollview that fits the screen completely with no black bars at the top and bottom.

I’ve tried using screenOriginY and top = 0 - (display.actualContentHeight - display.contentHeight) / 2 but neither of them work.

I also tried both the default width = 320, height = 480 and width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ) configurations but the scrollview still stays within the letterbox area. The code and screenshot are below:

local view = widget.newScrollView(
    {
        top = display.safeScreenOriginY,
        left = display.safeScreenOriginX,
        width = display.safeActualContentWidth,
        height = display.safeActualContentHeight,
        hideScrollBar = true,
        horizontalScrollDisabled = true,
        backgroundColor = {1, 1, 1}
    }
)

Screenshot_20210716_135658
Screenshot_20210716_1356581080×2160 13.7 KB

2

i think this might work … keep in mind that phones has a safe area that you need to avoid specially at the bottom and at the top where you might find the camera lens or home back buttons\

local view = widget.newScrollView(
    {
        top = display.screenOriginY,
        left = display.screenOriginX,
        width = display.actualContentWidth,
        height = display.actualContentHeight,
        hideScrollBar = true,
        horizontalScrollDisabled = true,
        backgroundColor = {1, 1, 1}
    }
)
3

I tried it but it didn’t work. Thanks anyway.
I guess the 2:1 aspect ratio on the device I’m testing with has something to do with it. I think I’ve tried everything by this point but maybe there’s something I’m missing.

4

make sure you have this in your config.lua file

scale = “letterBox”,

5

I do have it, I’m using the letterbox scaling.

6

What about using the x and y properties instead of left and top?

local view = widget.newScrollView(
{
x = display.contentWidth * 0.5,
y = display.contentHeight * 0.5,
width = display.safeActualContentWidth,
height = display.safeActualContentHeight,
hideScrollBar = true,
horizontalScrollDisabled = true,
backgroundColor = {1, 1, 1}
}
)

Maybe it worked?

7

Just an important announcement to whomever may come across this thread.

You should not use this in your config.lua:

width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio )

This will potentially result in all sorts of undesirable events with resize events. The entire idea with that config setting, when someone wrote it in 2013 or so, was to create a content area that will always match the device’s screen size. However, with Android’s software navbar and other events that may cause the screen size to change after the app has launched, the main intended purpose of that config.lua setup is no valid.

As for @devex’s issue, if that is a screenshot from an actual Android device, then you are probably running precisely into issues with immersiveSticky mode.

8

It is an android device and I am indeed using immersiveSticky. Even when using the default config.lua, the problem persists. It only goes away when I remove the immersiveSticky, but leaves the navigation bar around, which I can’t have as the game is supposed to be fullscreen. Is there any known way to solve this problem, or am I best using zoomEven?

9

@proV, thanks for the suggestion, but it didn’t work

11

What about:

local view = widget.newScrollView(
{
x = display.safeActualContentWidth * 0.5,
y = display.safeActualContentHeight * 0.5,
width = display.safeActualContentWidth,
height = display.safeActualContentHeight,
hideScrollBar = true,
horizontalScrollDisabled = true,
backgroundColor = {1, 1, 1}
}
)

12

Your issue is likely that it takes the device a moment to update the display. Enabling immersiveSticky isn’t a single-threaded, blocking function call. It’ll take a fraction of a second for it to go through and for Solar2D’s display APIs to be updated.

You can figure out if this is your problem by adding the following code just before you set immersiveSticky mode:

print( "Initial:")
print( display.actualContentWidth )
print( display.actualContentHeight )
timer.performWithDelay( 1000, function()
	print( "Updated:")
	print( display.actualContentWidth )
	print( display.actualContentHeight )
end )

If the initial and updated values have changed, then that’s your issue. You just need to wait some time for the changes to occur.

2 Likes
13

@XeduR Wow, thank you so much, it worked. You’ve lifted a heavy point of frustration for me. Thank you greatly