Fork us on GitHub

Template - Phoenix UI

New recurring feature covering a free PSD design converted to a Codename One template
Post Image

Template - Phoenix UI

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.
In fact, some elements only work on devices and don’t even work properly for the JavaScript port e.g. the floating action button gradient color and the round look of the walkthru UI.

I’m pretty happy with the result though, notice that the JavaScript version you see on the right isn’t quite perfect 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 in the JavaScript port but it works almost universally. We install this with a background painter on the style 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.

The original design from the PSD
Figure 1. The original design from the PSD
Running on the iPhone 6 simulator skin (scroll down for device screenshots)
Figure 2. Running on the iPhone 6 simulator skin (scroll down for device screenshots)
iPhone 3gs simulator in landscape mode
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:

Floating Action Button popup
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.

Status Form

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.

End Result

Below are screenshots from my One Plus One Android device:

Splash screen image (the logo rotates)
Figure 5. Splash screen image (the logo rotates)
Walkthru page 1
Figure 6. Walkthru page 1
Walkthru page 1 rotated to landscape
Figure 7. Walkthru page 1 rotated to landscape
Walkthru page 2
Figure 8. Walkthru page 2
Walkthru page 2
Figure 9. Walkthru page 3
Login UI
Figure 10. Login UI
Inbox
Figure 11. Inbox
Inbox with floating button clicked
Figure 12. Inbox with floating button clicked
Sidemenu
Figure 13. Sidemenu
Calendar
Figure 14. Calendar
Trending
Figure 15. Trending
Stats
Figure 16. Stats

Final Word

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 by itself.

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!

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.