1. Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld

2. Overview  Deconstructing HelloWorld  User Interface  View Hierarchy  Layout (XML)  Load XML Resource  Layout (Output)  Widgets

3. Typical Android Applications  Typical Android applications are composed of 4 main parts  Code definition  UI definition  Values definition  Manifest definition

4. HelloWorld package edu.ateneo.ajwcc.android; import android.app.Activity; import android.os.Bundle; public class KumustaMundoActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }

5. Not much there is there…  Majority of Android’s UI definition is done using XML files  Allows clean separation between the UI design and the code  Code’s main job is to store control logic  Widget event-handling  Activity Life Cycle methods (like onCreate)

6. HelloWorld XML Layout <LinearLayout xmlns:android="http://schemas.android.co m/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> Found in the res > layout folder

7. Android: User Interface  Built using View and ViewGroup objects  View = base for subclasses called widgets  Widgets = text fields, buttons, etc  ViewGroup = base for subclasses called layouts  Layouts = linear, tabular and relative (layout architectures)

8. Android: View Hierarchy  To attach View Hierarchy to the screen (for rendering), must call setContentView() in your Activity.  Android parses hierarchy tree from the top  In case of overlaps, Draw Order = “last one to be drawn will lie on top of others previously drawn to that space”

9. Android: Declaring UI Layout  2 ways:  “Declare UI elements in XML”  “Instantiate layout elements at runtime” (programmatically)  You can use either or both!  Advantage in using both:  XML can handle presentation (ala View in MVC)  Code can handle behavior of UI elements (ala Controller in MVC)

10. Widgets  Android has many widgets (simple and complex) built-in to it  Buttons  Textfields  ListView  ImageViews  Each widget has a programmatic and XML representation

11. Layouts  Android has many layouts (simple and complex) built-in to it  Linear  Relative  Tabular  Like widgets, each layout has a programmatic and XML representation

12. More Later  Specific Widget and Layouts will be discussed later in a separate slideset  Additional information can also be found in the Android documentation found with the SDK

13. values  Hard-coded strings are never a good thing in an application  Hard to change especially if used in several places  Forces a recompile of the application  NOT GOOD  Used for text localization  Changing text for different languages

14. Strings.xml Hello World, HelloWorldActivity! HelloWorld Found in the res > values folder

15. drawables  Like strings, hard-coded image paths are not recommended  For the same reasons as hard-coded strings  Images can be placed in the res/drawable-xxx  They can be referenced using their name (minus the extension)  Caveat: name must be all lowercased to be safe

16. Manifest file  The Manifest file contains information about  Activities – screens that are part of your app  Also defines the entry point activity  Permissions – all the special permissions required by the app  E.g. accessing the network, sms, etc  Can access the stuff in the /res by using the @ marker

17. Sample <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="admu.edu.cs119" android:versionCode="1" android:versionName="1.0"> <activity android:name=".HelloWorldActivity" android:label="@string/app_name"> This intent-filter marks the entry point of your application

18. Activities  Activities define the available screens that will be used in the your application  Activities have complex life-cycles that are controlled by events that occur on the phone such as being put in the background, calls, changing orientation, etc.  onCreate() is the life-cycle method for initializing the activity  More on Activities later

19. Customizing HelloWorld  Quickest way to customize HelloWorld is to change the widgets inside it  Editing XML layout is one way to achieve this  Another is to programmatically instantiate a view (like a TextField) and use it as the contentView

20. Programmatic customization public class HelloWorldActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); TextView tv = new TextView(this); tv.setText("*\n*\n**\n***"); setContentView(tv); }

21. Android: Layout (XML) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> Save this as main_layout.xml in your project’s res > layout folder

22. Android: Layout (Output)

23. Android: Layout What’s the difference between: wrap_content and fill_parent ?

24. Android: Widgets  = View object that a user interacts with.  Ex: Buttons, TextView, EditText, RadioButton, CheckBox  You can create your own custom widgets!  How? Extend existing View class or subclass

25. Android: UI Events  To determine whether a user has interacted with your UI (so you can perform appropriate actions)  Either of these 2 things: 1) “Define an event listener and register it with the View” - onClickListener(), setOnClickListener(…) 2) “Override an existing callback method for View” - onTouchEvent(), onKeyDown()…

26. Retrieving Views from the XML  When you define views inside an XML there are times you need to pull one of them out  To do this you will need to supply an id to the view  Using using @+id/ in the view  E.g. android:id="@+id/text“  This view may then be retieved using findViewById(int id)

27. IDs  Ids are special in Android, they are auto- generated so you can use Eclipse auto-complete to use them  These are stored in the auto-generated R file  Your project package has a specific R file associated to it  E.g. admu.edu.cs119.R  Make sure you have imported the correct one

28. Android: UI Events (Java) public void initUIEventHandling() { myTextView = (TextView)findViewById(R.id.my_textview); myButton = (Button)findViewById(R.id.my_button); myButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { myTextView.setText("Button clicked!"); } }); } Be sure that you have my_textview and my_button ids in the XML layout that you attached to your Activity using setContentView(…)!

29. Android: UI Events (Output)

30. Android: Menus  Option Menus (most common)  revealed by pressing MENU key in the device  onCreateOptionsMenu()  onOptionsItemsSelected()  Context Menus  revealed when users presses and holds down an item  onCreateContextMenu()  onContextItemsSelected() “Menus also handle their own events, so there’s no need to register event listeners on the items in your menu.” You can declare your menu items in XML!

31. Android: Menus (XML) <menu xmlns:android="http://schemas.android.com/apk/ res/android" > <item android:id="@+id/start" android:title="Start" /> <item android:id="@+id/quit" android:title="Quit" />

32. Android: Menus (Java) public class MenuActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.my_menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { //Handle item selection using item.getItemId() return; } For R.menu.my_menu, create in res folder a “menu” folder in the same level as “layout”, etc

33. Sample menu handling @Override public boolean onOptionsItemSelected(MenuItem item) { //Handle item selection using item.getItemId() switch(item.getItemId()) { case id.start: break; case id.quit: break; } return true; } A Toast is a small pop-up message that appears then vanishes

34. Android: Menus (Output)

35. Android: Styles and Themes  Styles ≈ Cascading Style Sheets (CSS) in HTML  “collection of properties that specify look and format for a View…”  layout_width, layout_height, background, font size, font color, padding, …  Themes = style applied to an entire Activity or Application (rather than an individual View)

36. Android: Styles and Themes (XML) fill_parent @drawable/bg vertical center Save this XML file in /res/values/

37. Android: Styles and Themes (XML) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyDefaultParentLayout"> You can put your style in your Layout or View using style=“...". You can also put it in the Activity or Application itself using android:theme=“...".

38. Android: Styles and Themes (Output) Now, whenever the appearance of your Layouts, Views, etc change, you’ll only need to update Styles! Cool, eh?