Proteus: Android Layout Engine

Proteus: Android Layout Engine

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

91f19c1a5a71b57cb2453e03484ae283?s=128

Aditya Sharat

October 25, 2016
Tweet

Transcript

  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!
  5. None
  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
  9. None
  10. Ad Ad

  11. None
  12. None
  13. Demo

  14. None
  15. Native View

  16. None
  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.
  22. None
  23. How the LayoutInflater works • Plain XML into binary XML

    • Generates the R.java file. • LayoutInflater.inflate()
  24. None
  25. How the LayoutInflater works • Plain XML into binary XML

    • Generates the R.java file. • LayoutInflater.inflate() • LayoutInflater.createView()
  26. None
  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
  28. None
  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.
  33. None
  34. Capabilities • Build Views and compose Layouts. • Runtime Data

    Bindings and Formatters. • Styles, reusable attributes-values.
  35. None
  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 ?

  46. None
  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