Unattractive UI

[ajperks]

I have just produced an APK to see how things fit and work on the phone screen and I was shocked at the appearance.
It looks normal in Windows, the grey scroll bars and field areas are dreadful in Android.
I have coloured the background and decided on white, but I can't see how the controls can be recoloured.
I do have colourful (temporary) image icons for buttons, and I am content with them, but I am a bit disappointed I can't customise the colours of everything from the Stack (4th tab) Inspector.
Any tips?

[richmond62]

I always roll my own; especially with buttons, to guarantee font consistency across different platforms.
-

sucks.png (4.41 KiB) Viewed 6155 times

[ajperks]

Buttons are easy, it is the awful black frames around fields and scroll bars. I wasn't able to change much, just the background.

The interface is far from finished, obviously, but not much scope as you see in this android screen shot.

The look I was hoping for.


What I ended up with.

[ajperks]

What I ended up with

[ClipArtGuy]

This lesson may help.

http://lessons.livecode.com/m/4069/l/94 ... ll-a-field

[ajperks]

It is very neat scrolling and typically mobile. If I had a choice, I would love to use it.
Not wishing to appear ungrateful, I am not prepared to end up with 2 versions, desktop & mobile. My concern is changing the control borders from a broad black line to a fine line, better still, also in a pleasing colour.

[bogs]

Mind you, I don't work with mobile stuff, so I don't know how much of a contribution this is.

Having said that, your first picture shows fields without scrollbars, inside a group that has a single scrollbar, which tells me the fields are not individually scrolling as your second picture shows. That is easy enough to accomplish, anyway, just remove the vScrollbar from the fields.

Vertical scroll on fields...

As to the borders around different objects, there are a number of ways you can reduce or even eliminate that. Take off the 3d setting would be one...

3d?

...which would reduce the depth illusion, or just remove the border altogether (one lower), or reduce the width to 1 px. instead of 2 that is the default. Aside from those suggestions, you could also change the border color until it blends right in. Just some thoughts.

[SparkOut]

LiveCode is cross platform which means you can code for all supported platforms and deploy to each, but it doesn't mean that there are no variations in the platform feature set. Mobile deployment is more different than the typical variation between desktop o/s environments.
To get native-looking controls on mobile, you will either have to do a lot of work to style the controls yourself, or use the platform-specific mobileControlCreate (et al) to produce native controls. This doesn't mean that you have to create separate versions, but you WILL have to make some coding structures that check for the platform and display one set for desktop or another mobile-specific set accordingly.

[bogs]

SparkOut (and those above my comment) really are laying out the correct way for you. Sure it takes more time, but not a lot more.

[jacque]

To expand just a bit more, you do need to use native mobile controls but you don't need to create separate apps. Check the environment in a preopencard handler and if it's mobile, hide the LC fields and create native fields with the same rects. Native controls are temporary and are created dynamically in script.

Your example image shows only a single scroller that scrolls an entire group. This is much easier. If the environment is mobile, set the vScrollbar of the group to false and create a mobile scroller instead. For the fields inside the group, I'd remove the scrollbars, it doesn't look like they are necessary.