Building mobile Apps in Bubble.io - Everything you need to know!

In this tutorial we will guide you through the process of building mobile apps using Bubble. We will look at how to setup your bubble app, plugins you can use and how to structure the page.
We will also discuss the different options there are for wrapping your bubble app into a mobile app.
// Nocode HQ
Nocode HQ is an online platform that supports you in your journey building software with #nocode.
Build Websites, Mobile Apps, Chatbots, Automations and more without learning how to code. Use our Nocode Tutorials and Templates to build fully fledged digital products. Sign up now and get access to hundreds of tutorials and templates!
nocodehq.com
// Bubble Plugins
We are one of the biggest Bubble plugin developers. You can view our full range of plugins at: bubble.io/contributor/anticod...
Do you need a custom plugin? No problem! Just send us an email to [e-mail]
// Some helpful links
Adalo Mobile App Builder: rebrand.ly/8s9c27x
Bubble Webapp Builder: rebrand.ly/nkpoi9x
Build Chrome Extensions without code: chrome.nocodehq.com

[@Mecedebe]

Awesome Tutorial! Thanks!

[@andrewarmitage9491]

Thank you, a good overview for a newbie like myself.

[@visheshgupta4990]

Thank you so much it is very useful , especiall someone who is newbie in no code

[@BikramSahu]

Great piece of video. Informative and to the point for s developer who is looking a solution for web+mobile

[@h0rrified321]

Amazing vid, thanks so much!

[@garypick]

O.K. so I'm a little confused. If I build a single page within a Bubble app, would I just use that when someone visits the site via mobile or can I submit that to the App Store and Google Play, or would I need to use the native app wrapper you mentioned. And, if the wrap, why?

[@RandomGuy4964]

I'm struggling to get elements to overlap each other on Bubble. I want a video player that has the controls and video title on top of it, but unless I set a fixed page width/height, the elements push each other around. Do you know a solution for this?

[@RandomGuy4964]

Do you make your mobile page fixed width/height?

[@maryamahmedseager142]

Thanks so much for this video! You saved me hours and hours of research as I look into making my web app a mobile one - and you've earned a subscriber. One question: can I do both, make the web app + pwa + native? So that way no matter how the user access the site they can use it?

[@spiritseas]

hey, did you find an answer for this question?

[@atharvasaney3897]

is there a way to download the app once we are done creating it on bubble ?

[@DanVanDamme]

This single page method of building a mobile app looks like it could get messy with layers of hidden pages. Wouldn’t it be easier to use Adalo, Draftbit or Flutterflow to build the app and use the Bubble api to push/retrieve data from bubble? Newbie here trying to find the best combination of tools to create a marketplace that is accessible for consumers on native mobile apps.

[@Dankioko]

Can you export a Figma design and build an android mobile app using bubble?.

[@nyckgs]

how do you resize your page like that thas not even possible

[@t.h.5633]

everytime i create a third group over the other 2 it makes it into a sub group of the second one.

[@jjwprotozoa]

just drag it into another position it should remove it from the sub group.

[@JONNY-uw5eb]

hello i tried and it didnt work but what worked for me was to just show the element i wanted when the button is clicked and hide the one i dont want to show can this way work just as well?

[@AntiCodeBerlin]

Yes that works as well, but will get tricky once you have very many hidden groups and sub groups

[@charliemits1056]

i literally can’t figure out how to get the box to be free in the center of the page and it’s driving me absolutely insane

[@jjwprotozoa]

I had the same issue. Double click on the box, go the the layout tab, go to "Parent container type", click (edit) on the right of that and change Container layout to Fixed. Hope this helps.

[@tibuigerard1564]

why does no one ever talk about how difficult it is to implement the back button function in native mobile apps in these tutorials

[@nocodenexus]

Have you tried navigating with url parameters? That should help

[@tibuigerard1564]

@@nocodenexus That is another rabbit hole I've not reached the end, but I guess nothing good comes easy!. With single-page mobile apps it's a nightmare!

[@RedditMyth]

@@tibuigerard1564 you can create a tab element and make it to the page is linked to a “back” button and when it’s clicked it goes to that page

[@tibuigerard1564]

@@nocodenexus Best advice. Thanks.. my issue was that with url parameters, i was not putting a condition on the 'to to page' action so the page kept looping... and i didnt understand why.

[@nocodenexus]

@@tibuigerard1564 You're welcome

[@marshallmedia8272]

homie slow down aha

[@jjwprotozoa]

Good advice, but you can also change the speed on KZbin

[@CourBarone]

ahh you speak and move too fast

[@lmrcoding6414]

Then slow down the video speed settings