Android 4: A Second Project

1. Android 4: A Second Project Kirk Scott

3. This unit will be divided into these sections: • 1. Introduction • 2. Views, layouts, and resources • 3. The activity_main.xml file • 4. The strings.xml file • 5. The R.java class • 6. The MainActivity.java file

4. 1. Introduction • The overall plan of all of the sets of overheads is to gradually grow some examples which illustrate how to do things • It is not practical to cover each relevant topic in depth before applying it • There are too many topics and they are too extensive

5. Eventually, after covering enough examples, it would be possible to delve into individual topics in some depth • Examples and background information are interspersed throughout the sets of overheads • The background may help give context to previous examples and may provide a starting point for understanding future examples

6. On the following overhead a screenshot is given of the example that will be pursued in this unit • The goal is to develop an app that allows the user to enter text into a field and press a button to have the text echoed on the screen

8. These are some of the topics that will be covered in this unit in brief: • Views in apps • XML and app layout • Graphical components of apps • The relationship between apps and resources • The specification of id’s in apps • Adding functionality to apps

9. 2. Views, Layouts, and Resources

10. Views and Layouts • The logic of Android app layout has some similarities with the way layouts are accomplished in Java swing • You may be reminded of how components are added to panels, for example, or how focus belongs to focus traversal groups • However, there are major differences in the way things are accomplished in practice

11. The layout of an Android app can be conceptualized as view groups and views • View groups are overall containers for views or other view groups • The term view refers to specific, individual graphical components like buttons, text fields, etc. • Some of these individual items are known generically as widgets in Android

12. In concrete terms, one of the most basic differences between Java applications and Android apps is that the layout of an app is stored in a separate .xml file • To a certain extent, this is inconvenient, because as a developer you have to get used to having various things in different places and keeping track of their relationships

13. In the long run, it is actually a very useful and practical way of managing the code for apps • It’s sort of like taking the MVC pattern to the extreme • The view is maintained completely separately from the model

14. There are various advantages to this • For example, there are many different kinds of mobile devices, with screens of different sizes and resolutions • Defining layouts separately helps make it possible to support the same app in many different environments

15. Resources • The same kind of logic applies to managing various resources, including things as simple as the strings that an app displays • It may seem clumsy at first to have strings declared in a strings.xml file • But separating strings from the logic of the code also has advantages

16. For example, not only do apps run on different devices, they may also be internationalized • Keeping strings separate from program logic makes it reasonably easy to substitute strings in one language for strings in another, or make other substitutions as necessary

17. The purpose of this section was to give some vocabulary—views and layouts • It was also to give a brief preview of the concrete example that will be pursued—MyEchoApp • The organization and presentation of the following sections directly depends on the idea that various parts of an Android app are stored in different files

18. The overall goal of the following section is to trace through the contents of MyEchoApp • It is done by examining the contents of the files related to the app one after the other in the order listed on the following overhead

19. activity_main.xml (layout) • strings.xml (string resources) • R.java (the resources in the built Java code) • MainActivity.java (the application source code)

20. 3. The activity_main.xml File

21. The activity_main.xml file contains the formatting for an app • Information concerning this file will be presented in this way: • A. A review of what the file contained for MyFirstApp • B. A presentation of the complete file for MyEchoApp • C. A line-by-line discussion of the contents of the file for MyEchoApp

22. The screenshot on the following overhead shows the Graphical Layout view of the activity_main.xml file for MyFirstApp • This just serves as a reminder of what you saw in a previous unit • The layout of MyFirstApp was based on what is known as RelativeLayout • What the layout contained was known as a TextView

24. The screenshot on the following overhead shows the editor view of the activity_main.xml file for MyFirstApp

26. The complete activity_main.xml code for MyFirstAppis shown on the following overhead

27. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" • xmlns:tools="http://schemas.android.com/tools" • android:layout_width="match_parent" • android:layout_height="match_parent" • tools:context=".MainActivity" > • <TextView • android:layout_width="wrap_content" • android:layout_height="wrap_content" • android:layout_centerHorizontal="true" • android:layout_centerVertical="true" • android:text="@string/hello_world" /> • </RelativeLayout>

28. Most of the details of importance will be discussed when going through the activity_main.xml file for MyEchoApp • As noted above, MyFirstApp uses a RelativeLayout • It contains a TextView • The TextView contains this: • android:text="@string/hello_world"

