Program Studi Teknik Informatika pdf

(1)

P11

Bab 10 – Android (

User Interface

)

10.1 Tujuan

Mahasiswa memahami tipe sistem operasi android dan konsep pembuatan aplikasi di

Android.

10.2 Materi

1. User Interface Component

2. AndroidManifest.xml

3. Widget

10.3 User Interface Component

• Secara umum User Interface (UI) pada aplikasi berbasis Android adalah user interface yang

terdiri dari :

◦

Activity

◦

User Interface (komponen)

• Semua yang berhubungan dengan user interface tersebut pada aplikasi Android :

◦

user interface :

▪ eclipse

: /res/layout/activity_main.xml

▪ netbeans

: /Reseources/layout/main.xml

◦

Source code Java untuk memanggil user interface :

▪ eclipse

: src/Package Name/MainActivity.java

▪ netbeans

: Sources Package/Package Name/MainActivity.java

• Source code main.xml secara umum mempunyai struktur sebagai berikut :

main.xml (netbeans) / activity_main.xml (eclipse)

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0" encoding="utf-8"?>

<ViewGroup xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

android:id="@[+][package:]id/resource_name"

android:layout_width=["dimension" | "fill_parent" | "wrap_content"] android:layout_height=["dimension" | "fill_parent" | "wrap_content"] [ViewGroup-specific attributes] >

<View

android:id="@[+][package:]id/resource_name"

(2)

12 13 14 15 16 17 18 19

[ViewGroup-specific attributes] > <requestFocus/>

</View> <ViewGroup> <View /> </ViewGroup>

Keterangan (Element) :

• <ViewGroup>

◦

Kumpulan view yang dapat digunakan untuk menentukan tata letak komponen

view secara berbeda (seperti : LinearLayout, RelativeLayout, FrameLayout, dan

Tabulasi).

◦

Atribut dari ViewGroup terdiri dari :

▪ android:id

resource id → berisi variable unik dari elemen tersebut.

▪ android:layout_width

dimensi value-nya (width) → diikuti opsi “fill parent” atau “wrap content”

▪ android:layout_height

dimensi value-nya (height) → diikuti opsi “fill parent” atau “wrap content”

• <View>

◦

Sama seperti <ViewGroup> tetapi <View> lebih dikenal dengan “individual UI

Component”,

◦

Atributnya sama dengan ViewGroup.

• <requestFocus>

◦

Element kosong yang bisa kita definisikan di dalam <view>

• <include>

◦

Untuk memasukkan file layout ke dalam layout. Atribute sama dengan

<ViewGroup> dan <View>

◦

Tetapi ada satu penambahan atribut lagi yaitu <resource> yang berfungsi untuk

menentukan file layout-nya.

10.4 AndroidManifest.xml

• File AndroidManifest.xml diperlukan oleh setiap aplikasi yang berbasis Android, file ini

terletak di directory root aplikasi :

◦

eclipse

: /AndroidManifest.xml

◦

netbeans

: /Important files/Android manifest file/AndroidManifest.xml

• File AndroidManifest.xml :

(3)

AndroidManifest.xml (netbeans) / AndroidManifest.xml (eclipse)

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.wilis.android1"

android:versionCode="1" android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="10" android:targetSdkVersion="10" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity

android:name="com.wilis.android1.MainActivity" android:label="@string/app_name" >

</manifest>

Keterangan (Element) :

• <manifest>

◦

Merupakan titik root utama dari AndroidManifest.xml

◦

Berisi atribute package aplikasi dan package activity

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.wilis.android1"

android:versionCode="1" android:versionName="1.0" >

• <uses-permision>

◦

Menjelaskan tentang user permission/security permission yang harus diberikan,

agar aplikasi dapat berjalan.

◦

Contoh uses-permission dalam penggunaan resources yang disediakan oleh

sistem, yang digunakan pada saat pengiriman SMS :

<uses-permission android.name="android.permission.RECEIVE_SMS"/>

• <permision>

(4)

• <instrumentation>

◦

Mendeklarasikan instrument yang disediakan untuk menguji fungsionalitas dari

paket aplikasi yang digunakan dalam aplikasi Android.

• <application>

◦

Element root untuk mendeklarasikan aplikasi Android.

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >

• <intent filter>

◦

Mendeklarasikan intent yang dibutuhkan aplikasi Android.

◦

