copyright© jeffrey jongko, ateneo de manila university deconstructing helloworld
TRANSCRIPT
![Page 1: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/1.jpg)
Copyright© Jeffrey Jongko, Ateneo de Manila University
Deconstructing HelloWorld
![Page 2: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/2.jpg)
OverviewOverview Deconstructing HelloWorld User Interface View Hierarchy Layout (XML) Load XML Resource Layout (Output) Widgets
![Page 3: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/3.jpg)
Typical Android ApplicationsTypical Android Applications
Typical Android applications are composed of 4 main partsCode definitionUI definitionValues definitionManifest definition
![Page 4: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/4.jpg)
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); } }
![Page 5: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/5.jpg)
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)
![Page 6: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/6.jpg)
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
![Page 7: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/7.jpg)
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)
![Page 8: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/8.jpg)
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”
![Page 9: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/9.jpg)
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)
![Page 10: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/10.jpg)
WidgetsWidgets
Android has many widgets (simple and complex) built-in to it Buttons Textfields ListView ImageViews
Each widget has a programmatic and XML representation
![Page 11: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/11.jpg)
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
![Page 12: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/12.jpg)
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
![Page 13: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/13.jpg)
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
![Page 14: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/14.jpg)
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
![Page 15: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/15.jpg)
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
![Page 16: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/16.jpg)
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
![Page 17: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/17.jpg)
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
![Page 18: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/18.jpg)
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
![Page 19: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/19.jpg)
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
![Page 20: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/20.jpg)
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); }}
![Page 21: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/21.jpg)
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
![Page 22: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/22.jpg)
Android: Layout (Output)Android: Layout (Output)
![Page 23: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/23.jpg)
Android: LayoutAndroid: Layout
What’s the difference between: wrap_content and fill_parent?
![Page 24: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/24.jpg)
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
![Page 25: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/25.jpg)
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()…
![Page 26: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/26.jpg)
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)
![Page 27: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/27.jpg)
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
![Page 28: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/28.jpg)
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(…)!
![Page 29: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/29.jpg)
Android: UI Events (Output)Android: UI Events (Output)
![Page 30: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/30.jpg)
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!
![Page 31: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/31.jpg)
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>
![Page 32: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/32.jpg)
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
![Page 33: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/33.jpg)
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
![Page 34: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/34.jpg)
Android: Menus (Output)Android: Menus (Output)
![Page 35: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/35.jpg)
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)
![Page 36: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/36.jpg)
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/
![Page 37: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/37.jpg)
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=“...".
![Page 38: Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld](https://reader035.vdocuments.mx/reader035/viewer/2022062322/5697bffc1a28abf838cc1798/html5/thumbnails/38.jpg)
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?