Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Become the MacGyver of Android Custom Views

How to Become the MacGyver of Android Custom Views

MacGyver is part Indiana Jones, part Sherlock Holmes.

He can turn a bicycle frame into a blowtorch, disarm a bomb with a hockey ticket, create a time machine with some duct tape and a paper clip or CREATE A CUSTOM VIEW IN ANDROID.

In this talk we will walk through the Android UI framework and learn how to push it to the next level by learning how views work and how to build custom ones that will let us create innovative a UIs.


Fernando Cejas

October 02, 2014


  1. How to become the MacGyver of android custom views Angus

    MacGyver: The man that can kill someone with a paperclip @fernando_cejas! http://www.android10.org/! http://github.com/android10
  2. Who I am… Software engineer! GDG Barcelona organizer Android lover!

  3. How android draws view hierarchy Drawing begins with the root

    node of the layout.! ! The layout hierarchy is traversed in the order of declaration.! ! Parents are drawn before their children and children are drawn in the order of declaration.
  4. Drawing the layout is a three pass process:! Measure! Layout!

    Draw In terms of methods in View class:! requestLayout(): measure + layout! invalidate(): draw How android draws view hierarchy
  5. View! 19.572 lines ImageView! 1.260 lines TextView! 9.220 lines ViewGroup!

    6.771 lines Button! 121 lines LinearLayout! 1.898 lines RelativeLayout! 1.812 lines …! … lines View framework
  6. View.onAttachedToWindow() View.onDetachedFromWindow() View added Animate View View.onMeasure() View.onLayout() View.onDraw() View

    removed Rendering loop View lifecycle
  7. Many reasons to go custom:! ! Performance! ! Flexibility! !

    Innovation! ! Reusability To remember: there is no custom view composition :( Views: going custom…
  8. Views: going custom…

  9. Measuring! ! Layouting! ! Drawing! ! Saving state! ! Handling

    events View responsibilities
  10. Encapsulates the layout requirements passed from parent to child.! !

    Represents a requirement for either the width or the height. ! ! Is comprised of a size and a mode. There are 3 possible modes:! UNSPECIFIED ! EXACTLY ! AT_MOST MeasureSpec
  11. It tells Android how big you want your custom view

    to be, taking into consideration the layout constraints provided by the parent. onMeasure()
  12. Called from layout when the view should assign a size

    and position to each of its children. Used frequently when extending ViewGroup. onLayout()
  13. Called by Android when the view needs to draw itself.

    Here is the place for the logic related with drawing the different components or content of our view. onDraw()
  14. You need to request a new layout if a property

    changes that might affect the size or shape of the view. You have to invalidate the view after any change to its properties that might change its appearance. requestLayout() invalidate()
  15. There are 3 different ways:! ! Compound Views! ! Custom

    Compound Views! ! Flat Custom Views Implementing custom views
  16. These are usually our starting point.! ! Perform pretty well

    in many situations.! ! Simple to implement. 1. Subclass one of the built-in layouts.! 2. Inflate a merge layout in the constructor.! 3. Initialize members to point to inner views with findViewById().! 4. Add your own APIs to query and update the view state. Compound views
  17. Compound views

  18. Compound views

  19. Is a compound view which overrides onMeasure(), onLayout() and extends

    ViewGroup. Custom compound views
  20. It is a fully custom view that measures, arranges, and

    draws all its elements. Extends from View. https://github.com/android10/Android-DonutViews Flat custom views
  21. To define additional attributes it is a must to create

    an attrs.xml file in your res/values folder and define them like the following example: Declaring custom attributes
  22. To use custom attributes already defined, in your layout file

    you have to declare them in the XML header as following: Using custom attributes
  23. Reading custom attributes in code

  24. We implement onTouchEvent() to handle touch screen motion events. Making

    our view to react…
  25. For persisting view state you want to have a look

    at View.BasedSavedState class. The canvas API allows to create complex graphical effects: Canvas, Paint and Shader classes will help with this. Saving view state Custom and advance drawing
  26. The View class supports the creation of an image of

    its current display. Creating screenshots of views
  27. Enabling “show layout bounds” options on the developer options screen.

    Real world examples
  28. Avoid custom views if they are not extremely necessary.! Creating

    objects ahead of time is an important optimisation. ! Initialise your stuff in OnAttachToWindow() method when possible.! If you do not need complex measurement just use onSizeChanged() method.! If you define own views, ensure you review the ViewConfiguration class.! When using custom attributes always recycle your TypedArray. Tips and tricks
  29. The more custom, the less features for free.! ! Avoid

    premature optimisation.! ! Go custom only on core components.! ! Start with stock widgets and compound views.! ! Do not reinvent the wheel. Wrapping up
  30. Questions?

  31. Thanks!!! @fernando_cejas! http://www.android10.org/! http://github.com/android10 Java Developers never RIP, they just