Resources and RelativeLayouts

1. Resources and RelativeLayouts

2. Resources

3. Android Resources We’ve already talked about the different types of Android Resources

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

5. Using Resources in Code • How to I access the string is 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

6. R subclasses publicfinalclass R { publicstaticfinalclassdimen { publicstaticfinalintactivity_horizontal_margin=0x7f040000; publicstaticfinalintactivity_vertical_margin=0x7f040001; } publicstaticfinalclassdrawable { publicstaticfinalintic_launcher=0x7f020000; } publicstaticfinalclass id { publicstaticfinalintaction_settings=0x7f080006; publicstaticfinalintcanvas=0x7f080004; } publicstaticfinalclass layout { publicstaticfinalintactivity_main=0x7f030000; publicstaticfinalinttest=0x7f030001; } publicstaticfinalclass menu { publicstaticfinalintmain=0x7f070000; } publicstaticfinalclass string { publicstaticfinalintaction_settings=0x7f050001; publicstaticfinalinthello_world=0x7f050002; publicstaticfinalintred=0x7f050005; } } Dimen subclass for all dimensions Drawble subclass for all images ID subclass for all ids specified in layout

7. What does the static keyword mean? publicfinalclass R { publicstaticfinalclassdimen { publicstaticfinalintactivity_horizontal_margin=0x7f040000; publicstaticfinalintactivity_vertical_margin=0x7f040001; } publicstaticfinalclassdrawable { publicstaticfinalintic_launcher=0x7f020000; } publicstaticfinalclass id { publicstaticfinalintaction_settings=0x7f080006; publicstaticfinalintcanvas=0x7f080004; } publicstaticfinalclass layout { publicstaticfinalintactivity_main=0x7f030000; publicstaticfinalinttest=0x7f030001; } publicstaticfinalclass menu { publicstaticfinalintmain=0x7f070000; } publicstaticfinalclass string { publicstaticfinalintaction_settings=0x7f050001; publicstaticfinalinthello_world=0x7f050002; publicstaticfinalintred=0x7f050005; } }

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

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

10. The R file only contains integers publicfinalclass R { publicstaticfinalclassdimen { publicstaticfinalintactivity_horizontal_margin=0x7f040000; publicstaticfinalintactivity_vertical_margin=0x7f040001; } publicstaticfinalclassdrawable { publicstaticfinalintic_launcher=0x7f020000; } publicstaticfinalclass id { publicstaticfinalintaction_settings=0x7f080006; publicstaticfinalintcanvas=0x7f080004; } publicstaticfinalclass layout { publicstaticfinalintactivity_main=0x7f030000; publicstaticfinalinttest=0x7f030001; } publicstaticfinalclass menu { publicstaticfinalintmain=0x7f070000; } publicstaticfinalclass string { publicstaticfinalintaction_settings=0x7f050001; publicstaticfinalinthello_world=0x7f050002; publicstaticfinalintred=0x7f050005; } }

11. The R file only contains integers • The R classby 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

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

13. Using the ResourcesObject • 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.

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

15. 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 intblueColor = res.getColor(R.color.blue);

16. 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);

17. RelativeLayout

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

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

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

21. RelativeLayout Layout Parameters

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

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

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

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

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

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

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

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

30. Using existing ids <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout>

31. Creating an id for layout params <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout>

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

33. Controlling Size with Relative Layout <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout> How to make the View @id/left’s right edge extend to View @id/right?

34. RelativeLayout Layout Parameters

35. Controlling Size with RelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout>

36. How to make a new View’s left edge match @id/left and right’s edge match @id/right? <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout>

37. How to make a new View’s left edge match @id/left and right’s edge match @id/right? <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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" /> </RelativeLayout>

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

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