INTERNET PROGRAMMING PENS-ITS
MODUL 13
KOMPONEN GUI ANDROID
A. Tujuan :
1. Memahami berbagai pembuatan komponen di android
2. Memahami passing parameter di android dalam 1 layar
3. Memahami passing parameter di android dalam 2 layar
B. Dasar Teori
Ada beberapa macam component Android yang biasa dipakai dalam pembuatan
aplikasi, yaitu :
1. Text Control
2. Button
3. Check Box
4. Radio Button
5. List
6. Grid
7. Date and Time
Macam-macam text control meliputi :
1. TextView
2. EditText
3. AutoCompleteTextView
4. MultiAutoCompleteTextView
Terdapat 3 jenis button yaitu :
1. Basic button
2. Image button
3. Toggle button
Jenis layout :
INTERNET PROGRAMMING PENS-ITS
C. Tugas Pendahuluan
Buatlah desain flowchart untuk setiap soal dalam percobaan
D. Percobaan
D.1. Latihan
Latihan 1: Membuat aplikasi radio button
a. Design tampilan di : res/layout/[Link]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/warna">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView android:text="Dimanakah letak PENS :"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<RadioGroup android:id="@+id/RadioGroup01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:text="Surabaya"
android:id="@+id/RadioButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></RadioButton>
<RadioButton android:text="Kediri"
android:id="@+id/RadioButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></RadioButton>
</RadioGroup>
<Button android:text="Pilih"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Button>
<TextView android:text=""
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
INTERNET PROGRAMMING PENS-ITS
b. Buat file : [Link]
package [Link];
import
import
import
import
import
import
import
[Link];
[Link];
[Link];
[Link];
[Link];
[Link];
[Link];
public class latRadBtn extends Activity {
TextView data;
Button pilih;
RadioButton rb1, rb2;
RadioGroup rg;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link]);
rg = (RadioGroup) findViewById ([Link].RadioGroup01);
rb1 = (RadioButton) findViewById ([Link].RadioButton01);
rb2 = (RadioButton) findViewById ([Link].RadioButton02);
data = (TextView) findViewById ([Link].TextView02);
pilih = (Button) findViewById ([Link].Button01);
[Link](new klik());
}
class klik implements [Link] {
public void onClick (View v) {
if ([Link]())
[Link]("Surabaya");
if ([Link]())
[Link]("Kediri");
}
}
}
INTERNET PROGRAMMING PENS-ITS
Latihan 2: Membuat aplikasi passing parameter antara 2 tampilan
a. Design tampilan yang pertama di : res/layout/[Link]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/warna">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="Nama"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<EditText android:text=""
android:id="@+id/EditText01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></EditText>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="Alamat"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<EditText android:text=""
android:id="@+id/EditText02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></EditText>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:text="Proses"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Button>
<Button android:text="Reset"
android:id="@+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Button>
</LinearLayout>
</LinearLayout>
INTERNET PROGRAMMING PENS-ITS
b. Design tampilan yang kedua di : res/layout/[Link]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@color/warna2">
<TextView android:text=""
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView android:text=""
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
c. Buat file : [Link] untuk memproses tampilan yang pertama
package [Link];
import
import
import
import
import
import
[Link];
[Link];
[Link];
[Link];
[Link];
[Link];
public class latGUI extends Activity {
EditText nm, almt;
Button pilih,reset;
public static String nama;
public static String alamat;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link]);
nm = (EditText) findViewById([Link].EditText01);
almt = (EditText) findViewById([Link].EditText02);
pilih = (Button) findViewById([Link].Button01);
reset = (Button) findViewById([Link].Button02);
[Link](new click01());
[Link](new click02());
}
class click01 implements [Link]{
public void onClick(View v){
nama = [Link]().toString();
alamat = [Link]().toString();
Intent i = new Intent ([Link],[Link]);
finish();
startActivity(i);
}
}
class click02 implements [Link]{
public void onClick(View v){
[Link]("");
[Link](""); }
}
}
INTERNET PROGRAMMING PENS-ITS
d. Buat file : [Link] untuk memproses tampilan yang kedua
package [Link];
import [Link];
import [Link];
import [Link];
public class hal2 extends Activity {
TextView dtnama, dtalamat;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].hal2);
dtnama = (TextView) findViewById ([Link].TextView01);
dtalamat = (TextView) findViewById ([Link].TextView02);
[Link]([Link]);
[Link]([Link]);
}
}
e. Edit file [Link] agar bisa interaksi 2 tampilan
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="[Link]
package="[Link]"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:name=".latGUI"
android:label="@string/app_name">
<intent-filter>
<action android:name="[Link]" />
<category android:name="[Link]" />
</intent-filter>
</activity>
<activity android:name=".hal2"></activity>
</application>
<uses-sdk android:minSdkVersion="8" />
</manifest>
INTERNET PROGRAMMING PENS-ITS
D.2. Permasalahan
Untuk permasalahan dalam praktikum, lakukan langkah-langkah berikut :
a. Buatlah tampilan seperti dibawah ini dengan 2 tampilan.
b. Beberapa file yang dibutuhkan :
- 2 file xml di res/layout
- 2 file java
- Edit file [Link]
Contoh tampilan :
E. Laporan Resmi
Analisa dari program yang telah anda buat diatas.
