Copyright© Jeffrey Jongko, Ateneo de Manila University

Deconstructing HelloWorld

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

Typical Android ApplicationsTypical Android Applications

Typical Android applications are composed of 4 main partsCode definitionUI definitionValues definitionManifest definition

HelloWorldHelloWorld

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); } }

Not much there is there…Not much there is there…

Majority of Android’s UI definition is done using XML filesAllows clean separation between the UI

design and the code

Code’s main job is to store control logicWidget event-handlingActivity Life Cycle methods (like onCreate)

HelloWorld XML LayoutHelloWorld XML Layout

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/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" /></LinearLayout>

Found in the res > layout folder

Android: User InterfaceAndroid: User Interface

Built using View and ViewGroup objects

View = base for subclasses called widgetsWidgets = text fields, buttons, etc

ViewGroup = base for subclasses called layouts

Layouts = linear, tabular and relative (layout architectures)

Android: View HierarchyAndroid: 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 LayoutAndroid: 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)

WidgetsWidgets

Android has many widgets (simple and complex) built-in to it Buttons Textfields ListView ImageViews

Each widget has a programmatic and XML representation

LayoutsLayouts

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 LaterMore 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

valuesvalues

Hard-coded strings are never a good thing in an applicationHard to change especially if used in several

placesForces a recompile of the application

NOT GOODUsed for text localization

Changing text for different languages

Strings.xmlStrings.xml

<?xml version="1.0" encoding="utf-8"?><resources> <string name="hello">Hello World, HelloWorldActivity!</string> <string name="app_name">HelloWorld</string></resources>

Found in the res > values folder

drawablesdrawables

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 fileManifest 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

SampleSample<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="admu.edu.cs119" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".HelloWorldActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application></manifest>

This intent-filter marks the entry point of your application

ActivitiesActivities

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 HelloWorldCustomizing 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. */ @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); }}

Android: Layout (XML)Android: Layout (XML)<?xml version="1.0" encoding="utf-8"?> <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" /></LinearLayout>

Save this as main_layout.xml in your project’s res > layout folder

Android: Layout (Output)Android: Layout (Output)

Android: LayoutAndroid: Layout

What’s the difference between: wrap_content and fill_parent?

Android: WidgetsAndroid: 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 EventsAndroid: 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 XMLRetrieving 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/<identifier> in the view

E.g. android:id="@+id/text“ 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)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(…)!

Android: UI Events (Output)Android: UI Events (Output)

Android: MenusAndroid: 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)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" /></menu>

Android: Menus (Java)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

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

Android: Menus (Output)Android: Menus (Output)

Android: Styles and ThemesAndroid: 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)Android: Styles and Themes (XML)

<?xml version="1.0" encoding="utf-8"?><resources> <style name="MyDefaultParentLayout"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">fill_parent</item> <item name="android:background">@drawable/bg</item> <item name="android:orientation">vertical</item> <item name="android:gravity">center</item> </style> </resources>

Save this XML file in /res/values/

Android: Styles and Themes (XML)Android: Styles and Themes (XML)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

style="@style/MyDefaultParentLayout">

<!-- add your Views (e.g. buttons, textViews) here -->

</LinearLayout>

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)Android: Styles and Themes (Output)

Now, whenever the appearance of your Layouts, Views, etc change, you’ll only need to update Styles! Cool, eh?