When Obvious was brought in to refactor a big legacy app last year, we found ourselves in a strange situation. Our client was maintaining a common library for handling networking — HTTP, FCM, MQTT — across all apps under their brand. This library (let’s call it SadLibrary) had an API that was badly designed and dated, but not using it was not an option — a dedicated team was working on it and their manager started showing signs of protest.

Most modern Android apps use Retrofit to access REST-style APIs in an elegant and simple way. We wanted to see if we could make Retrofit work with SadLibrary and decided to give it a shot. Our initial idea was to fork Retrofit as RetroUnfit and plug-in SadLibrary instead of OkHttp. Thankfully, this spectacularly bad idea was shot down in no time. After going through Retrofit’s code, learning how Retrofit delegates calls to OkHttp and, how OkHttp further delegates them to interceptors, we realized that the correct solution was far simpler.

OkHttp and The Magical Interceptors

For those unaware, OkHttp uses interceptors for not only letting clients hook into calls and modify their request/response bodies, but also for finally running the call on the network. This is done inside the very last interceptor and can be seen in action here: okhttp3.RealCall#194.

So to make Retrofit work with SadLibrary, all we needed to do was add an interceptor that redirects all network requests from OkHttp and forwards them to SadLibrary. Here’s an example:

Using this interceptor is no different from using any other OkHttp interceptor:

That’s all! Retrofit could now be used for making network calls without dealing with SadLibrary and its sad API!

Making Retrofit work for you

Using Retrofit in this manner is very similar to what Nick Butcher does in his beautiful Dribbble client, Plaid. Since Dribbble does not provide a search API, Plaid manually downloads the search page as HTML and parses it using Jsoup. But, instead of leaking this ugliness to the rest of the app, this functionality is exposed through Retrofit as if it were an actual Dribbble API.

The response body is parsed inside a Retrofit Converter:

Source: DribbbleSearchConverter.java

And used like a boss:

Source: BaseDataManager.java

You can watch Jake Wharton explain this in more detail in his talk, Making Retrofit Work For You (GDG Cincinnati).

Cover photo by Bryan Colosky.

Read more

Over the last three months, we’ve been busy at work setting up our new, Central Bangalore office.



We’re finally settled in, and we’d love you to come by and say hi, have a $BEVERAGE_OF_CHOICE and shoot the breeze. Feel free to bring a friend, or three.


When Where How What


Date and Time

7pm onward, Friday the 13th, 2018



#40 Primrose Road,
Bangalore — 560025

Or just ask Google.



If coming from North Bangalore/MG Road: Turn left off MG Road, just before Prestige Meridian. Come down on Primrose Road and pass Happy Belly Bakes on your left. Take the first right turn. Our office is the third building on the left.

If coming from South Bangalore/Residency Road: Turn right next to Garuda Mall/HomeStop, and make the first left turn onto Primrose Road. Take the first left turn and our office is the third building on the left.

Public Transport: The Trinity Circle Metro station is the closest to our office. Get off and walk towards Prestige Meridian (~400m), turn left onto Primrose Road. Walk down and make the first right turn after Happy Belly Bakes. Our office is the third building on the left.



We have very limited parking and encourage you to use public transport, or bicycle to work (helmets and safety gear compulsory). We will have bicycle parking in the driveway.


Dress Code



Pratul Kalia | [email protected] | +91 95355 20400
Wolfram Thurm | [email protected] | +91 97414 33463


Code of Conduct

Uncommon does not currently have a code of conduct in place. Until such time as we do, we are borrowing from work done by the Ada Initiative. We require everyone attending an event organised by us whether social or otherwise, to read, agree and abide by the code of conduct listed below:

Please note: Replace “Conference” with “Event” in the previous link.

Read more

Spans in Android are something that don’t get as much attention as they deserve for how widely they’re used across the platform. I was fortunate to be able to talk about them at Droidcon San Francisco this year.


Do you know what’s common between the blinking cursor, hyperlinks and text highlighting in TextViews? They’re all implemented using spans. Spans are tiny objects that Android uses heavily across the framework.


