Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld

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

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

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. public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }

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)

HelloWorld XML Layout <LinearLayout xmlns:android=" 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" /> Found in the res > layout folder

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)

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”

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)

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

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

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

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

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

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

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 marker

Sample <manifest xmlns:android=" package="admu.edu.cs119" android:versionCode="1" android:versionName="1.0"> <activity android:name=".HelloWorldActivity" This intent-filter marks the entry point of your application

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

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

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

Android: Layout (XML) <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <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

Android: Layout (Output)

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

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

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()…

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 in the view  E.g.  This view may then be retieved using findViewById(int id)

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

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() 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(…)!

Android: UI Events (Output)

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!

Android: Menus (XML) <menu xmlns:android=" res/android" > <item android:title="Start" /> <item android:title="Quit" />

Android: Menus (Java) public class MenuActivity extends Activity public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu); public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.my_menu, menu); return true; 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

Sample menu 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

Android: Menus (Output)

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)

Android: Styles and Themes (XML) vertical center Save this XML file in /res/values/

Android: Styles and Themes (XML) <LinearLayout xmlns:android=" 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=“...".

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