Open Source & Free  

Template – Clean Modern Cross Platform Mobile UI Kit

Template – Clean Modern Cross Platform Mobile UI Kit

Header Image

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.


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

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
Figure 9. Newsfeed
Figure 10. Sidemenu
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.


Leave a Reply