proteus - android layout engine
TRANSCRIPT
![Page 1: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/1.jpg)
ProteusAndroid Layout Engine
![Page 2: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/2.jpg)
About us
Kiran Kumar @thekirankumar
Aditya Sharat @adityasharat
We are developers in the Mobile engineering team at flipkart
![Page 3: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/3.jpg)
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!
![Page 4: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/4.jpg)
![Page 5: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/5.jpg)
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.
![Page 6: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/6.jpg)
What is Proteus
![Page 7: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/7.jpg)
Why not use XML inflater ?
Remote XMLs are not supported by Android’s layout
inflater !
![Page 8: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/8.jpg)
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
![Page 9: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/9.jpg)
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.
![Page 10: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/10.jpg)
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
![Page 11: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/11.jpg)
Supported Android Widgets and Attributes
And Many More
![Page 12: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/12.jpg)
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
![Page 13: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/13.jpg)
Demo
![Page 14: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/14.jpg)
Adding Custom Views?Easily doable by using Custom View Parsers
![Page 15: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/15.jpg)
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.
![Page 16: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/16.jpg)
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
![Page 17: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/17.jpg)
Scripting support ??
Not yet
![Page 18: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/18.jpg)
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
![Page 19: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/19.jpg)
Road Map
Improve performance
Better Android Studio integration
Scripting Engine
![Page 20: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/20.jpg)
The Bigger Picture
![Page 21: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/21.jpg)
It’s open source !!
https://github.com/flipkart-incubator/proteusLooking forward for your contributions
![Page 22: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/22.jpg)
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
![Page 23: Proteus - android layout engine](https://reader036.vdocument.in/reader036/viewer/2022062316/58803e431a28abfd0a8b5957/html5/thumbnails/23.jpg)
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/