1. Resources

2. Android Resources We’ve already talked about the different types of Android Resources DirectoryResource Type anim/XML files that define tween animations. color/XML files that define a state list of colors. drawable/Bitmap files (.png,.9.png,.jpg,.gif) or XML files that are compiled into drawable resources layout/XML files that define a user interface layout. menu/XML files that define application menus, such as an Options Menu, Context Menu, or Sub Menu. values/XML files that contain simple values, such as strings, integers, and colors. xml/Arbitrary XML files that can be read at runtime.

3. Using Resources in XML Three Important Pieces – @ – resource_type – resource_name/id These Three pieces create a path to a resource – @string/app_name

4. Using Resources in Code How do I access the string in code? – @string/app_name??? In code, you gain access to the resources via the R class For each type of resource, there is an R subclass

5. R subclasses public final class R { public static final class dimen { public static final int activity_horizontal_margin=0x7f040000; public static final int activity_vertical_margin=0x7f040001; } public static final class drawable { public static final int ic_launcher=0x7f020000; } public static final class id { public static final int action_settings=0x7f080006; public static final int canvas=0x7f080004; } public static final class layout { public static final int activity_main=0x7f030000; public static final int test=0x7f030001; } public static final class menu { public static final int main=0x7f070000; } public static final class string { public static final int action_settings=0x7f050001; public static final int hello_world=0x7f050002; public static final int red=0x7f050005; } Dimen subclass for all dimensions Drawble subclass for all images ID subclass for all ids specified in layout

6. What does the static keyword mean? public final class R { public static final class dimen { public static final int activity_horizontal_margin=0x7f040000; public static final int activity_vertical_margin=0x7f040001; } public static final class drawable { public static final int ic_launcher=0x7f020000; } public static final class id { public static final int action_settings=0x7f080006; public static final int canvas=0x7f080004; } public static final class layout { public static final int activity_main=0x7f030000; public static final int test=0x7f030001; } public static final class menu { public static final int main=0x7f070000; } public static final class string { public static final int action_settings=0x7f050001; public static final int hello_world=0x7f050002; public static final int red=0x7f050005; }

7. Static Keyword Static variables are associated with the class, rather than with any object. Every instance of the class shares a class variable. Since static variables are associated with the class, we don’t need an instance of the object to access the static vars.

8. Static Keyword To access static variables all you need to know is the class name. If the static variable is public, you can easily get the variable.

9. The R file only contains integers public final class R { public static final class dimen { public static final int activity_horizontal_margin=0x7f040000; public static final int activity_vertical_margin=0x7f040001; } public static final class drawable { public static final int ic_launcher=0x7f020000; } public static final class id { public static final int action_settings=0x7f080006; public static final int canvas=0x7f080004; } public static final class layout { public static final int activity_main=0x7f030000; public static final int test=0x7f030001; } public static final class menu { public static final int main=0x7f070000; } public static final class string { public static final int action_settings=0x7f050001; public static final int hello_world=0x7f050002; public static final int red=0x7f050005; }

10. The R file only contains integers The R class by itself won’t get you the resource you want. Instead you’ll have to – use methods which take resource ids to get the resource you’re interested in. – Use the Resources Object to obtain the real resource

11. Common methods that take Resource Ids 1.findViewById() 2.TextView.setText() – This method has two signatures, one for a String and another for Resource Id 3.View.setBackgroundResource()

12. Using the Resources Object The Activity provides a method getResources(). getResources() returns an instance of the Resources class that is specific to your application. That means you only have access to your resources not resources in another application.

13. Resources Class The Resources class provides getter methods to retrieve any type of resource available to your app. – String – String Array – Integer – Integer Array – Color – Drawable – Dimension – Animation – Etc.

14. How to get a color value from resources //getResources() is a method provided by the Activity Resources res = getResources(); //res.getColor(id) takes a resource identifier and returns a color or 0 if id not found //We must use the R class to access the color subclass to access the identifier for the color blue int blueColor = res.getColor(R.color.blue);

15. How to get a string value from resources //getResources() is a method provided by the Activity Resources res = getResources(); //res.getString(id) takes a resource identifier and returns a string or throw an exception if the id not found //We must use the R class to access the string subclass to access the identifier for the string app_name String appName = res.getString(R.string.app_name);

16. RelativeLayout

17. About RelativeLayout RelativeLayout is a view group that displays child views in relative positions.

18. About RelativeLayout The position of each child view can be specified as relative to other sibling elements (such as to the left-of or below another view) or in positions relative to the parent area (such as aligned to the bottom, left of center). layout_alignParentTop layout_below layout_alignParentLeft layout_below layout_alignParentRight

19. About RelativeLayout By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties.

20. RelativeLayout Layout Parameters

21. About RelativeLayout Unless you specify a vertical position/alignment, a child view will match the top of its parent. Unless you specify a horizontal position/alignment, a child view will match the left of its parent.

22. Can we simplify the layout params used? layout_alignParentTop layout_below layout_alignParentLeft layout_below layout_alignParentRight

23. Can we simplify the layout params used? layout_below layout_alignParentRight

24. How do we make the bottom views pushed down to the bottom of their parent? layout_below layout_alignParentRight

25. How do we make the bottom views pushed down to the bottom of their parent? layout_alignParentBottom layout_alignParentRight

26. Using RelativeLayoutParams Some layout parameters take true or false as values and others take View ids.

27. RelativeLayout Layout Params Layout params that use true or false – All layout parameters that have the word parent – layout_centerHorizontal – layout_centerVertical

28. RelativeLayout Layout Params Layout params that use View ids – Need to reference an existing id or create one for a view that will be defined later in the layout. – Even if you aren’t planning on using an ID in code for finding a View. You still need it for RelativeLayout to layout views correctly.

29. Using existing ids <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="150dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" /> <View android:id="@+id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" />

30. Creating an id for layout params <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="150dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_toLeftOf="@+id/right" android:layout_alignParentLeft="true" android:layout_marginRight="5dp" /> <View android:id="@id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" />

31. Controlling Dimension of View with RelativeLayout params With the available options, you can not only position views in relationship to other views, but you can also size views.

32. Controlling Size with Relative Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="75dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentLeft="true" android:layout_marginRight="5dp" /> <View android:id="@+id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" /> How to make the View @id/left’s right edge extend to View @id/right?

33. RelativeLayout Layout Parameters

34. Controlling Size with RelativeLayout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="75dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/right" android:layout_marginRight="5dp" /> <View android:id="@id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" />

35. How to make a new View’s left edge match @id/left and right’s edge match @id/right? <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="75dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/right" android:layout_marginRight="5dp" /> <View android:id="@id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" />

36. How to make a new View’s left edge match @id/left and right’s edge match @id/right? <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" > <View android:id="@+id/top" android:layout_width="match_parent" android:layout_height="200dp" android:background="#F00" android:layout_marginBottom="5dp" /> <View android:id="@+id/left" android:layout_width="75dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/right" android:layout_marginRight="5dp" /> <View android:id="@id/right" android:layout_width="100dp" android:layout_height="75dp" android:background="#000" android:layout_below="@id/top" android:layout_alignParentRight="true" /> <View android:layout_width="0dp" android:layout_height="75dp" android:layout_marginTop="5dp" android:background="#000" android:layout_below="@id/left" android:layout_alignLeft="@id/left" android:layout_alignRight="@id/right" />

37. The Power of RelativeLayouts With all the different layout parameters, one can see why RelativeLayout is super powerful.

38. The Power of RelativeLayouts Many novice Android Devs will over use LinearLayouts by having several nested inside each other to accomplish a task that is done much easier with RelativeLayout. Good Android Devs will use the minimum numbers of Views required to accomplish a layout.

39. Android View Stuff

40. TextViews Display text Display images???

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

42. <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"/>

43. setError() Method available to TextView and EditText to display an error message to the user. This is very useful for user input validation.

44. 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.

45. 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.

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

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

48. 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

49. 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.

50. 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.

51. 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.

52. 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.

53. 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.

54. 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.

55. 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.

56. 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.

57. 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

58. Android:tint ImageView’s have an attribute that allows the source image of the view to be tinted by a color.

59. 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

60. 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

61. 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

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

63. shapecornersgradientpaddingsizesolidstroke

64. ShapeDrawable Examples

66. What is a 9-Patch An Image that has the capability to specify stretchable regions.

67. Use Case for 9-Patch

68. More Info on 9-Patch Android 9 Patch Tool A Simple guide to 9-patch for Android UI