68

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 here enter 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.

passy
  • 7,170
  • 5
  • 36
  • 38
Nima Sakhtemani
  • 1,119
  • 2
  • 10
  • 21
  • 2
    There's an [article](https://sriramramani.wordpress.com/2013/10/14/number-tweening/) about how they made numbers' animation. – Egor Neliuba Dec 26 '13 at 13:01
  • 6
    I would guess they just used a GLSurfaceView for the background and reskinned the action bar to be translucent (http://developer.android.com/training/basics/actionbar/overlaying.html). The numbers might just be custom Views where they wrote their own bezier animations for the numbers, but they could be GLSurfaceViews as well. The _way_ they created it doesn't look like a mystery. The beauty is in the design and polish. Take a look at some OpenGL ES starter tutorials...there's a big first step to learn the basics of OpenGL, but once you've got it, a lot of possibilities will open up for you. – Tenfour04 Jan 06 '14 at 14:13
  • Is this question *JUST* about how to make your app look like *Timely*, or are you asking something more? You ask a lot of questions regarding what technologies are used, but you don't really explore them. Have you looked other places than the Timely website? – Phil Jan 08 '14 at 16:08
  • Do you want we post the source of Timely? – mayank_droid Jan 10 '14 at 06:52
  • 2
    i am interested to know too.. – Shridutt Kothari Jan 11 '14 at 07:53
  • @Tenfour04 Thanks for the greate comment, the actionbar definitly helped. but Where can I learn to make the background effect like timely and impement is as GLSurfaceView in my app? – Nima Sakhtemani Jan 12 '14 at 10:20
  • @mak_just4anything Please, I would like to. – Nima Sakhtemani Jan 12 '14 at 10:21

1 Answers1

62

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.

shareef
  • 9,255
  • 13
  • 58
  • 89
jankovd
  • 1,681
  • 1
  • 16
  • 22
  • 6
    Note that most of the video is English, even though it doesn't start that way. – Phil Jan 09 '14 at 19:00
  • 1
    Thanks for the great video. I was expecting something like this. – Nima Sakhtemani Jan 12 '14 at 10:59
  • I'm looking for same thing for textview, is there any TextviewMorphingView available?! – LOG_TAG Jan 15 '14 at 05:26
  • 1
    That would be very tricky thing to do and I don't know if anyone created a something like that. To do that you would have to calculate the control points on the fly for all characters in the text, which I think would be a hard thing to do for some random font. And again do that for the new text and figure out how to morph from the old to the new text. – jankovd Jan 15 '14 at 14:45
  • Well not that it would be any easier but there are morphing algorithms out there… – Martin Marconcini Mar 10 '14 at 00:06
  • 1
    There is a good one available, check this out called TimelyTextView in GitHub.(https://github.com/adnan-SM/TimelyTextView) – Droidman Aug 28 '14 at 04:17