If you’ve worked with text styling such as bold or italics, then you’re already familiar with the basic usages of spans. But they are capable of much more than just modifying the visual representation of text like changing indentation, receiving URL clicks, listening to text changes, displaying spelling suggestions, images and much more.


This talk will do a deep dive on the various spans that Android offers out of the box as well as custom spans and how they can be used for displaying text in any way imaginable.


You can also find the slides here: http://j.mp/lesser-known-world-of-spans-slides.


The lesser known world of spans — Droidcon San Francisco was originally published in uncommon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Read more

One of the methods we use a lot in our everyday battles with Android is findViewById(). It lets us find Views from layouts written in XML and returns a reference to their Java objects. And yet we know very little about how this thing works. How do layouts hierarchies written in XML get automatically converted to Java objects and delivered back to us in our Activities?

To understand this, we need to look at Android as a pure Java framework. For anything written in XML, the framework spends extra effort converting that into Java. Layouts are the best example of this and the class responsible for “inflating” them is LayoutInflater, which is precisely what we’re going to explore in this post.

Example usage of LayoutInflater in Fragment#onCreate()


The entry point to LayoutInflater is its inflate() method and we use it in a lot of places:

  • Fragments,for inflating their layouts.
  • Adapter backed Views,for inflating the layout of each item in a RecyclerViewSpinner, etc.
  • Activities: This is not obvious, but every call to setContentView()internally gets routed to LayoutInflater. The source for this can be seen in PhoneWindow (or AppCompatDelegateImplV7 when extending AppCompatActivity).


LayoutInflater begins with the root ViewGroup of a layout and recursively starts inflating its child Views, forming a tree of View objects. For each View found in the layout hierarchy, it instantiates its equivalent Java object in three steps:

1. Parsing XML using XmlPullParser

The first step involves parsing the View name (e.g., TextView) and its attributes from the XML layout file. This is done using the help of a class known as XmlPullParser, which is an XML parser (just like Moshi for JSON).

2. Constructing attributes using AttributeSet

After reading a View from XML, the second step involves understanding its plain values read by XmlPullParser and constructing a data-set out of them. This includes:

  • Understanding the unit of a value like “24dp”.
  • Following the reference to an external layout in <include [email protected]/include_toolbar" />.
  • Resolving resource identifiers. That is, figuring out if
    @drawable-v21/button_background.xml should be used over @drawable/button_background.xml depending on the API level.
  • Resolving duplicate attributes from different sources. This usually happens when the same property is defined inline on a View as well as inside a style applied on it.

3. Instantiating View object using reflection

After extracting data in the first two steps, herein lies the most interesting part of LayoutInflater. Using the View’s name and attributes, LayoutInflater attempts to instantiate its Java object in a trial and error manner using reflection.

For those unaware, reflection is like black magic. It lets you examine the type system of a class at runtime, making it possible to access & modify members of a class (fields and methods) that are otherwise private or inaccessible, including invoking the constructors of the class:

Class<?> cl = Class.forName("com.example.SomeClass");
Constructor<?> cons = cl.getConstructor(Param1.class, Param2.class);

LayoutInflater uses this same magic for instantiating the View’s object by passing its fully qualified name to Context#getClassLoader()#loadClass().

For extracting the fully qualified name, LayoutInflater categorizes Views into custom Views and framework Views by using a hack: searching for dots in the name. If dots are found, the View is categorized as a custom View and a framework view otherwise. Beautiful!

LayoutInflater.java, line #748.

a) Framework Views

For framework Views like TextViewImageView, etc., which do not require their fully qualified names in XML, LayoutInflater attempts to guess the package name in a trial and error manner:


