pemanfaatan konsep atensi visual untuk mengukur

MOBILE COMPUTING
D10K-7D02
MC03: Introduction to Android Programming
Dr. Setiawan Hadi, M.Sc.CS.
Program Studi S-1 Teknik Informatika
FMIPA Universitas Padjadjaran
Android App
• Kebanyakan ditulis dalam Java
• Android SDK tools mengkompilasi code, data dan
resource files menjadi Android PacKage yaitu
filename.apk (filename berekstensi apk).
• Apps didownload dari Google Play, atau dikopikan
ke alat adalah berupa filename.apk
• Instalasi = menginstal file apk
• Elemen-elemen App
– User Interface
– Other code designed to run in background (multi‐task)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
UI Design menggunakan XML
• Android memisahkan UI design dari
program
• Mengapa? Agar UI dapat dimodifikasi
tanpa mengubah program Java
• Contoh: Dalam aplikasi contoh, shapes,
colors dapat diubah dalam file XML tanpa
mengubah program Java
• UI dirancang menggunakan graphical
(WYSIWYG) tool atau Extensible Markup
Language (XML)
• XML:
– Markup language that is both
human‐readable and machine‐readable'
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
File-file dalam Android Project
Folder/Directory
Deskripsi
Contoh
res/layout/
XML files for look or layout of
Android screens
The width, height, layout
of screen cells are specified
in XML file here
res/drawable‐xyz/
images (PNG, JPEG, etc) at various The images stored in jpg or
resolutions
other format here
res/raw
general‐purpose files (e.g. audio
clips, CSV files
res/values/
strings, dimensions, etc
java/
Java code for programming the
“brains” of the app. E.g. What
happens on user input, etc
App’s behavior when user
clicks on a selection in java
file here
Configuration files
(e.g. AndroidManifext.xml)
Contains app name, app screens,
etc
App’s behavior when user
clicks on a selection in java
file here
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
File-file dalam
Android Project
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Editting Android
• Activity_my.xml is XML file specifying screen layout
• Can edit XML directly or drag and drop
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
What is XML file?
• Android XML files consist of:
– UI components called Views
– ViewGroups (or layout managers)
• The example XML file shown contains:
– 1 ViewGroup (LinearLayout) that fills the entire
screen
– 1 View (TextView) that contains text
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Basic Overview of an App
• https://www.youtube.com/watch?v=9l1lfWAiHPg
• Main topics
– Introduces main files of Android App
• Activity_main.xml
• MainActivity.java
• AndroidManifest.xml
– How to work with these files within Android Studio
– Editting files using either drag‐and‐drop interface or
XML
– Flow of basic app
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Activity
• Activity: main building block of Android UI
• Analogous to a window or dialog box in adesktop
application
• Apps
– have at least 1 activity that deals with UI
– Entry point of app similar to main( ) in C
• Typically have multiple activities
• Example: A camera app
– Activity 1: to focus, take photo, start activity 2
– Activity 2: to present photo for viewing, save it
•
•
•
•
Each activity controls 1 or more screens
Activities independent of each other
Can be coupled by control or data
App Activities are sub‐class of Activity class
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Activity_main.xml
• XML file used to design screen layout, buttons, etc
• Widgets: elements that can be dragged onto activity (screen)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
MainActivity.java
• Used to define actions taken when button clicked (intelligence)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
activity_main.xml: Text View
• Design View: Drag‐and‐drop screen (Activity) design
• Text view: Directly edit XML file defining screen
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
AndroidManifest.xml
• App’s starting point (a bit like main( ) in C)
• All activities (screens) are listed in AndroidManifest.xml
• Activity with tag “LAUNCHER” is launched first (starting point)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Inside “MyHello” AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.shadi.myhello" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
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>
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Resume
• 3 Files:
– activity_main.xml: XML file specifying screen layout
– MainActivity.Java: Java code to define behavior,
actions taken when button clicked (intelligence)
– AndroidManifest.xml:
• Lists all screens, components of app
• How these components attach themselves to overall
Android system
• Analogous to a table of contents for a book
• E.g. Hello world program has 1 screen, so
AndroidManifest.xml has 1 item listed
• App starts running here (a bit like main( ) in C), launches
activity with a tag “LAUNCHER”
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
AndroidManifest.xml
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
MainActivity.Java
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
activity_main.xml
• After choosing the layout, then widgets added to design UI
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Android Compilation Process/Steps
• Dalvik is Android virtual machine
– Works like Java virtual machine, but optimized for mobile devices
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Execution Order
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
RESOURCES
View Properties and String Resources
• Views are declared with attributes for configuring them
• Consider the following TextView example
• @string/hello is a variable declared in another file, strings.xml
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Strings in AndroidManifest.xml
• Strings declared in strings.xml can be referenced by all other
XML files (activity_main.xml, AndroidManifest.xml)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
strings.xml
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Styled Text
•
•
•
•
In HTML, tags can be used for italics, bold, etc
E.g. <i> Hello </i> makes text Hello
<b> Hello <b> makes text Hello
Can use the same HTML tags to add style
(italics, bold, etc) to your Android strings
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Files in Android Project
• res/layout: The width, height, layout of screen
cells are specified in XML file here
• res/drawable‐xyz/: The images stored in jpg or
other format here
• java/: App’s behavior when user clicks on screen
(e.g. button) specified in java file here
• AndroidManifext.XML: Contains app name
(Pinterest), list of app screens, etc
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Resource Files in an Android Project
• Resources (stored in /res folder) are static bits of
information outside java code (e.g. layout,
images, etc). E.g.
– res/drawable‐xyz/
– res/layout:
• Can have multiple resource definitions, used
under different conditions. E.g internalization
(text in different languages)
• In Android Studio, the res/ folder is
app/src/main/
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Phone Dimensions Used in Android UI
• Physical dimensions measured diagonally
– E.g. Nexus 4 is 4.7 inches diagonally
• Resolution in pixels
– E.g. Nexus 4 resolution 768 x 1280 pixels
• Pixel Density = PPI =
7682  12802
 318
4.7
• Dots per inch (DPI) is number of pixels in a
physical area
–
–
–
–
Low density (ldpi) = 120 dpi
Medium density (mdpi) = 160 dpi
High density (hdpi) = 240 dpi
Extra High Density (xhdpi) = 320 dpi
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
PPI dan DPI
• DPI. Dots per inch.
That’s how many
droplets of liquid
squeeze into an inch
of your printed paper.
• PPI. Pixels per inch.
That’s how many
points of light live on
an inch of screen.
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Adding Pictures
•
•
•
•
Android supports images in PNG, JPEG and GIF formats
GIF officially discouraged, PNG preferred format
Default directory for images (drawables) is res/drawable‐xyz
Images in res/drawable‐xyz can be referenced by XML and
java files
–
–
–
–
–
–
res/drawable‐ldpi: low dpi images (~ 120 dpi of dots per inch)
res/drawable‐mdpi: medium dpi images (~ 160 dpi)
res/drawable‐hdpi: high dpi images (~ 240 dpi)
res/drawable‐xhdpi: extra high dpi images (~ 320 dpi)
res/drawable‐xxhdpir: extra extra high dpi images (~ 480 dpi)
res/drawable‐xxxhdpi: high dpi images (~ 640 dpi)
• Images in these directories are same size, different resolutions
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Layout
• Layouts can contain UI elements (provided and custom)
• Stored in res/layout
• Useful Layouts:
–
–
–
–
–
–
–
–
–
–
FrameLayout,
LinearLayout,
TableLayout,
GridLayout,
RelativeLayout,
ListView,
GridView,
ScrollView,
DrawerLayout,
ViewPager
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Kompilasi ke Hardware Android
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Kompilasi ke Hardware Android
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
activity_mail.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="29dp"
android:src="@mipmap/ic_launcher"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"
android:id="@+id/okey"
android:layout_below="@+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="54dp"
android:clickable="false"
android:onClick="klikOK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:id="@+id/cancel"
android:layout_alignTop="@+id/okey"
android:layout_alignRight="@+id/textView"
android:layout_alignEnd="@+id/textView" />
</RelativeLayout>
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
package com.example.shadi.myhello;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
//tambah
import android.content.Context;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void okButtonClicked(View v) {
tToast("Tombok OK di klik!");
}
public void cancelButtonClicked(View v) {
tToast("Tombok Cancel di klik!");
}
private void tToast(String s) {
Context context = getApplicationContext();
int duration = Toast.LENGTH_SHORT;
Toast toast = Toast.makeText(context, s, duration);
toast.show();
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016