Fork us on GitHub

Template - Clean Modern Cross Platform Mobile UI Kit

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

Template - Clean Modern Cross Platform Mobile UI Kit

In the previous template post I introduced a material design inspired theme. This time the theme I chose is simpler "cleaner" but not necessarily easier to integrate. I’ve had quite a few difficulties wrestling with Photoshop oddities (bugs?) that made this template painful, hopefully I’ve narrowed down the process enough so this should become easier.

The PSD I chose this time is the Clean Modern UI Kit which is heavy on background images and a minimalist on all other aspects. You can check out the full git repository of the work here.

As usual you can check out the full app running on the right thanks to the JavaScript port and device screenshots at the bottom of this post…​

Porting the theme was relatively simple and I had very few issues, I made several choices that were interesting in the design so I’ll go over them below.

Disabled Global Toolbar

I used the Toolbar in the demo but disabled it’s global default. I did this so I can create my own Toolbar instances using the layered mode which we create using new Toolbar(true).

This allows the Toolbar to hover on top of the UI and is very useful for a transparent Toolbar effect where the UI is drawn under the Toolbar.

E.g. we use this in the news & profile page. In those pages we could have styled the Toolbar to have the image within it instead of taking this approach. However, that would have made some effects harder to customize.

The Toolbar in the news page
Figure 1. The Toolbar in the news page

Arrow Down Effect

One of the more challenging effects was the arrow bar pointing downwards at the selection.

The arrow bar
Figure 2. The arrow bar

I started off by looking at this as a Tabs Container but eventually chose to use a set of RadioButton components in toggle button mode. The main challenge is positioning the arrow in the "exact" center. We have an arrow border feature but it’s a bit clunky and I didn’t want to make use of that (rewriting this is on my personal "todo list").

The arrow is really just a label aligned to the bottom whose padding I change based on radio button selection and device orientation.

OnOffSwitch

One painful point was the on-off switch design which I was too lazy to replicate with our OnOffSwitch. I ended up using a toggle button with two image states which isn’t a good solution.

I’m thinking about rewriting the OnOffSwitch code to use the new capabilities of the API such as RoundBorder and possibly shape clipping. I’m not sure when we’ll get around to it as there is so much work and this is a non-trivial task.

End Result

Below are screenshots from my One Plus One Android device, notice the way the UI adapts to landscape mode as well.

Walkthru Page 1
Figure 3. Walkthru Page 1
Walkthru Page 2
Figure 4. Walkthru Page 2
Walkthru Page 3
Figure 5. Walkthru Page 3
Login page
Figure 6. Login page
Signup page
Figure 7. Signup page
Authentication Page
Figure 8. Authentication Page
Newsfeed
Figure 9. Newsfeed
Sidemenu
Figure 10. Sidemenu
Profile
Figure 11. Profile
Landscape profile
Figure 12. Landscape profile
Landscape newsfeed
Figure 13. Landscape newsfeed

Final Word

This took longer to build than I’d hoped mostly because of photoshop oddities and the sheer number of forms. In the future I might limit the number of forms just to get stuff out of the way.

Many of these forms are repetitive and I skipped at least two forms from the design which I just couldn’t complete in time.

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.