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

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

Here’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.

Review: KiSSFLOW – the workflow as a service on Google Apps

Orangescape recently launched KiSSFLOW (workflow as a service) at Google I/O 12. I was privileged to see a demo of the app prior to the launch and tried it out for few days. Will probably be implementing it at our company too..

The value proposition is very clear. Many smaller and medium size companies use Google Apps account for their mail and document needs. Most of the organization processes happen over informal means, through emails or paperwork.  Providing a platform which allows company owners to set up easy automation flows to manage some of their processes will come in very handy. On top of it, if it utilizes the data already present, nothing like it. KissFlow comes across as one such platform where you can quickly automate some of the organization process without leaving the affordability and the environment of Google.

Some of the things I really liked about the app:

1. The User Interface

It has maintained a very consistent feel to the other google apps and is a pleasure to use. It didn’t need much of training or help to get started with the process creation, form creation or following a process from initiation to completion.

2. The Form designer

It is one of the better form designers around. Covers most cases for a typical company needs.

3. The workflow designer

This is the core of the app and lives up to the expectations. It allows you to add a step in the process and associate it with people responsible for executing that step. Again, all the users are fetched from Google’s repository. It supports different type of action like approval, input needed and also allows you to branch parallel processes.

It could easily represent some of the simpler processes like Reimbursement, Leave, and Procurement within the company. With some intense use, it could also be customized for some of the more complex ones like Sales Lead and complex Procurement flows.

It could be made better with pre-created templates and more help content to create the workflows. But, as it is, its pretty decent.

4. Query back and Follow request options

These are two nice touches. Query back allows for clarification related to requests and provides a nice discussion mechanism (would be nice if it displays all the conversations, though..).

Follow option allows people in the chain to follow a request till its completed. This enables other people to also be involved in whats happening with the request.

All in all, it looks a great app for smaller and medium size businesses who already use Google Apps for their company. Ability to attach documents from Google Docs, access it from within the google environment and feel like one too. Deployed to Google App Engine, it can get you started in minutes.

Its free for 10 users and charges post that. More on their price here.

On Orangescape, I’ve been following them since quite a few years and is one of the better companies that’ve come out of our place. Their contribution to the developer community in chennai and around has been inspirational to many of them. They recently raised a $1M fund from Indian Angels and would be raising some more very soon.

Kudos to the team on the launch and expecting more exciting news from them in the days to come.

Bolo launched in 5 hours..

Bolo is a new app that I’ve created that helps parents record interesting voices to animal pictures and play them for their kids. Well, technically, the kids could do that too. So, all in all, fun.

It started on friday morning.. Was playing with my son and found some apps which make animal sounds. The sounds aren’t the best in most of those apps, to say the least. So I started making some noises myself and my son loved it. Well, the sounds were still not great, but he loved it being performed live. Hah, I’ve defended myself now.

Gave me an idea, why not make an app where parents could fill in for animal’s voices. Then start playing with their kid, making noises live and being played back. That’s how ‘Bolo’ started.

Bolo in hindi means ‘say’. So thats what it does.

Development started Friday night. Saturday Afternoon, it was pushed to the market. (Of course, I slept for a while too.)

Technical details :

Contains a simple ViewPager Activity and FragmentStatePagerAdapter. Recording and Playback is done using MediaRecorder and MediaPlayer apis. There’s not much to say apart from that.

It is available in Google Play Store here.

The pictures are taken from http://www.bigfoto.com and modified using Instagram’s android app.

Hope you have fun with it. Do let me know if some addition could improve the experience.

Here are some screenshots:

Useful tools if you’re starting an android app.

There are a host of independent libraries which help us write android apps more quickly and in more maintainable fashion. These apps range from accessing View elements to Event Handling to Security and Database access. Here are a few of them which rate high in my opinion:

1. An actual smartphone

There’s nothing like it. I’ve seen few people code on emulator. I’d not recommend it because of its speed and irregularities. Start using the phone for your development. The productivity benefits are huge.

One handset would do fine for development. 🙂

2. Robotium

Simple test framework on Android.

3. Robojuice

It has few good utilities like Injection of resources/views and pojos. Also has a basic event framework.

4. Sugar

[I’m the developer here]. But seriously, if you have more than a few tables, its better to go with a tool that provides you some abstraction. Sugar is an effort to provide ActiveRecord like access to database Objects. Few similar tools that offer this feature are listed here..

5. IntelliJ IDEA and MAT

IntelliJ IDEA is the best Java editor out there. Android support comes with its community edition. Memory Analyzer Tool is an obvious choice for analyzing the heap dumps.

6. GreenDroid

It has some readymade widgets for use in Android. The code is fairly mature and useful. Good addition to your UI development.

This in no way is an exhaustive list.. I’ll try to keep adding to this list with some specific libraries for specific purpose.

[Update]

7. ActionBar Sherlock

Action bar is a great way to present navigations and user actions in Android apps. It was started with Honeycomb and is well received and extremely improved in ICS and Jellybean. ActionBarSherlock provides an easy way to make this design available on prior versions of android. Its very popular and a must-have library.

8. Sliding Menu

Its a nice little library to add sliding menu (like Google+, Facebook, etc.) to your application. It is very easy to integrate with and adds a touch of style to your app. Along with ActionBarSherlock, it adds a great look and ease of navigation to your app.

Do share if you have some recommendations.