Atribut-atribut digunakan untuk menyuplai label, icon, data, dan informasi yang

digunakan dalam aplikasi Android.

<intent-filter>

• <action>

◦

Berisi action type yang didukung oleh komponen-komponen yang berada dalam

aplikasi Android.

• <category>

◦

Mendeklarasikan kategori-kategori yang didukung oleh aplikasi Android.

• <data>

◦

Mendeklarasikan type MIME, URL, authority penggunaan URL serta penentuan

PATH yang digunakan dalam URL.

• <meta-data>

◦

Mendeklarasikan meta data yang dibutuhkan sebagai tambahan data yang

digunakan dalam aplikasi Android.

• <receiver>

◦

Memberikan informasi mengenai aksi yang terjadi (ex : menerima SMS)

• <service>

◦

Mendeklarasikan komponen-komponen yang berjalan seperti service (berjalan di

background)

• <provider>

(5)

10.5 Widget

Text View

a) Project Configuration

Project Name

: Android1

Package Name

: fti.umby.Android1

Activity Name

: Android1

Target Platform

: Android 2.3.3

b) File 1 : Android1.java

Android1.java

package fti.umby.android1;

import android.os.Bundle; import android.app.Activity; import android.view.Menu;

public class Android1 extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_android1); }

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_android1, menu); return true;

}

c) File 2 : activity_android1.xml (layout)

activity_android1.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" tools:context=".Android1" >

<TextView

android:id="@+id/Str01" android:text="@string/text_1" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

(6)

14 15 16 17 18 19 20 21 22 23 24 25 26 27

android:id="@+id/Str02"

android:text="@string/text_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/Str01"/>

<TextView

android:id="@+id/Str03"

android:text="@string/text_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/Str02"/>

</RelativeLayout>

d) File 3 : string.xml (values)

string.xml

1 2 3 4 5 6 7 8 9 10

<string name="app_name">Text View</string> <string name="text_1">Welcome to </string>

<string name="text_2">Faculty of Information Technology</string> <string name="text_3">Mercu Buana University of Yogyakarta</string> <string name="menu_settings">Settings</string>

</resources>

(7)

Button

a) Project Configuration

Project Name

: Android2

Package Name

: fti.umby.Android2

Activity Name

: Android2

Target Platform

: Android 2.3.3

b) File 1 : Android2.java

Android2.java

package fti.umby.android2;

@Override

}

c) File 2 : activity_android2.xml

<TextView

android:id="@+id/txt01" android:text="@string/Txt01" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

<Button

android:id="@+id/btn01"

(8)

18 19 20 21 22 23 24 25 26 27 28 29

android:layout_below="@+id/txt01"> </Button>

<Button

android:id="@+id/btn02"

android:text="@string/btnTxt02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btn01"> </Button>

</RelativeLayout>

d) File 3 : string.xml

string.xml

1 2 3 4 5 6 7 8 9 10

<string name="app_name">Button</string> <string name="Txt01">Button Sample</string> <string name="btnTxt01">Replace</string> <string name="btnTxt02">Exit</string>

<string name="menu_settings">Settings</string>

</resources>

(9)

Check Box

a) Project Configuration

Project Name

: Android3

Package Name

: fti.umby.Android3

Activity Name

: Android3

Target Platform

: Android 2.3.3

b) File 1 : Android3.java

Android3.java

@Override

}

c) File 2 : activity_android3.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

(10)

18 19 20

android:layout_below="@+id/txt01"/>

</RelativeLayout>

d) File 3 : string.xml

string.xml

1 2 3 4 5 6 7 8 9

<?xml version="1.0" encoding="utf-8"?> <resources>

<string name="app_name">Check Box</string> <string name="Txt01">Check Box Sample</string> <string name="checkBox01">checkBox01</string> <string name="menu_settings">Settings</string>

</resources>

e) Execution

Radio Button /

Radio Group

a) Project Configuration

Project Name

: Android4

Package Name

: fti.umby.Android4

Activity Name

: Android4

Target Platform

: Android 2.3.3

b) File 1 : Android4.java

Android4.java

(11)

6

@Override

}

c) File 2 : activity_android4.xml

<TextView

android:id="@+id/txt01"

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/Txt01" />

<RadioGroup

android:id="@+id/RadioGroup01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center_horizontal" android:layout_below="@+id/txt01">

<RadioButton

