Making Mobile Write Once Run Anywhere Gorgeous

Write Once Run Anywhere tools get a lot of flack for not looking native enough & honestly we haven’t done enough to fix that reputation. Tools are only now starting to mature as the rate of progress in the mobile industry is slowing down and giving us room to catch up.

The fact that Android and iOS are far more similar today than they were when we launched (Android 2.x/iOS 4 days) makes this even easier…

But instead of mincing words lets mince pictures, this is a screenshot of Text Input in Codename One 3.7 in Android:

This is how the same UI looks now:

It’s unclear from the image but the label “floats” into place when there is no text

We even support the cool error messages from material design and the animation effect when the hint animates into a label:

Material style errors with no text so the label appears as a hint

Material style errors with text in place showing that the label gets the right red color

So you might think this would look out of place in iOS but this is how this exact same code looks on iOS:

On iOS

I think we can improve the iOS version a bit but for this release we put our focus on Android more as we felt it languished too far behind.

The “Magical” Code

Producing the UI above is remarkably easy in Codename One and requires only this small block of code:

As you can see the code is pretty simple, we just define the text components and their constraints for the validation code. Everything else including the animations and OS specific behavior is automatic and that’s pretty cool.

We need Your Help!

We made a lot of improvements to the look of Codename One in the 3.8 release and it’s going to remain a focus in the coming 4.0 release too. One of the main difficulties for us is deciding what’s important and the level of details that we need to get into in terms of look and feel. For that we need your help. We need you to file issues in the issue tracker but not “broad issues” like “implement material design”.

If you want to learn more about this I wrote quite a few blog posts in the pixel perfect series on our website that go very deep into the technical details. I explain in far more detail what I had to go through in order to achieve these effects and why.

We need issues that point narrow achievable effects or behaviors that we get wrong so we can focus on fixing smaller things as we move the whole platform forward. It’s mostly a matter of resources and priorities and if people just complain that “WORA doesn’t look good” that doesn’t help… We need the complaint but we need it to be more specific and ideally include screenshots from Codename One vs. a native UI so we can align against an anchor.