Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Beautiful & Stylish apps like Timely

A Quote from Google in terms of Designing, and some example of apps:

Based on what Google said in http://developer.android.com/ within design section, a developer should consider three goals:

  • Enchant me
  • Simplify my life
  • Make me amazing

Which BTW we (Developers) are aware of.

By looking at many successful apps on play store, you can see that they are designed by following Google design guidelines and are pretty much using the same components and theming and styles that google used in their own apps.

Many people do enjoy these kind of designs and also these android standards in terms of themes and components, but when you look at some apps in Playstore or some hardware manufacturer's apps like samsung whom have built their special apps (like galaxy note 10.1 note taking app) or asus weather app or in playstore the Timely app which is awesome in terms of functionality and of-course design, you could see they are using different kind of design and components.


Now let's get deeper in what Google says:

A typical Android app uses action bars, and many apps will include a navigation drawer.

Like these:

The Actionbar: enter image description here

The Navigation Drawer:

enter image description here

And other standard components on android.

But How can some developers make apps so beautiful and functionally perfect (almost! ) like Timely app and not using many of the android typical components defined by google.


Lets take a look at Timely app:

This is the screen where user can see the alarms where he/she could set one or just watch the clock:

enter image description hereenter image description here

Now the questions that come in my mind are:

  • How can I theme my app like that?
  • How can I make background animations like that and use it in my apps?
  • Did their developers use unity and eclipse together to make it function as an android app?
  • If they did use unity then how come the app runs very smooth?
  • In its actionbar ,how did they colorized it and defined opacity for the object?
  • What kind of animation class can do what they did in the app? (like the clock time changing animation)
  • If they used unity then how come their app's size is 10MB?

There are many other apps like this (no 100% that much alike) which have their own special design.

As far as I understand, there aren't much website that offer custom components for android like http://androidviews.net/ so it seems we are forced to make our own components which is time consuming and in this time (2013) isn't perfect whereas for ios there are tons of custom components made by other companies.

I also looked at the Timely app website, and within their FAQ section there is a place where they said they will reveal what and how they did the theming, coloring and components but since there is not time schedule table for their announcement and I don't like to stay in dark area, I came here to ask you experts.

This is the quote from their website:

I'm a developer and just can't figure out how you did those animations and color effects.

We are planning to have an engineering blog in the future. Stay tuned!

If you guys know how to make apps like these or if you know a portion of what kind of animations, components, tricks and hacks they used then you just made my day.

like image 304
Nima Sakhtemani Avatar asked Dec 26 '13 12:12

Nima Sakhtemani


1 Answers

They did a presentation in which they explain how they calculate the view colors, the problems they had with that and a few other useful tips. The video for the presentation is available on their YouTube channel

The number morphing is fairly simple and explained in this article and you can find the complete View class from the article here.


From android developer site check Helping you build beautiful, powerful, successful apps it is just cool.

Android Design, an online style guide which lays out the principles, building blocks, and patterns for excellence in Android user interfaces. It seems to be working;

I hope this answers at least one of your questions.

like image 198
jankovd Avatar answered Sep 21 '22 17:09

jankovd