copyright© jeffrey jongko, ateneo de manila university deconstructing helloworld
TRANSCRIPT
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?