how to become the macgyver of android custom views
TRANSCRIPT
![Page 1: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/1.jpg)
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
![Page 2: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/2.jpg)
Who I am…
Software engineer!GDG Barcelona organizer
Android lover!Geek
![Page 3: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/3.jpg)
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.
![Page 4: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/4.jpg)
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
![Page 5: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/5.jpg)
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
![Page 6: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/6.jpg)
View.onAttachedToWindow()
View.onDetachedFromWindow()
View added
Animate View
View.onMeasure()
View.onLayout()
View.onDraw()
View removed
Rendering loop
View lifecycle
![Page 7: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/7.jpg)
Many reasons to go custom:!!
Performance!!
Flexibility!!
Innovation!!
Reusability
To remember: there is no custom view composition :(
Views: going custom…
![Page 8: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/8.jpg)
Views: going custom…
![Page 9: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/9.jpg)
Measuring!!
Layouting!!
Drawing!!
Saving state!!
Handling events
View responsibilities
![Page 10: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/10.jpg)
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
![Page 11: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/11.jpg)
It tells Android how big you want your custom view to be, taking into consideration the layout constraints provided by the parent.
onMeasure()
![Page 12: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/12.jpg)
Called from layout when the view should assign a size and position to each of its children. Used frequently when extending ViewGroup.
onLayout()
![Page 13: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/13.jpg)
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()
![Page 14: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/14.jpg)
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()
![Page 15: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/15.jpg)
There are 3 different ways:!!
Compound Views!!
Custom Compound Views!!
Flat Custom Views
Implementing custom views
![Page 16: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/16.jpg)
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
![Page 17: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/17.jpg)
Compound views
![Page 18: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/18.jpg)
Compound views
![Page 19: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/19.jpg)
Is a compound view which overrides onMeasure(), onLayout() and extends ViewGroup.
Custom compound views
![Page 20: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/20.jpg)
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
![Page 21: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/21.jpg)
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
![Page 22: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/22.jpg)
To use custom attributes already defined, in your layout file you have to declare them in the XML header as following:
Using custom attributes
![Page 23: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/23.jpg)
Reading custom attributes in code
![Page 24: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/24.jpg)
We implement onTouchEvent() to handle touch screen motion events.
Making our view to react…
![Page 25: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/25.jpg)
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
![Page 26: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/26.jpg)
The View class supports the creation of an image of its current display.
Creating screenshots of views
![Page 27: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/27.jpg)
Enabling “show layout bounds” options on the developer options screen.
Real world examples
![Page 28: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/28.jpg)
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
![Page 29: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/29.jpg)
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
![Page 30: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/30.jpg)
Questions?
![Page 31: How to Become the MacGyver of Android Custom Views](https://reader034.vdocuments.site/reader034/viewer/2022042602/55d115c4bb61eb453b8b4587/html5/thumbnails/31.jpg)
Thanks!!!
@fernando_cejas!http://www.android10.org/!http://github.com/android10
Java Developers never RIP, they just get GARBAGE
COLLECTED…