I'm re-skinning an App for a client, and I'd like to modernise the agenda integrated to this app.

Problem : the app will be developed for both Android and iOS, so I'm trying to harmonize the UI for both OS.

For the Calendar (with Events classed by days / months), I made a reskin but the developpers tell me that, because of the budget, it would be to long and to expensive to do it this way. So they told me to use more native components includes in iOS7 or Android to do the redesign.

Problem : I have absolutely no clue of what these elements look like.

So, my question : Is there a way to recreate an in-app agenda / calendar (like the one from Fantastical2 for example) with native elements ? Or is there a way to have an access to some screenshots of these native elements ?

2 Answers 2


As a developer who was in this same predicament myself, I highly recommend taking a look at the Human Interface Guidelines (HIG) for the platforms in question:

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ http://developer.android.com/design/index.html

Those the respective HIGs for both platforms. Each platform has similar elements; however, they look very different. Also, both platforms have subtle variations in execution recommendations, which you should probably take into consideration. Taking these variations into account will be the only way to really make the experience feel native because, in theory, both platform owners will abide by the instructions in their respective HIGs when creating their own apps.

Most larger corporations will also have a Style Guide available describing how they, the corporation, would like you to represent them.

Unfortunately, I do not know enough about the particular implementation you are trying to achieve to say whether it can easily be accomplished using native UI components; however, I can say, that 99.9% of everything you see is done using some variation/combination of the native UI components with little (if any) actual custom drawing. You may have custom background images applied, colors, etc. - but mostly based on standard UI elements.

Having said all that, most engineers I've worked with are not very visual, as such it can be difficult for them to see how to break a design down into simpler pieces. So, if you can help them understand/see how to break it down, they should be able to handle the actual implementation relatively easily. (For example, while my app was on both platforms, I would actually do most of the XML layouts myself despite not knowing anything else about the platform.)

Hope that helps.


There's a nice mockup/code generation app available for iOS, called "Dapp the App Maker".

Dapp - Design and make your own iPhone apps with generated code and mockups

Using this app, you can design your re-skin using actual iOS elements (table views, for example). Using the paid version ($9.99 US, last I checked), you can then export the design and its resulting generated code to Xcode. The developers can then just flesh out the functionality.

Mockup apps are available for Android also, though I'm not familiar enough with any to recommend one that acts like Dapp. (The creator of Dapp has suggested that he may look into developing an Android version eventually.)

Not the answer you're looking for? Browse other questions tagged or ask your own question.