The Phoenix UI kit by
Adrian Chiran is one of the best looking and most challenging
template UI’s I had to adapt in recent history. The breadth
of the design is pretty challenging but it also has some elements that are really hard to adapt across platforms in
a portable way.
action button gradient color and the round look of the walkthru UI.
so scroll down to the device screenshots below to see how it looks on my Android OPO device.
Due to time constraints I didn’t port all th forms, I also converted one of the "forms" to a side menu which wasn’t
very clear from the design but worked well in production.
Unlike previous demos I chose to use the GUI builder for most of this demo, as an experienced developer using
GUI builders slows me down considerably and this made this demo harder to build. I also ran into quite a few
issues in the current GUI builder which we will fix to improve the results for everyone. I’m not sure if the next
template will be GUI builder based but I’m confident we will make further use of the GUI builder for demos &
templates moving forward.
The nice thing about this GUI builder is that it generates code so even if you prefer handcoded development
you can still look at the code without launching the GUI builder.
You can check out the demo page here which includes all the information including
the github page.
Rounded Walkthru Section
This was probably the most challenging part of the demo, at first glance the UI for the walkthru form doesn’t look
like it will be too challenging but this becomes a problem when we start looking at different DPI’s/orientations.
At first I tried solutions such as masking the image but this created some issues -
The first mask I tried included only the top diagonal line and the round border. But this kept misaligning with the
bottom text portion especially when running in problematic orientations/aspect ratios.
I then tried creating a single image that would include the bottom and top part and draw the text above but this
created a situation where the text would grow too much.
The problem here is that the design image on the top might run out of space entirely, in fact one of the biggest
design changes we had to do was reduce whitespace so some UI’s would fit. Still in landscape on a low DPI phone
the top image won’t appear at all.
The solution I ended up using was a shape clipping for the round rectangle, this isn’t ideal and doesn’t work
again not ideal, but it shows just how powerful Codename One can be in such situations.
Once this was in place we can just fill up the space we need for the text with the white background.
If I had the time to work on this I might have enlarged the text to fit for some cases, but this would require more
device testing rinse/repeat and I spent way too much time on this form.
Figure 1. The original design from the PSD
Figure 2. Running on the iPhone 6 simulator skin (scroll down for device screenshots)
Figure 3. iPhone 3gs simulator in landscape mode, the image disappears the content remains
Floating Action Button
The inbox form has a unique floating action behavior that is inconsistent with the default Android behavior:
Figure 4. Floating Action Button popup
At first I thought about implementing it as a special layout but since this is a very special case I eventually decided
to use padding to position the components in the the various locations. Since the UI can’t contain more than 3 elements
this sort of hack is pretty easy.
One of the last forms I worked on was the status form with the round progress indication, I chose to use the
CN1CircleProgress cn1lib since it was there already and
included the main UI element features.
I thought about doing this manually and using the gradient design but after seeing the UI without the gradient
I decided this wasn’t essential.
The bottom bar is a horizontal
List that allows you to scroll thru the elements.
I didn’t add some of the other elements of the design as similar elements already appear on the trending form
and this seemed redundant.
Below are screenshots from my One Plus One Android device:
Figure 5. Splash screen image (the logo rotates)
Figure 6. Walkthru page 1
Figure 7. Walkthru page 1 rotated to landscape
Figure 8. Walkthru page 2
Figure 9. Walkthru page 3
Figure 12. Inbox with floating button clicked
There were a few pages and features I skipped due to lack of time and the approach to the 1mb limit in the jar
size. I was still able to stay below that despite the fact that this theme required quite a few images… We ended up with a
706kb jar which is pretty small .
Most of the stuff I skipped was more of the same, I also skipped the Map UI which is a subject for a post all
I hope you find these posts useful and instructive specifically about the types of designs that can be achieved
with Codename One. As usual, if you have a specific question about a UI element or anything related to the design
please don’t hesitate to ask in the comments!