Custom Views in Android.

A brief presentation on working with custom views in Android.

Related Git Repo:
https://github.com/mipreamble/SampleCustomView

Transcript

1. 2013.10.05 @ Hyderabad
2. Custom Views In Android. (Imran Mohammed)
3. • Stand out • Drawing • Animate • Performance • Total control Why? 1
4. 2 Existing Views: •ImageView •ListView •TextView •TextClock •AnalogClock •... Custom Views: •Rounded Image •Event on a certain area of the view What?
5. O (0, 0) DisplayMetrics: widthPixels heightPixels + + - - - - - - Co-Ordinate Geometry Trigonometry Kinematics Projectiles Matrices 3
6. • How? • View lifecycle • Measure • Draw • Touch events • Listeners • Demo Agenda 4
7. • extends View • @Override methods as required CustomView extends View { /** Constructors abstract **/ onDraw(Canvas canvas) {} } View JAVA How? 5
8. public class CustomView extends View { /** Create **/ public CustomView(Context context) { super(context); } // More Constructors. onFinishInflate(){} /** Attachment **/ onAttachedToWindow() {} onDetachedFromWindow() {} /** Drawing - draw anything**/ onDraw(Canvas canvas) {} /** Layout Measure and size changes.**/ onMeasure(int widthMeasureSpec, int heightMeasureSpec) {} onLayout(boolean changed, int left, int top, int right, int bottom) {} onSizeChanged(int w, int h, int oldw, int oldh) {} /** Touch Event **/ onTouchEvent(MotionEvent event) {} } JAVA @Override 6
9. View lifecycle Attach Measure Layout Draw Detach alloc start threads dealloc stop threads 7
10. onMeasure() • Determine the size of the view • MeasureSpec.EXACTLY (=) • android:layout_width=”120dp” (or match_parent) • MeasureSpec.AT_MOST (<=) • android:layout_width=”wrap_content” • MeasureSpec.UNSPECIFIED (>) • ListView call setMeasureDimension(int,int) 8
11. onDraw() • Draw anything you want. • Bitmap, Shape, Path, Text, Drawable... onDraw(Canvas canvas) { canvas.drawBitmap(mBitmap, mBitmapLeft, mBitmapTop, mPaint); drawable.setBounds(left, top, right, bottom); drawable.draw(canvas); } 9
12. onTouch() • Actions on touch. • move, change color, change background ... public boolean onTouchEvent(MotionEvent event) { float x, y; switch (event.getAction()){ case MotionEvent.ACTION_UP: x = event.getX(); y = event.getY(); if(x >= left && x <= left + width){ if(y >= top && y<= top + height){ setBackgroundColor(mColors[mColorPosition]); if(mColorChangedListener != null) mColorChangedListener.onColorChanged(mColorSet[mColorPosition]); mColorPosition++; if(mColorPosition == mColors.length)mColorPosition = 0; invalidate(); } } break; } return true;} 10
13. listeners • Do something when event happens. 11 private OnColorChangeListener mOnColorChangeListener; public static interface OnColorChangeListener { public void onColorChanged(String color); } public void setOnColorChangedListener(OnColorChangeListener listener){ this.mColorChangedListener = listener; } • Define an Interface. • Create an instance in the View class. • Call the method when the event occurs. Touch, Click or Focus. • Implement and set the listener in any class. • Check the code for more detail implementation.
14. demo() 12 Demo on Github More views coming on Github.. Keep watch on the repo. Any specific requirement.. Email me.
15. Any Questions? public void askQuestion(boolean secretQuestion, boolean feelingShy ) { if(feelingShy && !secretQuestion){ postQuestionOnTwitter ( “@mipreamble”, “#gdg”); return; } else if(feelingShy && secretQuestion{ emailQuestion (“imohammed23@gmail.com”); return; } askNow (); // Not relevant anymore. Shoot an email. } 14
16. Imran Mohammed Android Developer @ Agiliq Info Solutions @mipreamble imohammed23@gmail.com < Thank you >