1. Android View Stuff

2. TextViews Display text Display images???

3. TextView Drawables TextViews allow drawables to appear to the left of, above, to the right of, and below the text.

4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_launcher" android:text="Drawable Left" android:layout_margin="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_launcher" android:text="Drawable Top" android:layout_margin="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/ic_launcher" android:text="Drawable Right" android:layout_margin="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableBottom="@drawable/ic_launcher" android:text="Drawable Bottom" android:layout_margin="10dp"/>

5. ImageView Use this View when you want to display an image in your application. Many beginners will misuse the ImageView by using the incorrect property.

6. ImageView src property Use the android:src property to set a drawable as the content of the ImageView. Don’t use android:background unless you want the image to have a background img.

7. ImageView Example <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher"/>

8. ImageView Example with a background <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#FFFF0000"/>

9. ImageView scaleType Control how your image is scaled and positioned inside the ImageView – Useful when your image is too big – Useful when your image is too small

10. ImageView scaleType : center Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

11. ImageView scaleType : centerCrop Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

12. ImageView scaleType : centerInside Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

13. ImageView scaleType : fitCenter Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

14. ImageView scaleType : fitStart Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

15. ImageView scaleType : fitEnd Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

16. ImageView scaleType : fitXY Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

17. ImageView scaleType : matrix Scale TypeDescription centerDisplays the image centered in the view with no scaling. centerCropScales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view. centerInsideScales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. fitCenterScales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. fitStartSame as fitCenter but aligned to the top left of the view. fitEndSame as fitCenter but aligned to the bottom right of the view. fitXYScales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrixScales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

18. ImageView ScaleType Info http://www.peachpit.com/articles/article.aspx ?p=1846580&seqNum=2 http://www.peachpit.com/articles/article.aspx ?p=1846580&seqNum=2

19. ImageButton We’re familiar with a Button – Default background provided by the platform – Displays Text Well Android supports an ImageButton – Looks like a regular button – Default background provided by the platform – Displays an Image

20. Why Buttons are awesome Android provides a method for giving a button a state list that defines which images should be shown while the button is: – Normal – Focused – Enabled – Disabled – Pressed

21. Hiding the default background on an ImageButton If you want to use an ImageButton but don’t want to see the default background, you can hide it. – Set the android:background=“#00000000” – Set the android:background=“@android:color/transparent

22. ShapeDrawables An XML file that defines a geometric shape, including colors and gradients. Creates a ShapeDrawable.ShapeDrawable

23. shapecornersgradientpaddingsizesolidstroke

24. ShapeDrawable Examples

26. OnTouchListener Interface definition for a callback to be invoked when a touch event is dispatched to this view. The callback will be invoked before the touch event is given to the view.

27. Using OnTouchListener Creating an OnTouchListener is exactly like creating an OnClick Listener. – The View provides a setOnTouchListener() You can create the listener using any of the 3 methods 1.Anonymous Inner Class Listener 2.Create an OnTouchListener object 3.Make the class implement the OnTouchListener interface.

28. onTouch callback

29. MotionEvent Object Object used to report movement (mouse, pen, finger, trackball) events. Motion events may hold either absolute or relative movements and other data, depending on the type of device.

30. Important parts of the MotionEvent Action - What kind of action is being performed with the MotionEvent? X - The x coordinate for this event Y - The y coordinate for this event

31. MotionEvent’s action ACTION_DOWN - A pressed gesture has started, the motion contains the initial starting location. ACTION_MOVE - A change has happened during a press gesture (between ACTION_DOWN and ACTION_UP).ACTION_DOWNACTION_UP ACTION_UP - A pressed gesture has finished, the motion contains the final release location as well as any intermediate points since the last down or move event. ACTION_CANCEL - The current gesture has been aborted.

32. MotionEvent’s X Coordinate getX() - Returns the X coordinate of this event for the first index. – This coordinate is relative to the View getRawX() - Returns the original raw X coordinate of this event. – For touch events on the screen, this is the original location of the event on the screen, before it had been adjusted for the containing window and views.

33. MotionEvent’s Y Coordinate getY() - Returns the Y coordinate of this event for the first index. – This coordinate is relative to the View getRawY() - Returns the original raw Y coordinate of this event. – For touch events on the screen, this is the original location of the event on the screen, before it had been adjusted for the containing window and views.

34. How to handle a touch event @Override public boolean onTouch(View v, MotionEvent event) { int action = event.getAction(); final int x = (int) event.getX(); final int y = (int) event.getY(); switch (action) { case MotionEvent.ACTION_DOWN : //notify the view a down event has happened. This is the //mechanism that triggers the beginning of a click and long press. break; case MotionEvent.ACTION_MOVE : //notify the view a move event has happened. This could //be used to scroll a view. break; case MotionEvent.ACTION_UP : case MotionEvent.ACTION_CANCEL : //notify the view the touch event has ended //usually you'll process the up and the cancel as if they //were the same event. break; } //return true if the view consumed the event and false if not //so one of this view's parent can receive the touch event and //process. return true; }