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.
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.
I used the
Toolbar in the demo but disabled it’s global default. I did this so I can create my own
using the layered mode which we create using
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
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.
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.
I started off by looking at this as a
Tabs Container but eventually chose to use a set of
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
The arrow is really just a label aligned to the bottom whose padding I change based on radio button selection and
One painful point was the on-off switch design which I was too lazy to replicate with our
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
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
Below are screenshots from my One Plus One Android device, notice the way the UI adapts to landscape mode
Figure 3. Walkthru Page 1
Figure 4. Walkthru Page 2
Figure 5. Walkthru Page 3
Figure 8. Authentication Page
Figure 12. Landscape profile
Figure 13. Landscape newsfeed
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.