android:id="@+id/rdb1"

android:text="@string/strRd01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </RadioButton>

<RadioButton

(12)

36 37 38 39 40 41 42 43 44

</RadioGroup>

</RelativeLayout>

d) File 3 : string.xml

string.xml

1 2 3 4 5 6 7 8 9 10 11

<string name="app_name">Radio Button</string> <string name="Txt01">Radio Button Sample</string> <string name="strRd01">Red</string>

<string name="strRd02">Green</string> <string name="strRd03">Blue</string>

<string name="menu_settings">Settings</string>

</resources>

(13)

List View

a) Project Configuration

Project Name

: Android5

Package Name

: fti.umby.Android5

Activity Name

: Android5

Target Platform

: Android 2.3.3

b) File 1 : Android5.java

Android5.java

import android.os.Bundle;

import android.app.ListActivity; import android.view.View;

import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; import android.view.Menu;

public class Android5 extends ListActivity {

TextView selection;

String[] items={"Islam", "Protestant", "Catholic", "Confucian", "Buddhist", "Hindu"};

@Override

protected void onCreate(Bundle icicle) { super.onCreate(icicle);

setContentView(R.layout.activity_android5); setListAdapter(new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, items));

selection=(TextView)findViewById(R.id.txt02); }

public void onListItemClick(ListView parent, View v, int position, long id) { selection.setText(items[position]);

}

@Override

}

(14)

c) File 2 : activity_android5.xml

<TextView

android:id="@+id/txt01" android:text="@string/Txt01"

android:layout_width="wrap_content" android:layout_height="wrap_content"/>

<TextView

android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/txt01"/>

<ListView

android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:drawSelectorOnTop="false" android:layout_below="@+id/txt02"/>

</RelativeLayout>

d) File 3 : string.xml

string.xml

<string name="app_name">List View</string> <string name="Txt01">List View Sample</string> <string name="menu_settings">Settings</string>

(15)

e) Execution

Spinner / Combo List

a) Project Configuration

Project Name

: Android6

Package Name

: fti.umby.Android6

Activity Name

: Android6

Target Platform

: Android 2.3.3

b) File 1 : Android6.java

Android6.java

1 2 3 4 5 6 7 8 9 10 11 12 13

import android.os.Bundle; import android.app.Activity; import android.view.View;

import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Spinner; import android.widget.TextView; import android.view.Menu;

(16)

14

TextView selection;

String[] items={"Islam", "Protestant", "Catholic", "Confucian", "Buddhist", "Hindu"};

@Override

public void onCreate(Bundle icicle) { super.onCreate(icicle);

setContentView(R.layout.activity_android6); selection=(TextView)findViewById(R.id.txt02);

Spinner spin=(Spinner)findViewById(R.id.spinner01); spin.setOnItemSelectedListener(this);

ArrayAdapter<String> dnd=new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,items);

dnd.setDropDownViewResource(

android.R.layout.simple_spinner_dropdown_item); spin.setAdapter(dnd);

}

public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {

selection.setText(items[position]); }

public void onNothingSelected(AdapterView<?> parent) { selection.setText("");

}

@Override

}

c) File 2 : activity_android6.xml

<TextView

(17)

14 15 16 17 18 19 20 21 22 23 24 25

<Spinner

android:id="@+id/spinner01"

</RelativeLayout>

d) File 3 : string.xml

string.xml

1 2 3 4 5 6 7 8

<string name="app_name">Spinner</string> <string name="Txt01">Spinner Sample</string> <string name="menu_settings">Settings</string>

</resources>

(18)

Edit Text

a) Project Configuration

Project Name

: Android7

Package Name

: fti.umby.Android7

Activity Name

: Android7

Target Platform

: Android 2.3.3

b) File 1 : Android7.java

Android7.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@Override

}

(19)

c) File 2 : activity_android7.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<TextView

android:id="@+id/txt01" android:text="@string/Txt01"

android:layout_width="wrap_content" android:layout_height="wrap_content"/>

<EditText

android:id="@+id/editTxt01" android:text=""

android:inputType="text"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/txt01"> </EditText>

</RelativeLayout>

d) File 3 : string.xml

string.xml

1 2 3 4 5 6 7 8

<string name="app_name">Edit Text</string> <string name="Txt01">Edit Text Sample</string> <string name="menu_settings">Settings</string>

</resources>

(20)