Generating a template from a PSD isn’t hard but it isn’t a trivial task either, in this recurring segment I will try to generate good looking Codename One templates from freely available PSD files. Since this requires some effort I don’t think I’ll be able to keep this as a weekly segment but I’ll try to post such a template once every two or three weeks. If you know of a free PSD that you’d like to see as a Codename One app point me at it in the comments and I might integrate it in a future post!
Unlike previous tutorials I won’t cover the process of extracting the template and building it as this will take MUCH longer than just doing it. I will try to discuss the highlights, compromises etc. You can study the source code/theme and ask questions in the comments if something I achieved is unclear.
You can check out the full source code on github here.
The End Result
I’m pretty pleased with the end result, this took me about a day and a half of work to do. The app build is 478kb well bellow the free quota limit and this is with full HD resources. The resulting Android APK is 1.8mb which is pretty small for an app like this.
When running the demo you can switch between the charts/profile pages by clicking any entry in the sidemenu. You can restart the demo by clicking logout. You can also swipe the welcome form. I explicitly avoided implementing any form of functionality to keep things relatively simple.
You can see the PSD’s we used as a base in this directory.
I extracted very few images from the PSD’s and mostly used the colors and components where possible, you can see the exact image resources I extracted and used here. Notice I provided a duke image of our own since the swipe tutorial only had one page designed in the PSD and I had to makeup another page.
Below are screenshots of this app running on my OPO Android device:
Figure 2. Welcome wizard page 1
Figure 3. I designed another page for the welcome wizard so we’ll have 2 pages…
Figure 4. User form with complex toolbar
Figure 5. Sidemenu for the user form and chart form
Figure 6. Chart form, I’m not sure if the original chart design is doable in any tool…
I’ve learned a bit about how we can make Codename One more friendly to UI designs, I’ll incorporate some of these lessons into an update of this demo and make some changes to Codename One. I’ll go into more details on that in an upcoming post.
I chose to design all the forms as subclass of Form, this isn’t necessarily the best way but it’s a common pattern that’s intuitive to most developers.
This allowed me to unify the code for the side menu which appears on two of the forms.
The title areas in this demo are either non-existent or heavily customized to the point of being a purely custom component. This posed some challenges sometimes with the builtin functionalities (e.g. status bar, menu icon etc.). As a result I just hid the menu bar icon entirely and added one of my own.
A potential enhancement would be to shrink the title as we scroll down like this.
After this is cleaned up a bit I’d love to have this template as part of our builtin demos, I’d also like to build more of those as I feel this is a great learning tool for us and for you.
I’ll try to post a followup article about the improvements required to make this code easier.