Android – render and animate with SVG

Few days back, we released the android version of Peekaboo HD. It’s a series of apps focusing on introducing animals and their voices to kids in a very pleasant way. It’s minimalistic and quite fun for toddlers. (more details here)

We chose SVG for rendering the images considering the smaller size and better scaling capabilities that it provides. This was an interesting choice considering android doesn’t support SVG natively, and the browser support for SVG started very recently (3.0+). We went the route of SVG renderers. We looked at few SVG renderers available and finalized AndroidSVG (by Paul Lebeau).

AndroidSVG rendered our svg files the best and seems more active than the other libraries available. (Also, Paul responded to our query email very promptly :) ). This solved our problem for finding a good SVG renderer. Next up was animations..

Peekaboo animates the animals to add some fun and engagement. AndroidSVG doesn’t support SVG animations, so we chose to do a custom frame-by-frame animation.

Looking at the options, AnimationDrawable seemed almost perfect. So, we dynamically created an AnimationDrawable object and used the addFrame() method to add the Drawables to it. AndroidSVG gave us a picture object, which we could add as PictureDrawable. Here’s a brief of that particular code:


AnimationDrawable animationDrawable =
new AnimationDrawable();

SVG svgImage1 = SVG.getFromResource(context,
 R.raw.image1);

animationDrawable.addFrame(
new PictureDrawable(
svgImage1.renderToPicture(), 50));

SVG svgImage2 = SVG.getFromResource(context,
 R.raw.image2);

animationDrawable.addFrame(
new PictureDrawable(
svgImage2.renderToPicture(), 50));

//finally, set it to the imageView
someImageView.setPictureDrawable(
animationDrawable);

That’s pretty much it and we have an animated Animal. We had the animation choreographed for the voice, so that it seems in sync. We achieved that by varying the animation duration of each frame.

Hope this helps you if you’re trying out something similar. Let me know if you’ve been successful in other ways as well..

Wait for a mistake or Hit a winner..

I’ve been watching US open Tennis currently and I’ve observed this trend as we move up the rounds. Was quite interesting, so thought of sharing my thoughts on it.. 

If you observe matches in the initial rounds, you see lot of lower ranked players playing each other. As we move forward in the rounds, the quality increases and we see better levels of tennis. In the initial rounds, the games seem to go at a much slower pace. Most points are won on “Unforced Errors”, which means errors that were made by the player himself, not induced by the opposite player.

Lets look at a match stat.. It was between Somdev Devvarman and Lukas Lacko

Image

Have a look at the Winners and Unforced Errors stat there. You’d see the result went in the favor of one who made fewer unforced errors. This is a typical trend in the initial rounds. Hence the matches are quite boring as there are lot of mistakes made by the players, and worse, the players are just waiting for each other to make mistakes rather than play the awesome winners. This may not be true, but certainly looks like that.

Now compare this with a game further down the tournament, a Semi Final or the Final. This is generally contested between top ranked players. These guys or girls hardly make any unforced errors. So you’d typically see lot of winners and great game overall. 

This same thing applies for any type of company or work as well..

There are jobs that pay you just to not make a mistake. You’re just expected not to make a mistake. It doesn’t matter if you don’t hit the winners. Hitting winners brings an element of risk along with it. If it goes wrong, it adds a negative remark on your profile. However, if you do hit a winner, it really doesn’t add much to your profile. Generally discourages improving and upping your game.

This works perfectly for some organizations and employees. They play the lower rounds and never really interested in making it to the next rounds, because this game will not cut it.

If you move higher through the rounds, you’ll not only have to make less mistakes but at the same time, hit winners.

It is certainly tougher than just waiting for some one else to make a mistake for you to get advantage. It certainly requires lot of hard work to perfect your game, where you reduce your number of unforced errors. It certainly requires you to be more aggressive and try out impossible winners at times. It certainly involves lot more risk and certainly pushes the envelope of your physical and mental capabilities.

But this is what makes great championships what they are. Top players hit winners, and not just waiting for opponent’s mistakes.

This is the reason only Finals are remembered. 

This is the reason only Champions are celebrated.

Genymotion. android emulator, that actually works.

Anyone who has developed Android application, knows the issue with their emulators. Slow and sluggish are the words that come to mind, when we talk about them, and that’s just getting started. Practically, they’re pretty much useless for any serious app development. Most developers prefer to develop and debug right on their devices, and skip the emulator completely. 

