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.

Transcript

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
   

   View Slide

2. Who I am…
   Software engineer!
   GDG Barcelona organizer
   Android lover!
   Geek
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. View.onAttachedToWindow()
   View.onDetachedFromWindow()
   View added
   Animate View
   View.onMeasure()
   View.onLayout()
   View.onDraw()
   View removed
   Rendering
   loop
   View lifecycle
   

   View Slide

7. Many reasons to go custom:!
   !
   Performance!
   !
   Flexibility!
   !
   Innovation!
   !
   Reusability
   To remember: there is no custom view composition :(
   Views: going custom…
   

   View Slide

8. Views: going custom…
   

   View Slide

9. Measuring!
   !
   Layouting!
   !
   Drawing!
   !
   Saving state!
   !
   Handling events
   View responsibilities
   

   View Slide

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
    

    View Slide

11. It tells Android how big you want your custom view
    to be, taking into consideration the layout
    constraints provided by the parent.
    onMeasure()
    

    View Slide

12. Called from layout when the view should assign a
    size and position to each of its children. Used
    frequently when extending ViewGroup.
    onLayout()
    

    View Slide

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()
    

    View Slide

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()
    

    View Slide

15. There are 3 different ways:!
    !
    Compound Views!
    !
    Custom Compound Views!
    !
    Flat Custom Views
    Implementing custom views
    

    View Slide

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
    

    View Slide

17. Compound views
    

    View Slide

18. Compound views
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Reading custom attributes in code
    

    View Slide

24. We implement onTouchEvent() to handle touch
    screen motion events.
    Making our view to react…
    

    View Slide

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
    

    View Slide

26. The View class supports the creation of an
    image of its current display.
    Creating screenshots of views
    

    View Slide

27. Enabling “show layout bounds” options on the
    developer options screen.
    Real world examples
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Questions?
    

    View Slide

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

    View Slide