ProteusAndroid Layout Engine

About us

Kiran Kumar @thekirankumar

Aditya Sharat @adityasharat

We are developers in the Mobile engineering team at flipkart

What we wanted to do

Can we change the color of the “Buy Now” button?

Can we increase the size of the Product Images?

Can we change “Buy Now” to “Book Now” for some products?

Can we add a subtitle below the title?

We wanted to modify the UI of our application without an update.

Sure we can; but next month!

What is Proteus

Proteus is an android library for achieving granular control over the visual appearance and data persistence over views/widgets displayed in any mobile app. Meant to be a drop in replacement for android’s LayoutInflater which allows creating and inflating layouts at runtime unlike the compiled XML layouts bundled in the APK.

This talk will introduce an in-house framework developed at Flipkart called "Proteus" and also touches on the how it was built from scratch.The framework enabled Flipkart to send a layout describing the view hierarchy from the server, rather than bundling it the traditional way inside the app. This framework also helped in doing A/B experimentation of the UI components as well as build native pages on the fly without the need for app updates.

What is Proteus

Why not use XML inflater ?

Remote XMLs are not supported by Android’s layout

inflater !

How Android LayoutInflater works

1. AAPT converts raw xml to binary xml2. Recursively walk through the xml3. Find the next class to instantiate using Reflection4. Invoke constructor of the found View class5. Cache the constructor in-memory6. Pass the XML attributes to the created View7. Ask the view to set fields or call methods on itself

for handling these attrs8. Go to step 2

Capabilities of Proteus

Build Views and compose Layouts.

Runtime Data Bindings and Formatters.

Describe Shapes and Animations.

Custom Views and Attributes can be plugged in.

Styles (like CSS), reusable attributes-values.

Fallbacks and failsafes are built into the library.

Built in data binding support

Ability to separate layout and data, keep layout cached for a longer time

Ability to change the data which updates the view automatically

Java code can only worry about data and forget the layout

Supported Android Widgets and Attributes

And Many More

Supported Drawables and Animations● detachWallpaper● duration● fillAfter● fillBefore● fillEnabled● interpolator● repeatCount● repeatMode● startOffset● zAdjustment● shareInterpolator● children● fromAlpha● toAlpha● fromXScale● toXScale● fromYScale● toYScale

● pivotX● pivotY● fromXDelta● toXDelta● fromYDelta● toYDelta● fromDegrees● toDegrees● pivotX● pivotY● controlX1● controlY1● controlX2● controlY2● tension● extraTension● cycles

● linearInterpolator● accelerateInterpolator● decelerateInterpolator● accelerateDecelerateInterpolator● cycleInterpolator● anticipateInterpolator● overshootInterpolator● anticipateOvershootInterpolator● bounceInterpolator● pathInterpolator

● Shape Drawables● Gradient Drawables● Layer List● Resource References

Demo

Adding Custom Views?Easily doable by using Custom View Parsers

Some Numbers

Number of releases avoided: 3

Development effort reduced: ~2 months

Number of A/B tests: 7(completed) 3(running) + (many planned)

Near Native performance

Sample layout render time:

Native: 25.0ms

Proteus: 24.4ms

Lots of adoption time saved.

Infrastructure tools around Proteus

Studio plugin to convert XML

Web editor to edit/manage/test layouts

MVC library to manage behaviour

Server to handle versioned layouts

A/B service for delivering different layouts

Scripting support ??

Not yet

Advantages

Zero adoption time

Update UI in older apps

Brand specific pages / themes

Customizing different AD layouts

Faster build times (local mode)

UI changes can be done by designers

A/B testing of different layouts

Road Map

Improve performance

Better Android Studio integration

Scripting Engine

The Bigger Picture

It’s open source !!

https://github.com/flipkart-incubator/proteusLooking forward for your contributions

Other Android FOSS by us

Chat heads https://github.com/flipkart-incubator/springy-heads

Batching analytics events https://github.com/flipkart-incubator/batchman

Network stats https://github.com/flipkart-incubator/okhttp-stats

Contact image grouping https://github.com/flipkart-incubator/circular-image

Other proteus like libraries

Json2view https://github.com/Avocarrot/json2view

AndFix https://github.com/alibaba/AndFix

ItsNat Droid https://github.com/jmarranz/itsnat_droid

React native https://facebook.github.io/react-native/