29. The RelativeLayout is a so-called root view • The TextView is a so-called child view • The idea is straightforward • The layout root organizes the child views that it contains

30. The layout of MyEchoAppis based on the same organizing principles as MyFirstApp, but its layout is different and it contains more views • The screenshot on the following overhead shows the Graphical Layout view of the activity_main.xml file for MyEchoApp

32. The screenshot on the following overhead shows the editor view of the activity_main.xml file for MyEchoApp

34. The complete activity_main.xml code for MyEchoApp is shown on the following overhead

35. <?xml version="1.0" encoding="utf-8"?> • <!-- This is the activity_main.xml file for My Echo App. --> • <LinearLayout • xmlns:android="http://schemas.android.com/apk/res/android" • xmlns:tools="http://schemas.android.com/tools" • android:layout_width="match_parent" • android:layout_height="match_parent" • android:orientation="vertical" > • <EditText • android:layout_height="wrap_content" • android:layout_width="wrap_content" • android:hint="@string/text_message" • android:id="@+id/edit_message" /> • <Button • android:layout_height="wrap_content" • android:layout_width="wrap_content" • android:text="@string/button_echo" • android:onClick="sendMessage" /> • <TextView • android:layout_height="wrap_content" • android:layout_width="wrap_content" • android:text="@string/echo_placeholder" • android:id="@+id/echo_message" /> • </LinearLayout>

36. The activity_main.xml Code for MyEchoApp Line-by-Line • The following overheads will go through the XML code line-by-line • The goal is not to cover XML in detail • The goal is to get an initial idea of the connection between the XML and the appearance of the application • It is also to get an idea of how the connection is made between the XML components and what will be the functionality of the application

37. It is worth noting again that the Graphical Layout view has a palette you can use to drag and drop components into a layout • The first items in the palette are Form Widgets, Text Fields, Layouts • You could create a layout by dragging and dropping • You were invited to try this at the end of the last set of overheads • It will come again in the future

38. The point now is to look at the XML • It’s helpful to have some familiarity with the XML that is generated in order to later become an intelligent user of the tools in the palette • Generating the graphical components is pretty mechanical • The important part will be the connection between them and the functionality of the application

39. The first line of activity_main.xml gives the version • <?xml version="1.0" encoding="utf-8"?> • The second line illustrates the form of a comment in XML • <!-- This is the activity_main.xml file for My Echo App. -->

40. The third line declares the kind of layout that is being created for the app • The LinearLayout is sort of like the FlowLayout in swing • Another parameter will be given lower down which clarifies how LinearLayout works • <LinearLayout

41. xmlns stands for XML name space • For the time being we can just copy and carry this without needing to know the details • xmlns:android=http://schemas.android.com/apk/res/android • xmlns:tools="http://schemas.android.com/tools"

42. The LinearLayout is in effect a child of the device it’s running on • The following two lines specify that the LinearLayout should take up the full space of the display of its parent • android:layout_width="match_parent" • android:layout_height="match_parent"

43. The next line sets a parameter relevant to how the LinearLayout is displayed • LinearLayout presents views (components) in order as they’re added • The orientation of the added items can be horizontal or vertical • android:orientation=“vertical">

44. Following the declaration of the overall layout come the three child views that it contains • They are: • EditText—this will allow data input • Button—this will have an action • TextView—this will show the output

45. The EditText View • This is the complete code for EditText: • <EditText • android:layout_height="wrap_content" • android:layout_width="wrap_content" • android:hint="@string/text_message" • android:id="@+id/edit_message" />

46. EditText Line-by-Line • This line introduces the first child/view/graphical component that belongs to the LinearLayout, the editable text field • <EditText

47. These lines state that the size of the text field will be defined by the height and width of the string that it contains • android:layout_height="wrap_content" • android:layout_width="wrap_content"

48. This next line specifies a string resource associated with the text field • android:hint="@string/text_message" /> • @string is the way of designating this • text_message is the symbolic name of the string • The actual definition of the string is done in the strings.xml file, here: /res/values/strings.xml

49. android:hint tells you the role that this string will play in the app • The hint is the thing that is displayed in the text field by default • Referring back to the app screenshot, you can see that the value of this string is “Enter a string”

50. The activity_main.xml file won’t compile successfully until text_message has been included in the strings.xml file • A line like this one will appear in R.java after a successful compilation of the code with the declaration shown above • public static final inttext_message=0x7f040001;