Proteus: Android Layout Engine

Inflate views at runtime. Update your apps UI without an app release. No WebViews. Runtime Data Bindings

1. Aditya Sharat - @adityasharat Developer Mobile Engineering Flipkart
2. Proteus Android Layout Engine
3. What do we want to do? provide the latest and greatest to all our customers But why?
4. What happens today • Change color? • Increase the size? • Change labels in certain cases? • Add something new? Sure we can; but next month!
6. • 1 Month release cycles. • QA and Regression testing. • A/B testing? Implement all variants. Traditional Releases
7. How apps are built and deployed today Develop the App Publish on play store Users download from the play store
8. What is an app? Java Code Layouts Icons, Images, etc awesomeness.apk
10. Ad Ad
13. Demo
15. Native View
17. Plain XML and LayoutInflater? The LayoutInflater currently does not support plain XML. https://goo.gl/ZJQgHx
18. How the LayoutInflater works
19. How the LayoutInflater works • Plain XML into binary XML
20. 0300 0800 ac03 0000 0100 1c00 5801 0000 0f00 0000 0000 0000 0001 0000 5800 0000 0000 0000 0000 0000 0f00 0000 1f00 0000 2d00 0000 3200 0000 3f00 0000 4b00 0000 5e00 0000 6b00 0000 7500 0000 a200 0000 a500 0000 ad00 0000 bc00 0000 f500 0000 0c0c 6c61 796f 7574 5f77 6964 7468 000d 0d6c 6179 6f75 745f 6865 6967 6874 000b 0b6f 7269 656e 7461 7469 6f6e 0002 0269 6400 0a0a 7369 6e67 6c65 4c69 6e65 0009 0965 6c6c 6970 7369 7a65 0010 106c 6179 6f75 745f 6d61 7267 696e 546f 7000 0a0a 7669 7369 6269 6c69 7479 0007 0761 6e64 726f 6964 002a 2a68 7474 703a 2f2f 7363 6865 6d61 732e 616e 6472 6f69 642e 636f 6d2f 6170 6b2f 7265 732f 616e 6472 6f69 6400 0000 0005 0573 7479 6c65 000c 0c4c 696e 6561 724c 6179 6f75 7400 3636 4073
21. How the LayoutInflater works • Plain XML into binary XML • Generates the R.java file.
23. How the LayoutInflater works • Plain XML into binary XML • Generates the R.java file. • LayoutInflater.inflate()
25. How the LayoutInflater works • Plain XML into binary XML • Generates the R.java file. • LayoutInflater.inflate() • LayoutInflater.createView()
27. How the LayoutInflater works • Plain XML into binary XML • Generates the R.java file. • LayoutInflater.inflate() • LayoutInflater.createView() • R.java used to read attribute value
29. Proteus ~ LayoutInflater
30. Capabilities • Build views and compose layouts.
31. layout_below layout_toEndOf layout_toLeftOf layout_toRightOf layout_toStartOf layout_alignParentBottom layout_alignParentEnd layout_alignParentLeft layout_alignParentRight layout_alignParentStart layout_alignParentTop layout_centerHorizontal layout_centerInParent layout_centerVertical contentDescription clickable minHeight minWidth elevation alpha visibility invisibility id tag layout_above layout_alignBaseline layout_alignBottom layout_alignEnd layout_alignLeft layout_alignRight layout_alignStart layout_alignTop layout_weight layout_width background layout_height layout_gravity gravity padding paddingLeft paddingTop paddingRight paddingBottom layout_margin layout_marginLeft layout_marginTop layout_marginRight layout_marginBottom Out of the box onClick border transitionName animation requiresFadingEdge fadingEdgeLength textAlignment type dataContext children enabled style View ViewGroup RelativeLayout LinearLayout FrameLayout ScrollView HorizontalScrollView ImageView TextView EditText Button ImageButton ViewPager WebView RatingBar CheckBox ProgressBar HorizontalProgressBar
32. Capabilities • Build Views and compose Layouts. • Runtime Data Bindings and Formatters.
34. Capabilities • Build Views and compose Layouts. • Runtime Data Bindings and Formatters. • Styles, reusable attributes-values.
36. Capabilities • Build Views and compose Layouts. • Runtime Data Bindings and Formatters. • Styles, reusable attributes-values. • Describe Shapes and Animations.
37. Out of the box 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
38. Capabilities • Build Views and compose Layouts. • Runtime Data Bindings and Formatters. • Describe Shapes and Animations. • Styles, reusable attributes-values. • Custom Views and Attributes can be plugged in.
39. Capabilities • Build Views and compose Layouts. • Runtime Data Bindings and Formatters. • Describe Shapes and Animations. • Styles, reusable attributes-values. • Custom Views and Attributes. • Fallbacks and fail-safes are built into the library.
40. Advantages • Zero adoption time • Update UI even in older apps • UI changes by a designers • A/B testing of different layouts • Reduce App size • Reduce dev effort
41. What we did • Number of releases avoided: ~4 • Months of development saved. • Number of A/B tests: ~9 • Near Native performance. • Weeks of adoption saved.
42. Roadmap • Faster • Layout and Data as interfaces • Studio Integration • Server Specs
43. There are others out there, kind of • 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/
44. It’s open !! https://github.com/flipkart-incubator/proteus Looking forward to your contributions
45. Questions ?
47. Android Open Source Software • Chat heads https://github.com/flipkart-incubator/springy-heads • Contact image grouping https://github.com/flipkart-incubator/circular-image • Batching analytics events https://github.com/flipkart-incubator/batchman • Network stats https://github.com/flipkart-incubator/okhttp-stats • Proteus https://github.com/flipkart-incubator/proteus