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.

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!
Geek

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 get GARBAGE
COLLECTED…