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.
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.
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 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!