How to Produce a Topbar based on TopBarSafeInsets

[JuanGamerPlayz_RBLX]

Hey there,

I am creating this topic here because I am looking for help to produce GUIs based on the new ScreenInsets called “TopBarSafeInsets”, which is new and available for a few devices on the Roblox whenever you’re in-game.

From what I remember, once hearing the thoughts of others regarding this update of integrating this new notched screen support, the plugin “Topbar Plus” would be deprecated due to it. This statement was from the words of someone who once said it, but it can be outdated… Likewise, I only build my GUIs with the default settings from Roblox Studio, but this time, I want to use these recent ScreenInsets.

Can someone help me out with this and how I can produce it? It would help me a lot to comprehend building more and more interfaces for any Roblox project!

Thanks!

[TimeFrenzied (rojoe)]

I believe that’s TopbarPlus V3, please press F9 and see if the game you’re in uses topbarplus.

[StrongBigeMan9]

The CoreUISafeInsets enum is not new; it’s the TopBarSafeInsets that’s new as a result of the Experience Controls Beta Update from the end of 2023.

According to the example from the Roblox Creator Documentation Site, setting ScreenGui.ScreenInsets to TopBarSafeInsets will automatically resize/position the descendants of the ScreenGui to fit between the controls and the device safe area.

Additional examples can be found on the announcement thread for the new Experience Controls:

@JuiceBoxYoda

4) Introducing a new top bar inset

To make it easier for you to design your experience UI in a way that is compatible with the Roblox reserved space, we are introducing a new, predefined value for ScreenInsets called “TopbarSafeInsets”

What is the new inset?

TopbarSafeInsets is a new inset type, with a predefined value, that we are adding to the ScreenInsets property available on ScreenGui instances. It will automatically resize to the available space in the top bar. The inset is designed to work across all screen orientations. This should make it easy for you to migrate existing UI that you have in this space and create responsive layouts.

The signal API and the new inset API are now available across Roblox client and Studio, working for both old and new Roblox UI to create adaptable and responsive UI. For more details on how to use them, see TopbarSafeInsets here and signal API here .

@JuiceBoxYoda

Instructions to access new API:

• Enable “Updated Roblox Controls” Beta Feature in Roblox Studio
• Use GuiService.TopbarInset and/or GuiService:GetPropertyChangedSignal(“TopbarInset”) to observe a Rect Data Type property describing the unobstructed area in the Top Bar
• Make updates, if necessary, to your UI if you’d like to avoid collisions based on the signals from these new APIs

Example of how the creator UI (in blue) can react to the experience controls changes:

Example snippet:

local GuiService = game:GetService("GuiService")
local Players = game:GetService("Players")

local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
screenGui.Parent = Players.LocalPlayer.PlayerGui

local frame = Instance.new("Frame")
frame.BackgroundColor3 = Color3.fromRGB(0, 255, 0)
frame.Parent = screenGui

GuiService:GetPropertyChangedSignal("TopbarInset"):Connect(function()
  local inset = GuiService.TopbarInset
  frame.Size = UDim2.new(0, inset.Width, 0, inset.Height)
  frame.Position = UDim2.new(0, inset.Min.X, 0, inset.Min.Y)
end)

[JuanGamerPlayz_RBLX]

@StrongBigeMan9

The CoreUISafeInsets enum is not new; it’s the TopBarSafeInsets that’s new as a result of the Experience Controls Beta Update from the end of 2023.

Oh yes, that is indeed true! The name was odd while writing because I didn’t remember the original. However, as you have mentioned, I have updated the description and title of the topic, my bad!

---

In the instructions, I see that the person used a code snippet, but I am not entirely sure if it is based on the size of Roblox’s newest topbar… From what I see in the sample you provided, they already know the size…

[StrongBigeMan9]

@JuanGamerPlayz_RBLX

In the instructions, I see that the person used a code snippet, but I am not entirely sure if it is based on the size of Roblox’s newest topbar… From what I see in the sample you provided, they already know the size…

The frame doesn’t have a fixed size because the amount of space available in the Topbar can change during runtime. Consequently, they would not be able to know how much space is available in the Topbar at all times unless they keep track of its current value, which is what the function is doing:

@JuiceBoxYoda

GuiService:GetPropertyChangedSignal("TopbarInset"):Connect(function()
  local inset = GuiService.TopbarInset
  frame.Size = UDim2.new(0, inset.Width, 0, inset.Height)
  frame.Position = UDim2.new(0, inset.Min.X, 0, inset.Min.Y)
end)

Whenever the TopbarInset Rect object changes, the function runs so that the script will be able to modify the frame based on its new size.

It’s dynamically updating the size of the frame to match the exact offset for the TopbarInset’s width and height (as well as basing its position on the top left corner of the available area) since it will vary depending on the size of the device’s screen AND how much space is available after opening / closing any of the Topbar menus.

And even though the example gifs still show the original concept for the TopBar (with buttons at both the top left and top right corners of the screen), it appears as if the TopbarInset was implemented in a way that will always provide an accurate representation of the available space in the Topbar no matter if the CoreGui design is updated in the future.

---

I think I answered your questions with that, but if I didn’t, please let me know and I’ll try to explain further