I see a lot of apps with a transparent status bar at the top of the screen (notch area). Does anyone know how this can be achieved?
Thanks
You can create the status bar with a Floating Group and set the background opacity to less than 100% to make it transparent.
Thanks for your reply, but doesn’t this just create an element below the status bar (notch)? The status bar is not part of the actual page. My guess is some kind of javascript is necessary.
Oops, too early in the morning for me…
I guess you are talking about the status bar on Android / iOS ?
Are you referring to native apps or PWA added to home screen?
Yes correct, I’m talking about the status bar on Android / iOS. On native app.
If it’s a native app, you can’t set that in Bubble. It has to be set in Xcode for iOS and Android studio for Android.
In case of a PWA, that can be set through meta tags, here is an example:
Ok thanks. I don’t have any experience with Xcode but I’ll look into it.
Do you already have an Xcode project with your app wrapped into it?
I made an iOS wrapper myself and I was able to set a transparent status bar.
If you want I can have a look at your project and see if the transparent status bar can be easily implemented.
No, I don’t, I’m still building the app. Do I understand correctly that I first need to have the app wrapped in order to use it in Xcode? (Or Android studio)
Basically a wrapper is an Xcode project (or Android studio project) that allows you to create a native app that opens your website.
In Bubble you need to make sure that your web app is responsive and looks and works great on mobile phones.
Then you can get a wrapper for iOS and/or for Android and set it to open your url.
If you want you can have a look at the wrapper that I created for iOS at blankmode.com
You can try it for free.
If you end up installing it, just message me and I’ll give you the instructions to set the transparent status bar.