Android Custom
Views
Christoforos Nalmpantis
Why custom views
1. Unique UX.
2. Optimised performance.
3. Code reusability.
View state diagram
Attachment
/Dettachme
nt

Traversals

State
save/restor
e
Attachment/Detachment
o
nAttached
ToWindow
()

● Perform any relevant state resets
● Start listening for state changes

● ...
Traversals
onMe
asure()

onLa
yout()

Animate

onDr
aw()

invalidate()
requestLayout()
● Animation events will always happ...
State save/recover
public class CustomView extends View {
private int stateToSave;
...

static class SavedState extends Ba...
Creating a new view
●
●
●
●
●

Subclass View or ViewGroup.
○ Use SurfaceView in case of 3D graphics.
Define custom attribu...
Traversals are expensive
FrameLayout

LinearLayout

TextView

ImageView

TextView

When a view calls requestLayout()
or in...
Traversals are expensive
FrameLayout

LinearLayout

TextView

ImageView

TextView

onMeasure(), onLayout() and
onDraw() ar...
Tips & tricks
●

●

●
●

onMeasure()
○
Determines a size for the view and its children.
○
Must call setMeasuredDimension()...
Coffee time!

Thank you for your patience...
Sources
1.
2.
3.
4.
5.

Writing custom views for android google io 2013 http://commondatastorage.googleapis.com/io-2013/pr...
Upcoming SlideShare
Loading in …5
×

Android custom views

1,853 views

Published on

A short presentation describing why and how to create custom views in Android, and providing tips and tricks.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,853
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
31
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Android custom views

  1. 1. Android Custom Views Christoforos Nalmpantis
  2. 2. Why custom views 1. Unique UX. 2. Optimised performance. 3. Code reusability.
  3. 3. View state diagram Attachment /Dettachme nt Traversals State save/restor e
  4. 4. Attachment/Detachment o nAttached ToWindow () ● Perform any relevant state resets ● Start listening for state changes ● Remove any posted Runnables ● Stop listening for data changes ● Clean up resources ■ Bitmaps ■ Threads onDetachedFrom Window()
  5. 5. Traversals onMe asure() onLa yout() Animate onDr aw() invalidate() requestLayout() ● Animation events will always happen before measure ● A required measure will always happen before layout ● A required layout will always happen before draw
  6. 6. State save/recover public class CustomView extends View { private int stateToSave; ... static class SavedState extends BaseSavedState { int stateToSave; SavedState(Parcelable superState) { super(superState); @Override public Parcelable onSaveInstanceState() } { Parcelable superState = super.onSaveInstanceState(); SavedState ss = new SavedState(superState); ss.stateToSave = this.stateToSave; return ss; private SavedState(Parcel in) { super(in); this.stateToSave = in.readInt(); } } @Override public void writeToParcel(Parcel out, int flags) { @Override super.writeToParcel(out, flags); public void onRestoreInstanceState(Parcelable state) { out.writeInt(this.stateToSave); } if(!(state instanceof SavedState)) { super.onRestoreInstanceState(state); return; public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() { } public SavedState createFromParcel(Parcel in) { return new SavedState(in); SavedState ss = (SavedState)state; super.onRestoreInstanceState(ss.getSuperState()); this.stateToSave = ss.stateToSave; } public SavedState[] newArray(int size) { return new SavedState[size]; } } }; } }
  7. 7. Creating a new view ● ● ● ● ● Subclass View or ViewGroup. ○ Use SurfaceView in case of 3D graphics. Define custom attributes. ○ Use <declare-styleable> resource element. Apply custom attributes. ○ Use AttributeSet as an argument of the constructor and pass it to obtainStyledAttributes(). Add properties and events. ○ At this step usually we call invalidate() and requestLayout(). Override traversal methods. ○ Override onMeasure(), onLayout(), onDraw().
  8. 8. Traversals are expensive FrameLayout LinearLayout TextView ImageView TextView When a view calls requestLayout() or invalidate() its parent and all its parents’ parents call it, until the root parent.
  9. 9. Traversals are expensive FrameLayout LinearLayout TextView ImageView TextView onMeasure(), onLayout() and onDraw() are called for all the children of its view.
  10. 10. Tips & tricks ● ● ● ● onMeasure() ○ Determines a size for the view and its children. ○ Must call setMeasuredDimension() before returning, otherwise an IllegalStateException exception will be thrown.. onLayout() ○ Use getMeasuredWidth()/getMeasuredHeight(). ○ getWidth()/getHeight() become valid on a view after layout() returns. Use invalidate(int, int, int, int) to avoid drawing areas that will remain the same. onDraw() ○ Draws the content, e.g. text in TextView. ○ The background is drawn before onDraw(). ○ Skipped if setWillNotDraw(true) is set (default in ViewGroup). ○ Use hardware rendering (Android 3.0 +) which calles draw() only on the invalidate() source view and not its parents.
  11. 11. Coffee time! Thank you for your patience...
  12. 12. Sources 1. 2. 3. 4. 5. Writing custom views for android google io 2013 http://commondatastorage.googleapis.com/io-2013/presentations/109% 20-%20Custom%20Views%20in%20Android.pdf http://developer.android.com/reference/android/view/View.html Crafting Custom Android Views (en) - DroidCon Paris 2013 http://www.youtube.com/watch?v=YIArVywQe8k http://stackoverflow.com/questions/3542333/how-to-prevent-custom-views-from-losing-state-across-screen-orientationchanges/3542895#3542895 http://rajeshvijayakumar.blogspot.co.uk/2013/01/custom-view-example-in-android.html

×