Recommendation with Android native input fields?

[Monox18]

Recently I finished a Windows app that now I'm trying to implement into Android. I'm quite happy that out of the box 90% of the app works straight away in my phone the first time I compiled it for mobile. It makes me happy to see the marketing promise "Code once, deploy everywhere" is quite solid. Now I'm starting to deal with the Android specific issues which brings me to the point. For speed purposes I'm looking to use all the default controls that I already have except the input fields. I'm still deciding weather to stick to the normal input fields or the native Android fields.

With the native fields, the native cursor, the scrolling feature, copy paste functions and so on becomes available in mobile. With the normal field those are not available and the cursor looks and behaves like the Desktop cursor. So I'm feeling tempted to replace all input fields with native ones to activate those features. In the other hand, besides font and font text color there are no properties for styling native fields. How do you style native fields? this is the sole reason that makes me reconsider sticking to the normal input fields which are fully customizable.

The biggest issue I'm having now is the soft keyboard activation and deactivation. It seems the keyboard is hardcoded to whatever input field has focus. Switching between normal fields deactivates and activates the keyboard which is really bad. Switching between native fields keeps the keyboard on screen which is really good. But the problem is, say for example a form, where you have multiple fields, as soon as the user taps in the background or outside any native field, the focus is lost and the keyboard is hidden. I am unable to find a way to either keep the focus on the input or prevent the keyboard from going away. Any experience regarding input forms? how to keep the keyboard active at all times while navigating the inputs and other controls? any workaround to prevent the control focus change? the keyboard display problem is even worse with normal fields.

[FourthWorld]

Styling: LC fields are great for display text. OS-native fields are only need for input. I see styled text so seldom in mobile apps I'd be surprised if the OS provides any UI for that, or even underlying support. LC doesn't currently.

Focus: AFAIK what you're describing is normal, or at least common. The keyboard leaves whenever a field loses focus, and tapping outside a field is usually interpreted accurately, causing the field to lose focus. For more specialized behavior you may be able to trap mouseDown in the card script to set focus into a field.

[Monox18]

Well for styling I don't mean text effects like shadows and 3D features. I mean mostly the background styling, mostly backgroundColor, borderColor, hiliteColor, rounded corners and margins/padding. Those are enough. The Native Android has an unique input field. It is a white solid background with a bit of transparenciy, square and a visible border. Even having a field without opacity would help as I can style a graphic object behind. This is what I do for normal LC fields as their corners can't be rounded but a graphic control can have rounded borders. For example I have a Dark theme mode in my app. White fields are a big no no. Since styling is not available I will have to adjust the styling of the controls in the Light theme to harmonize with this specific fixed native style. That's fine for now.

I also checked a bit the widget source code. It seems plausible to quickly add support for those extra properties. Since this is not a priority, I will leave that for the future but I think I will eventually play with the LiveCode builder and try to modify that widget whenever this becomes priority.

For the focus behavior, that's also quite fixed. I did plenty of tests trying to control the focus and doesn't work. At most I was able to keep the focus on the field itself even when tapping outside but the user is still able to see a small keyboard Off and back On animation. Very unpleasant. So I decided to stick to default behavior and deal with it. To harmonize the user experience I decided to use the move command to smoothly transition from point A to B in both keyboardActivated and keboardDeactivated handlers.

The widget focus is different from the normal focus. In fact it's possible to have focus simultaneously on both a native field and a normal field.

Code: Select all

answer the name of the focusedObject -- returns the name of the LC control with focus but not the native widget.
focus on widget "MyField" -- doesn't work 
--
set the focused of widget "MyField" to true -- This can set the focus ON and OFF on a native input field

[jacque]

For all the reasons you mention, I don't use the native field widget. I create native fields the original way using mobileControlCreate where many more properties can be set, including transparency, border options, and colors.

[Monox18]

Oh wow that's perfect. I will explore those controls. I never thought they had so many properties. For some reason I thought the widgets were equal but drag&drop-able from the tools palette. Thanks !

[jacque]

I hope some day the widget will duplicate all the properties available with scripted controls but for now widgets are in their infancy.

One thing to bear in mind is that you need to delete all scripted mobile contiols on closecard, or whenever you're done with them. They are overlaid on top of the stack and will persist everywhere until they are removed.

[Monox18]

Today I started playing with the 4 mobileControl commands and the suggestions you gave me, in Android. Indeed it was important to delete & create the controls on each card change. (Note: I will reply the other post about the backButton whenever I get time to follow your advice and debug that issue.) So I have been testing some of the properties available in MobileControlSet and came across some issues that I would like to confirm:

The borderStyle property is only for iOS, so there is no equivalent command for Android. Also I don't see a way to change the border color. Which is weird, considering that the default Android appearance has a clear border. This screenshot is from the widget, which also has the same appearence as the mobileControl but with also the verticalAlign property.

Default appearence

I have issues with the rectangle. I don't see any padding or margin property. 31 is the minimum height that I can use with fontSize set to 12. Less than that height and the text start disappearing by the top margin. Is there any undocumented property to handle this? Android Native Field Widget has a verticalTextAlign. Is there an equivalent for these mobileControl?

Padding/margin issues

And also when arriving to the card I see a bar to the right of the field which appears to be an scrollbar? Not sure if this a bug or issue with my phone but I want to hide that bar. After a couple seconds of arriving, it automatically disappears. But also it shows sometimes on 1 field when the soft keyboard appears or disappears. Do you know how to hide that?

Unexpected scrollbar?

I guess that backgroundColor and textColor, with included 4th alpha channel should be enough to accomplish the Material Guidelines for both Light & Dark Theme... Anyhow, with all these minor issues and some missing properties, I'm guessing that my best bet is to make the mobile input background transparent while showing only the text. Placing a graphic behind, and styling instead the graphic, which also supports rounded corners.

Any opinions are welcome. Thanks!

[Monox18]

Found the issue. I had a height too small. 31 was not enough. That's why I was seeing that default scrollbar appearing and the the padding issues. I have to set 35 minimum with fontSize 12, which is a lot considering that for normal LC fields they are defaulted to 21 px height. But after giving it some thought it makes sense because the fingers are much bigger and less precise than mouse coursors. So Android fields and buttons need to be bigger and better padded, margin-ed, etc.

I got what I wanted in my original post. A native input field with basic skinning, proper soft keyboard control and OS copy/paste/select/etc functions. Cool, I can move on.