String[] potentialPackageNames = {
for (String packageName : potentialPackageNames) {
    try {
        View view = createView(packageName, viewName);
        if (view != null) {
            return view;
    } catch (ClassNotFoundException e) {

In each iteration, the createView() method attempts to invoke the constructor:

TextView textView = (TextView) context
        .loadClass(packageName + ".TextView")

b) Custom Views

On the other hand, for custom Views it is impossible for LayoutInflater to guess the location of their sources. That is exactly why Android requires their fully qualified names in XML layouts, which LayoutInflater can directly use for invoking their constructors:

RecyclerView recyclerView = (RecyclerView) getContext()

In case the loadClass() call results in a ClassNotFoundException because an invalid View was found in our XML layout, LayoutInflater re-throws it as an “Error inflating class” exception.

And that’s it.

With each inflation, LayoutInflater links the instantiated View to its parent ViewGroup and its children Views, essentially creating a tree of our View hierarchy. The View then simply traverses these links every time findViewById() gets called.

The use of reflection by LayoutInflater makes it an expensive and slow process, which is one of the reasons we should avoid complex View hierarchies. Not doing so directly affects the startup time for Activities, Fragments or any adapter backed ViewGroup.

There’s another interesting step involved in the inflation of layouts that I decided not to include in this article because of its complexity: Layout Factories. They are classes that can hook into the inflation process for generating their own Views and are used by AppCompat (for backporting material design to API levels below Lollipop) and Calligraphy (for applying custom fonts without using custom Views). Look at the Calligraphy source for more details on how layout factories are used.

Read more

Interface design has moved from Photoshop to a new contender: Sketch. Designed by Bohemian Coding, a company with less than 20 people, it has eclipsed the nearly 5-billion dollar behemoth, Adobe, to capture more than a third of the market for digital design. There are lots of good articles and blog posts that one can read to get the hang of it (for switching from Photoshop check here, for the learning community behind Sketch here and the Sketch collection on Medium here).

We challenge our tools all the time and I am personally very excited to see the evolution of live-collaboration within tools like Figma for instance. However, in this article, I want to share how I use Sketch, what works for me and what I have learned along the way.

Things to consider before you even start…

Following a few simple steps can simplify your life, especially when you work on large projects or when more then one person is working on the same Sketch file. Even though I know that following these rules can be annoying at times, for me it proves itself worthwhile every single time.

Always work on a clean file…

That sounds obvious, but it’s very crucial to actually do it. I structure my files by the features of the application that I am designing. For example, if I were working on a mobile taxi-hailing app, I might structure my file as follows:

  • 01-Login
  • 02-Home
  • 03–Ride
  • 04-Food
  • …and so on and so forth

That means I use one page for each flow or a feature. That allows me to name Pages and Artboards in a way that when we present work to each other or clients, it’s easy to identify exactly which screen we are talking about.

Since every Artboard across our Sketch document now has a unique ID, I can identify each Artboard individually and don’t have any duplicates like Enter Name or Menu etc.

I find this very helpful when I have to navigate a client through a flow over a phone call or Skype. It’s much easier to say “Screen 04a goes to 07g and then to 08b”.

Parent Folder / Child Folder / Grandchild

You can use a slash (/) to tell Sketch to create a folder structure. For example, when you export your screens, Sketch uses the titles of the artboards with the slash as a folder separator. So, a title like this “01-Login/01a-Login with Facebook” creates a file called “01-Login with Facebook” under a folder called “01-Login”. The same thing works for nested symbols and styles.

ProTip: How to use the Slash to create a folder structure in your Sketch exports

Name your layers…all of them!

Well, that sounds like a lot of work but it isn’t at all, considering the amount of time I save later in my design process. I follow a very simple, yet very effective rule. Name a layer for what it is, and not what is in it. So all these layers called Group671 (yes, it took me a while to learn that lesson) should become something like List Item Double Row or Full Bleed Button. Now I don’t use names like Enter Phone Number or Select All. Instead, I call them Single Line Text Input and Menu Item. This goes very well with the search panel in Sketch when you want to select the same elements across multiple Artboards.

Sketch has Symbols and Styles — and they are very powerful tools!

There are many good articles out there already that explain Symbols and styles very well. There are also Text Styles and Shared Styles. These are one of the reasons that Sketch is so great.

Most UI elements can be converted into symbols, and believe me, that saves a lot of time. Sketch has improved the functionality of symbols quite a bit — in the latest update, for example, you can even swap nested symbols. While this might seem advanced at first, once you’re designing lots of screens, you’ll need to utilize these options to tame your files!

UI elements library

I use symbols to create libraries of UI elements. Once we hand over our Sketch source file to a client, we make sure they get something that our client’s in-house team can take forward easily. That way it becomes very easy to extend the design later, for example, to add a feature or functionality. Similarly when handing over a file to developers one should be able to find all assets well organised so that the transition from Design to Development is as seamless as possible.

We create libraries using symbols

Text Styles

One way to use text styles is to set up a style guide before you even start your file. This, however, implies that you already know how many, and what kind of text styles you need. I create a text style library along the design process and name them according to their function. That way it becomes easy to change and adjust them later on. As before, use the ‘/’ to organise your styles in folders according to their function i.e. Dialog/Title or App Bar/Tab Inactive.

Grids are great!

They are easy to make…

You need them all the time, so never waste time on difficult margin adjustments and copies of layers. Especially when you want to be pixel perfect — I know that Sketch allows you to use fractions of pixels, but having the option doesn’t mean it should be used. Ever.

Design in a grid

You can set up a grid according to your Layout and Control+Gswitches the Grid on and off. If you are designing for mobile just keep it at 8px — life will get much easier.

Shortcuts that I can’t work without

Ok, most people probably know all of them, but just in case, there are some essential ones that one has to know. Standard shortcuts like hold Shift while transforming to keep the ratio, are the same in Sketch as they are everywhere else.

  • cmd+alt+v: this lets you paste the style of any object into another object
  • cmd+shift+v: this lets you paste in the same place. For instance, pasting something from one group into another in the same art-board.
  • cmd+click: Simple, yet extremely useful. having pressed cmd you can select any layer no matter how deep it is nested inside a group.
  • Don’t browse through your layer list to get into higher levels in your groups. Just press Esc.
  • If you looking for another layer in the same group, press Tab to go through them one by one.
  • Press Alt to measure all the distances
  • Use A to create an Artboard, S for Slice, R for Rectangle, U for Rounded Rectangle, O for Oval/Circle, L for Line, V for Vector, P for Pencil and T for Text.

Well, most of all one should go through this list of shortcuts and start using them. They will help you speed up a lot. Once you start using plugins, their custom shortcuts are also very useful!

Plugins we use on a daily basis

Speaking of plugins: they are the best, and they make Sketch incredibly powerful. You can make your own Plugins and there are tons already out there and new ones coming out all the time. Consider signing up to the Sketch Newsletter to stay updated. The ones below are the ones I use and find essential every day.

  • Sketch Toolbox: lets you download, install and manage all plugins that are out there in one place.
  • Craft by InVision: this is probably the most powerful Plugin out there. Sync your work, create a style library, pull in placeholder images, stock and life data (text, pictures, tables) and duplicate elaborate nested groups having full control over individual content (think of contact lists, an email inbox, picture grid etc). You even can have one style library that you share across multiple Sketch documents. That means if you want to change one colour in all of you screens as well as in multiple files you can do that with one single click. And I am quite excited about Craft Prototype when it fully releases.
  • Remove Unused Symbols: Well, let’s just say not all of my Symbols survive the design process and as I said earlier, having a well-sorted symbol page is great, make sure you get rid of what you don’t need.
  • Rename It: a very useful plugin, to rename multiple Layers or Artboards at one go. You can sequence them, add dimensions and much more.
  • Sketch Commands: Everything and the kitchen sink. It’s best to go through the documentation; this plugin definitely comes in handy.
  • Sketch Constraints: When you design for multiple screen sizes, there is no way around this one. You can define any position and alignment relative to other objects as well as borders.
  • Relabel Button: this is quite a simple plugin, but I use it all the time. It means that no matter what the label of your button is, the margins stay the same. The cool thing is that works for any kind of bounding box.

Handing over finished designs to our friendly developers in a way that they can easily use is extremely important. Zeplin offers exactly that. Its integration with Sketch makes this process super easy.

In Conclusion

The set of available design tools is ever changing and improving. I always try to explore different ways of getting things done and exploring new tools which allow us to do new kinds of design work. For me, that means following a very simple rule: never be afraid of learning a new tool, even if it means investing some extra time in the beginning. Nothing is worse than stagnation, especially in design.

If you have better ways of doing things do let me know below. I am always eager to learn and to improve the design process that I follow.

Read more