Ok, enough about them. Back to our point..

I recently came across Genymotion, which is an evolution of the popular AndroidVM project. This emulator will completely put all our arguments to rest. It is fast and snappy. Loads in about 10 seconds and works as good as a device. It also provides lot of preset device configurations, so you can emulate the popular devices on genymotion.

To make it work, you need to install VirtualBox on your machine, and then follow the instructions to setup a device configuration in minutes. You can also add plugins to your favourite editor (Intellij IDEA, in my case) to work with the virtual devices that you’ve setup.

That’s it. You’re ready to run your app in this shiny new emulator. Go ahead and give it a try. Strongly recommended.

Android Navigation Drawer on both sides

This is yet another post on Navigation Drawer pattern recently introduced in Google I/O 2013.

This pattern is certainly not new, and has been around for quite some time. Sliding Menu has been my favourite implementation so far. It supports left and right mode, with many other configurable options like size of the slide menu, movement behind it, etc. However, the navigation drawer provided by android compat library differs in the presentation of the concept.

Navigation Drawer has chosen to keep Action Bar as well as the main view intact, and appears as an overlay on top of the view. It works really smooth and looks great too. The other advantage here is that Google is adopting this approach on all its flagship products and hence would be instantly recognisable. One drawback however, is that it is currently not supported on gingerbread and lower devices. Though, it should soon be available along with ActionBarCompat that was announced during the I/O.

On to the point now.. The implementation of Navigation Drawer is fairly straight-forward and documented very nicely here. Here I’d mention an approach using which you could use navigation drawer on both left and right side in the same view. This is useful for following reasons:

1. You want to use the left side drawer for Navigation purpose and right side drawer for things like ‘Filter’, ‘Notifications’ etc.

2. You’d like a similar feel for overlays that appear on the app. Using it on both sides, gives a very smooth flow and retains the same behaviour (peeking, smooth sliding and edge touch).

On to the implementation:

This would be an extension to the application provided as example in the documentation section. So, first get the example app running and then try this method.

Add another ListView for the right side drawer, and instead of “start” use the layout_gravity as “end”. So your final layout file would look like following


<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
 android:id="@+id/content_frame"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

<ListView
 android:id="@+id/left_drawer"
 android:layout_width="400dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

<ListView
 android:id="@+id/right_drawer"
 android:layout_width="400dp"
 android:layout_height="match_parent"
 android:layout_gravity="end"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

</android.support.v4.widget.DrawerLayout>

In the activity, get a handle to both the list views. (By the way, they could be any other views as well..). Now whenever you need to open the right side menu, just call the openDrawer method on the drawer layout, providing gravity as END.


mDrawerLayout.openDrawer(Gravity.END);

That’s it, now you could open the navigation drawer on both sides.

Now, you’d like to close one drawer on opening the other drawer.. Use the closeDrawer method at appropriate location to close the drawer.


mDrawerLayout.closeDrawer(Gravity.END);

That’s pretty much it. The drawers close and open in a very smooth manner and provide a pleasant experience to the user.

Happy android hacking..

My Latest Work : SignEasy

SignEasyHere’s an update on my work lately. Just released an updated version of SignEasy on the play store. SignEasy is a mobile-only app that makes signing documents really a piece of cake. Import your document from dropbox, box, sd card, email and quickly sign them digitally with a smooth experience. I’m a user of the app as well and truly appreciate the simplicity with which you could sign the documents. There’s nothing complicated about it.

I started work on SignEasy only recently when Sunil (co-founder, SignEasy) approached me to improve their android version of the app. The app was in a decent shape, with the existing code not available in a great condition. The android version had a few performance issues too and the workflow was a little tedious. The major issue was that the signing process felt incomplete. There was no provision to sign the document on the client side. It was uploaded to the server to sign and return back the signed copy.

This was a slightly painful experience for the user. Since the user couldn’t immediately see where he signed in the document. It’d only be available after he finishes his editing and the document is returned from the server. We analyzed a few android pdf editing/rendering libraries and went with one with supported local editing and rendering ability. Integrated that quickly into our code and that was it. Now users can quickly see their signatures on the app, and don’t need to wait for server processing. We also changed a few finer things in the app and the results are available in the new update of the SignEasy app in the play store.

If you’d like to work with me on your product/idea, Please do send me a note at satya@satyanarayan.in.

