Ios button layout problems

Sorry, I was having problems uploading the screenshots
Here is the .aia
fosdem_xml_2024_woE_final.aia (879.6 KB)

Please share the AIA here and we will take a look.

I was trying to revive an app I made 4 years ago and find out how far I would get in iOS. The problem is that the buttons on top hide behind the top row and are really tiny. Also the radio buttons are really tiny.

I was hoping to find out how far using a webviewer and Javascript would go in iOS but it is hard for my old eyes in this way.

And the screenshots again.

At the moment the AI2-iOS platform is not a "responsive/scrollable app". With complex designs I ask if the device is Android or iOS and I set the dimensions (height and width) of the layouts as fixed (not automatic or fill-parent). The heights on the labels also present problems and it is better to make them fixed. In my case I only need the app for iPhones and it is enough. For the width I put this:

Yeah, I guess you are right, but it is not easy to give all buttons fixed length if you have a lot of them. Anyway, I am making an Android and an iOS version.

So the button issue is a tricky one because we intended to have Device Default theme always show whatever the default native styling of a component is on that platform. Since App Inventor has been Android specific for so long, I think this has resulted in Device Default becoming synonymous with Material UI (which was introduced in Android 5.0). Buttons without a background and using blue text are the default button style on iOS, so that's what you see there. I have been thinking about making a specific Material UI theme option so that developers can have a more consistent UI development experience across the two platforms.

On the issue of the buttons being under the status bar. I think this is a bug that has to do with hiding of the navigation controller and we may be using the wrong layout guides in the situation where the title bar isn't visible. This positions the view underneath the status bar on the Z axis rather than having it end up below the status bar on the Y.

I am not yet sure what is going on with the use of radio buttons in the web view.

1 Like

With copy&paste it is possible for complex designs.

I get blue buttons with no background and spacing when I don't use Theme "Device Default" but use Theme "Dark".

Left: Theme Dark ......................................... right: Device Default

This problem is only relevant for non-Screen1 screens. I use a spacer there (as a makeshift solution).

After setting the theme to Device Default, my buttons look like buttons again, thank you.

The html is displayed really tiny, but it seems to work. I will look into that later, maybe just make something else here.

So far so good. To my surprise the use of a webviewer and javascript to handle a large XML file works just fine in iOS, but what I expected to be no problem: the use of these ListViews, is a headache. Probably not the fault of the ListView, but of all the Vertical and Horizontal arrangements around it. I will be making a simpler layout, or maybe multiple screens... Thank you for your attention.

This is unfortunately due to the "fix" that was made to address dark mode and related issues on Samsung devices where we switched to the Device Default theme as the default. The iOS companion still thinks that the default is Classic so there is a mismatch in behavior now. We will need to release a new iOS companion to bring its expectations in line with the changes made to the Android version.

I'm talking about the compiled app (IPA).
I can't see any difference at all between Theme "Device Default" and "Classic" with the IPA.

Btw, without a spacer (image) it looks like Screen2 and with a spacer it looks like Screen3:

And the height of the spacers must be defined using blocks and a timer for it to work. I have already pointed this out elsewhere. But the problem with Screen.Initialize is already known.

1 Like

I sent you my test aia via PM.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.