Forum Academy Marketplace Showcase Pricing Features

[New Template] Mobile UI components library

Great idea, thanks. I have added a 5 step onboarding flow to the template. In preview, you can launch it from a button called ‘Start onboarding’ in the ‘Controls’ section of the template.

I have also adjusted the reset pwd and 404 pages

2 Likes

We have added two new things:

  1. Paywall UI: An exemplary paywall to offer in-app subscriptions (or in-app purchases) in a native app, e.g. using the BDK (or offering stripe subscriptions in a web app).

  2. Hideable groups

Link to template: Mobile UI Starter Pack

2 Likes

Looks great! Good job man

1 Like

thanks, much appreciated. Hope it helps building nice things faster :slight_smile:

2 Likes

hello! A’d like to understand the diference between the 2 options of License types (standard and developer).

Will this templante work well with Android and PWA?

thanks!

Hi there

Re license: the difference is only whether you can use the template for your own use (standard) or to build applications for 3rd party customers e.g. as an agency (developer). See here for details https://bubble.io/marketplace-policies - functionality is the same however. So if you want to build an app for yourself (also commercial use), go for the standard license.

Re Android / PWA: This is not dependent on any template you use at all, but rather on how Bubble itself works. Bubble apps are basically just web apps that run in any browser independent of the platform. So yes, the template as such can be used to build a PWA or as a basis for any kind of iOS or Android app. However, to for ‘transform’ your Bubble app into an Android or iOS app you will need to take additional steps - i.e. ‘wrap’ the Bubble web application into an app ‘container’. See for example 10 min. Native App iOS & Android [Fundraising in progress] 🔷 or BDK Native Apps - Build before you buy / https://www.thebdk.com/. However, the look and feel of the template is more iOS like than Android.

Hope this helps

4 Likes

Thanks!
It helps a lot!

congrats for the great job!

1 Like

Thanks, much appreciated. Btw, credits for the illustrations go to https://undraw.co/illustrations

1 Like

great stuff man ! I’ve been playing and saw this , the button of onboarding gets above the fold on iphone 7/8/SE

thanks for the hint, added a fix. looks like this now:

1 Like

nice, is the template updated also in my app or should i create a new app with the new version ? (new to bubble user here :grin:)

You’d have to create a new app with the new version

Or just create a new temporary app with the updated template, check what‘s changed in the onboarding group and implement accordingly. Just added a few elements. Pm me if you need help

1 Like

Currently on sale for short time!

Want to start a new mobile app project during summer vacation? Enjoy 50% off this template with using coupon code SUMMER2
Enjoy

Check here what it can do: [New Template] Mobile UI components library

@d9999, This template is great, I am starting to customize it so I can create my own PWA app for mobile devices. When I use the “Save to homescreen” function looks great on my mobile device… only 1 issue, all of the status icons at the top appear white, and when you scroll they appear on top of the other elements as you’re scrolling. I attempted to add a new floating group and attach it to the top, but it still leaves space for the status bars above the floating group and all elements on the page scroll and show through. Any thoughts for making a header that would show the status icons & not show the elements as you scroll?

thanks for pointing this out @zacharyreed . There is an easy fix:

  1. in the editor, go to Settings --> SEO / metatags and add the following lines under Script/meta tags in header:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Should look like this:

  1. Re-deploy app (if you already have deployed a live version)
  2. Delete the home screen icon on your phone and add it again from the refreshed page (it wont work otherwise)

Note: there are also other options for the status bar color - see this post here for further reading: https://medium.com/appscope/changing-the-ios-status-bar-of-your-progressive-web-app-9fc8fbe8e6ab

eg. use

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

for a black status bar.

I have also adjusted this in the template…

PS: Adding visual elements in the app won’t work as the Status Bar is controlled by Safari itself and outside of the app frame.

2 Likes

@d9999 This is perfect, Thanks!

1 Like

Could please you share a working PWA on Bubble whenever you feel it’s demoable ? Thanx

Not sure what you mean, can you please be a bit more specific?

Maybe check https://bubble.io/showcase