Smartness is in the language.

There was an interesting discussion that I recently had with a friend. The context was around choosing a technology stack for server end of the solution. We were discussing around php, python or Java. Client-end technology does not provide many choices right now. On mobile, Android/ios have specific platforms. If you’re going hybrid, you’d go with javascript based ones. Server end is a little different. There’s a host of choices. 

Ok. Back to the discussion. So we’d need to hire developers to work on the back end. Our thought was this: If we choose a more sophisticated language, would we get better developers. Now, in the choices we had, python was the most sophisticated. Personally, I like the language and the community around it. Now, if we went with PHP or Java, it’d be relatively easy to hire developers in India especially. Also, due to sufficient supply, we could also hire at a nominal rate and not burn our pockets. Though, the quality of such folks is rather questionable. In my experience, we’ve had to interview 10-20 people or more on average to find a decent developer in PHP or Java. Especially one who could appreciate programming in general and understand different design paradigms. Typically, you come across people who’ve known to code a certain way, and base their experience around a couple of tools. They feel completely foreign when introduced to newer concepts, even though experience-wise boasting greater than 5 years or so.

Now python developers aren’t too common here and come at a relative premium. Same with Ruby, Clojure, Node or similar languages/platforms. But since the language is so sophisticated, it instills lot of good practices in developers. Also, the quality of design skill is certainly higher than a regular PHP guy, to say the least.

In the end, you need a smart developer. One who is a good problem solver, has neat design skills and likes to produce quality stuff. Our conversation came to a conclusion that we need to choose a better platform to find the right developers. Python is a choice that we made for the exact reasons.

The emphasis on a good developer because : A good developer is much more valuable than just his coding skills. There are many facets of product development, where a sound feedback or input from developer shapes the product in a great direction. Since they’re the closest to the core/internals of the product, their inputs are very valuable, and a right person at that place is the first step in that direction.

[Note: The idea is not to look down upon PHP and Java developers, or anyone for that matter. I’ve known and worked with extremely smart developers, who used these languages to express themselves. The post is in general a reflection of current status of hiring (especially in startups/smaller teams), and lack of efficient developers.]

Would love to hear your thoughts as well.. Please do share them here. 

The boring professional

I’m talking about professionals. Ones who just do their work without any fuss and get along with their lives.  Working with them is very uneventful. There are hardly any surprises. They seem to have all things covered, figured out. Its like a great Billiards player. They know which ball to hit and where to stop the cue. There’s no messing around there.

On the contrary, most of our software projects seem to be like a messed up puzzle. Few things hanging here, few hanging there. Gathering all the pieces together at the last minute. Get it in an wardrobe. Close the door of the wardrobe somehow. Get the damn product out the door. Repeat the process for every release. This seems to be an accepted norm.

The first company I used to work for had a delivery manager named Mr. Bali (name changed). He was this ultimate adventure lover. He could convert any normal project to a cliffhanger and then deliver it in crunch situation (mostly well past the delivery dates). He earned a reputation of the go-to man whenever the situation was tense and the management needed a ring-master. And, to be fair, he did a good job at that. After some point, it became a habit for all projects to lead up to this situation and managers/team members playing like superheroes. The whole account became a hub for super heroes. It almost resembled ‘The Avengers’ on every project.

Now our superheroes got into a habit of fire-fighting and would never strive to finish things off at a normal pace. Unfortunately for them, this kind of strategy doesn’t work for long and you’re sure to fail more often than succeed.

But its fun. Its a roller coaster ride for everyone involved. There’s emotion, tragedy, action, comedy.. all the masala that makes a blockbuster.

On the other side, there was this another delivery manager Mr. Semwal. He got into a habit of breaking down things, measuring progress, taking corrective actions well in advance. He’ll seldom get into such situations where he’d have to run around crazy to get stuff done. Most of his projects get done well in time ensuring full control on quality and well being of the team members.

But, of course, he’d never be a hero. He never provided the entertainment which Mr. Bali did.

Most management falter at this. They need to recognize calculated, methodical professionals too as they celebrate the heroic ones. Reward consistency and measured approach over heroic ones. This improves over time and keeps you away from heartaches. There are other ways of providing yourself with such cliffhanger entertainment.

About issues concerning software, startups and product management.

Follow

Get every new post delivered to your Inbox.

Join 38 other followers

%d bloggers like this: