Gui not filling up properly on mobile devices

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? I want the black bars on the side to cometely fill.

  2. What is the issue? On mobile devices, they do not completely fill to the sides as shown in the picture. I am not sure if this is something related to my phone’s “safe space” or some sort. I am not an android dev so I dont know much beyond roblox studio. Device used was a Redmi A1:

  3. What solutions have you tried so far? Tried playing with the IgnoreGuiInset and tried using AutoScale Lite plugin but it doesnt seem to work.

TLDR: Black bar Frames not cover a portion of mobile screen.

Hello @redbloxian1212 ,
I noticed you were having trouble with your (GUI) frame’s compatibility on mobile.

Well let me start by saying because of all the tabs in studio, the screen (resolution) may not appear the same way it will in-game for both mobile and pc.

With that out the way, you can utilize the emulator while in studio:


It allows you to experiment and visualize how your game would look like in various other devices, example:

Try switching around the frame’s anchor point or position and see if that resolves it, taking a second glance at your screenshot I see the frames go past Roblox’s core UI’s so you probably already did this:
QuickStudioSnap3


My only other solution would be getting this plugin it has helped me so many times when in need, super useful and comes in handy at all times!

1 Like

Sadly it didn’t work, I just decided to remove it altogether

Make sure to set the Anchorpoint like @62qx said. Try {0.5, 0, 0.5, 0}. Also set the size/position properties to Scale rather than Offset if you haven’t already. Don’t give up!!!
image

2 Likes

There’s a possibility it could be related to that. What do you have set for the ScreenGui.ScreenInsets property?

According to the Roblox Creator Hub, either value you set IgnoreGuiInset to would not open up the full area of the screen; only either CoreUISafeInsets when false (default) or DeviceSafeInsets when true.


If you want to ensure that the GUI has the ability to completely cover those areas of the screen, set the value to ScreenInsets.None while keeping IgnoreGuiInset at the default value of false.

Here is the visual explainer image from the Roblox Creator Hub that showcases the boundaries of UI for each setting:

Edit: Reuploaded image; it didn’t load the first time for some reason.

3 Likes