How do I put GUI elements in the "Roblox GUI" at the top of the screen?

Especially for mobile, I want to be able to put buttons in (or on top of) the top bar that goes across the screen.

I noticed that Blox Cards does this (see the HELP button in the upper right), so I know it’s possible. Hard thing to google for though.

2 Likes

I did this in Fisticuffs; it’s just a matter of giving it a negative position. However, input is a little wonky (I think the topbar sinks it) so you have to use UserInputService.InputBegan etc to detect input on things.

1 Like

I haven’t been able to figure out how to draw on top of the bar like Blox Cards does.

Setting the Z index on the button doesn’t do anything, nor any of the Z index-y looking properties on ScreenGui.

image

5 Likes

You aren’t able to have Developer GUI’s above CoreGui’s because it’s a security risk, you can set the top bar transparency to 1 then create a “fake” top bar to mimic as if they were inside of it.

Since the topbar will be fully transparent, input for the buttons you place shouldn’t be an issue.

1 Like

Set the topbar transparency to 1, then create a “fake” topbar with a frame.

EDIT: And if I remember correctly, if the topbar is fully transparent it doesn’t stop input.

3 Likes

Bingo, this is it. IMO a fake game-themed topbar actually looks way better than the actual topbar or no topbar at all.

How to disable the top bar but still keep chat though?

Aghhhhhh. All I want to do is put my shop button in the top bar instead of under the jump button on mobile. Why do I need to reimplement the entire thing.

2 Likes

You only need to set the top bars transparency, not enable/disable CoreGui’s.

SetTopbarTransparency

1 Like

Changing the topbar’a transparency shouldn’t disable the chat, although it might create a bad contrast between the chat’a grey colour and the topbar’s transparency. You can actually see that the game example you provided has the topbar transparent along with the chat. One last thing I suggest doing is exploring CoreGui, finding the topbar UI and checking its Z-Index, perhaps it’s something super high that you didn’t expect. Also it might be worth checking out GuiInset.

Instead of using SetCore on the StarterGui, you can set the PlayerGui’s TopbarTransparency to 1, making it transparent. Something like this:

local Players = game:GetService("Players")

local Player = Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
PlayerGui:SetTopbarTransparency(1) -- simple as that

You can then set the shop button to be somewhere near the corner of the screen, then create a fake frame that acts like the topbar (z index should be less than shop’s).

5 Likes

Ahhhhh. Great. Thanks!!!

4 Likes

There is a property of ScreenGui called IgnoreGuiInset which does as the name says, ignores the top bar inset. Can use this instead of doing weird negative positions to get things to fit within the top bar nicely.

8 Likes