Skip to main content

Mobile: Visual elements

Written by Sofia Maconi

Text

A non-editable text element.

Button

A button is a shape with a text/icon that's optimized for click workflows. It can contain a text, an icon or both.

Icon

Icon elements let you pick an icon to display from several different icon collections.

On Android devices, phosphor “filled” icons may display as black boxes instead of the intended icon. This issue is due to a bug in a third-party library required for rendering these icons.

At this time, there is no workaround. The issue will remain in place until it is resolved by the library author. If your app relies on filled phosphor icons, consider using an alternative icon style for Android builds.

Image

Image elements allow you to place images in your app. The element supports all widely used image types such as png, jpg, svg, webp and gif.

Generating an image with AI

You can generate images with AI. Type in a prompt and select a size, quality, and style. The Auto setting lets the AI choose style setting based on your prompt. The number of tokens used depends on your selections.

Check Generate Alt tags to automatically generate an Alt text.

Shape

The shape element adds a rectangle to the view which can be resized, rounded and styled in different ways.

Map

The Map element lets you implement a Google Map on the view, fully navigable by your users. You can also use Apple Maps on iOS devices by enabling the Use Apple Maps on iOS property.

WebView

The Web View element allows you to display one of your app’s pages inside an element within your mobile app. You can set its responsive behavior just like any other element, ensuring it adapts well to different screen sizes.

Keep in mind that users won’t be able to navigate to other pages while using the Web View, so it’s important to design the page with all necessary content on a single page. The Web View element is limited to displaying pages from your own app, meaning external URLs cannot be used.

The Web View element currently does not work in the web preview— it only functions properly in the BubbleGo app.

Disable zoom

The Enable Zooming property allows users to use the pinch-to-zoom gesture to zoom in or out. This setting is disabled by default.

It helps improve the user experience, particularly for apps that rely heavily on webviews, where unintended zooming can cause a disruptive interface. If you want to allow zooming, you can disable this setting in the element's properties.

Did this answer your question?