Convert Bubble into Android Mobile App - step by step

[roberto.naddeo]

Hi, everyone!
I have been looking for an easy way to convert my Bubble App into a real mobile app (I am not a “real” developper). I managed to find a way, using free Bubble, no extra costs (ok, I had to pay USD25 to create my Google Developer account).
I first tryed Jasonetlle, but it requires a Bubble paid plan.
I considered nativator, but it costs USD39 each convertion.
So, I read a lot of tutorials, and I would like to share with you. Maybe it could help someone like me.
This tutorial does not explain how to create an iOS App.

1. Download and install Android Studio

Not big deal. Just go to Download Android Studio & App Tools - Android Developers

2. Start a new project. Select “Empty Activity”

3. Customize info

Change de default app name and package name (Play Store does not accept the default names)

4. Wait for project creation

After everything is ready, we will make changes in 5 files:

• mainfests/AndroidManifest.xml
• java/[app name]/MainActivity
• res/layout/activity_main.xml
• res/values/themes/themes.xml and themes.xml (night)

5. AndroidManifest.xml

Include the following code after </application> to allow your app to access internet.

<uses-permission android:name="android.permission.INTERNET" />

6. MainActivity

Inlcude:

private WebView mWebView;

before @Override

Include:

mWebView = (WebView) findViewById(R.id.activity_main_webview);

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

mWebView.loadUrl("https://yourapp.bubbleapps.io/");

before the final braces (note that you should use your own URL in last line).

Your code should look like:

Probably, the word WebSettings will be red. Just mouse over and click “Import class”.

7. activity_main.xml

When you open the file, the interface will change. Just click “code” before moving onto the next step.

Change the whole <textview> tag for this:

<WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Your code, now, should looks like:

8. themes.xml (optional)

If you want your app to run fullscreen (without the tall top bar), make this change in both themes.xml

Change:
<style name="Theme.SuperApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
for:
<style name="Theme.SuperApp" parent="Theme.AppCompat.Light.NoActionBar">

That’s your code now:

9. Test

Beleave you or not, your app is done. You can test it.
Click the green triangle to start the emulator.

Your app should be working.

You can also connect your android phone to the computer in order to test (details not included in this tutorial).

10. Change icon (optional)

Probably you don’t want the default android icon. So, create a 512x512px image. So:

Right-click **app** >> new >> image asset

Click the folder icon to select your new image.

Press next, then finish to change your icon.

11. Generate file to send to Play Store

(This part is a little tricky and, I may not be 100% sure. Sorry if it does not work perfectly).

Click build > Selct build variant > Change to “release”.

Click build > Generate signed build or apk > Select “Android App Bundle”, click Next.

Click on “Create new”

Click on the folder icon. Select a folder where your key will be stored (at the bottom, give it a name, as key.jks.
Create and confirm a password.
Create and confirm the pasword for your key alias.
Fill al least one field of “Certificate form”.
Click Ok.

Ignore the biw warning that will popup.

Click next.

Select “release”.
Click finish.

That’s it! Android Studio will generate your .aab file, that you should upload to Play Store!

[JohnMark]

Hello @roberto.naddeo

@roberto.naddeo

I first tryed Jasonette, but it requires a paid plan.

Just to clarify, Jasonelle is free (open source) and need no plan. It take 10 minutes, then you compile to Android as you explained without the web container. If you need real native functions inside your app, use jasonelle.

10 min. to build a free iOS / Android native app with Bubble

You can do the same process with iOS as you explained using Xcode language.

[roberto.naddeo]

Hi, JohnMark! Yes, Jasonelle is free, but It looks like It requires a bubble paid plan. I couldn’t find a way to make the json file availabe with a free plan.

[JohnMark]

Hi Roberto, If you have access to the Backend workflows with the free Bubble plan, then yes. You don’t have to write a file anymore but use an Endpoint.
This has been added to my post.

2024 - 10 min. to build a free native iOS/Android app

GREAT NEWS! You no longer need the json file (myfile.json). Put your commands in a Return data from API action from API Workflows! It can be dynamic, it means, for each user you can run a different native application if you want, live! Call the new pointer: https://your_app.bubbleapps.io/version-test/api/1.1/wf/jasonelle [20%20PM]

[roberto.naddeo]

Hi, @JohnMark! I saw your new post, but I couldn’t figure out how to create those “endpoint workflows”. I assumed that was a paid feature. If it is not, I will correct my post.
Thank you!

[roberto.naddeo]

Hi, @JohnMark! I saw your new post, but I couldn’t figure out how to create those “endpoint workflows”. I assumed that was a paid feature. If it is not, I will correct my post.
Thank you!

[marcioavilareis]

Great job @roberto.naddeo, exactly I was looking for.
I will use now. Thanks.

[roberto.naddeo]

Thank you, @marcioavilareis! Please share if you have any problem.

[Trynocode]

Hi Roberto,
it was quick and easy thanks for sharing one quick question

when i using the apk file on my devise instead of mobile app it opens like url in web browser.

it works more like PWA for me not like a mobile app

[itsmecalebv]

Sorry, I’m a bit late to the party. I was able to get the my bubble app to load in android, however, the signin/signup process just keeps loading and never goes to the next screen. I’m guessing I have to set cookies on Android studio? Not very sure of how to do that or even if that is the issue. This is what I have done so far:

package com.example.xxxx;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;

import android.Manifest;
import android.os.Bundle;
import android.webkit.CookieManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.GeolocationPermissions;

public class MainActivity extends AppCompatActivity {

private WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);




    webView = findViewById(R.id.webView);
    webView.setWebViewClient(new WebViewClient());
    CookieManager.getInstance().setAcceptCookie(true);
    webView.loadUrl("https://xxxxx-2.bubbleapps.io/register");


    ActivityCompat.requestPermissions(this, new String[]{
                    Manifest.permission.ACCESS_FINE_LOCATION,
                    Manifest.permission.ACCESS_COARSE_LOCATION
            }, 0);

            WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);



    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
        }
    });
}

@Override
public void onBackPressed() {
if(webView!= null && webView.canGoBack())
webView.goBack();// if there is previous page open it
else
super.onBackPressed();//if there is no previous page, close app
}

}

[cadavidolarte]

Hi, have you tried this method with a picture uploader? In my case is not working. Thanks for any advice. Juan