Guide: Creating Custom HTML Connection Status Screens in Android builder

Guides
, , , ,
1

Simple Guide: Show Online/Offline HTML Pages in Your App

Examples

Screenshot_2025_04_10_11_51_00_87_8ac58b67ac0210c634b2ea27aeab1b
Screenshot_2025_04_10_11_51_00_87_8ac58b67ac0210c634b2ea27aeab1b1080×2400 94.9 KB
Screenshot_2025_04_10_11_50_08_53_8ac58b67ac0210c634b2ea27aeab1b
Screenshot_2025_04_10_11_50_08_53_8ac58b67ac0210c634b2ea27aeab1b1080×2400 81.4 KB

Blocks :

image
image777×586 58 KB

Aia file example :
lostConnectionPage.aia (22.0 KB)

Goal:

To display different, visually appealing HTML pages within your app depending on whether the user’s device has an active internet connection. We’ll check the status on screen initialization and whenever the network connection changes using common components found in many block-based Android builders.

What We’re Doing: Showing a nice “You’re Online” page when the internet works, and an “Offline” page when it doesn’t.

What You Need:

  1. Network Checker: A tool/component in your builder to see if the phone is connected to the internet.
  2. HTML Viewer: A tool/component to display HTML code inside your app (like a mini web browser area). A way to load raw HTML text is best.
  3. HTML Code: Two simple HTML pages (text files): one for “Online”, one for “Offline”. You can ask an AI (like ChatGPT) to make these for you.

Steps:

  1. Get Your HTML Pages

    • Ask an AI (or write) the HTML for your “Online” screen (e.g., green checkmark, “You’re Online!” text).
    • Ask an AI (or write) the HTML for your “Offline” screen (e.g., red warning sign, “You’re Offline” text).
    • Keep this HTML code ready (copy/paste it).
    • (Example: Use the HTML code provided in previous examples)

  2. Set Up Your App Screen:

    • Add a Layout Area (like a VerticalArrangement or similar) to your screen. Make it fill the space where you want the online/offline message to appear. Give it a name (e.g., StatusArea).
    • Add the Network Checker component to your screen (it might be invisible).
    • Add the HTML Viewer component/tool to your screen (also might be invisible if it just loads HTML into the layout).
      Use this extension :
      com.ahmed.zoombt.remover.dev.zoombtnremover.aix (16.1 KB)

  3. Make It Work (Blocks/Code):

    • Store HTML: Create two text variables: onlinePageHTML (paste your online HTML here) and offlinePageHTML (paste your offline HTML here).
    • Create a Function: Make a reusable function called UpdateStatusDisplay.
    • Inside UpdateStatusDisplay:
      • Use an IF block.
      • IF the Network Checker says IsConnected is TRUE:
        • Tell the HTML Viewer to load the onlinePageHTML into the StatusArea.
      • ELSE (if not connected):
        • Tell the HTML Viewer to load the offlinePageHTML into the StatusArea.
    • When App Starts: Find the “Screen Initialize” (or similar) event block. Inside it, call your UpdateStatusDisplay function.
    • When Network Changes: Find the “Network Changed” event block from your Network Checker. Inside it, call your UpdateStatusDisplay function again.

  4. Test:

    • Run the app with WiFi/Data ON. You should see the “Online” page.
    • Turn WiFi/Data OFF. The app should change to show the “Offline” page.
    • Turn WiFi/Data back ON. It should switch back to the “Online” page.

That’s the basic idea! You check the connection and show the right HTML page accordingly, both when the app starts and whenever the connection status changes.

2 Likes