INTERNET PROGRAMMING PENS
MODUL 10
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 :
zenhadi@eepis-its.edu
1
INTERNET PROGRAMMING PENS
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/main.xml
<?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"
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>
zenhadi@eepis-its.edu
2
INTERNET PROGRAMMING PENS
b. Buat file : latRadBtn.java
package pens.edu;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
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) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
rg = (RadioGroup) findViewById (R.id.RadioGroup01);
rb1 = (RadioButton) findViewById (R.id.RadioButton01);
rb2 = (RadioButton) findViewById (R.id.RadioButton02);
data = (TextView) findViewById (R.id.TextView02);
pilih = (Button) findViewById (R.id.Button01);
pilih.setOnClickListener(new klik());
}
class klik implements Button.OnClickListener {
public void onClick (View v) {
if (rb1.isChecked())
data.setText("Surabaya");
if (rb2.isChecked())
data.setText("Kediri");
}
}
}
zenhadi@eepis-its.edu
3
INTERNET PROGRAMMING PENS
Latihan 2: Membuat aplikasi passing parameter antara 2 tampilan
a. Design tampilan yang pertama di : res/layout/main.xml
<?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"
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>
zenhadi@eepis-its.edu
4
INTERNET PROGRAMMING PENS
b. Design tampilan yang kedua di : res/layout/hal2.xml
<?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" 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 : latGUI.java untuk memproses tampilan yang pertama
package pens.edu;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
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) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
nm = (EditText) findViewById(R.id.EditText01);
almt = (EditText) findViewById(R.id.EditText02);
pilih = (Button) findViewById(R.id.Button01);
reset = (Button) findViewById(R.id.Button02);
pilih.setOnClickListener(new click01());
reset.setOnClickListener(new click02());
}
class click01 implements Button.OnClickListener{
public void onClick(View v){
nama = nm.getText().toString();
alamat = almt.getText().toString();
Intent i = new Intent (latGUI.this,hal2.class);
finish();
startActivity(i);
}
}
class click02 implements Button.OnClickListener{
public void onClick(View v){
nm.setText("");
almt.setText(""); }
}
}
zenhadi@eepis-its.edu
5
INTERNET PROGRAMMING PENS
d. Buat file : hal2.java untuk memproses tampilan yang kedua
package pens.edu;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class hal2 extends Activity {
TextView dtnama, dtalamat;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.hal2);
dtnama = (TextView) findViewById (R.id.TextView01);
dtalamat = (TextView) findViewById (R.id.TextView02);
dtnama.setText(latGUI.nama);
dtalamat.setText(latGUI.alamat);
}
}
e. Edit file AndroidManifest.xml agar bisa interaksi 2 tampilan
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="pens.edu"
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="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".hal2"></activity>
</application>
<uses-sdk android:minSdkVersion="8" />
</manifest>
zenhadi@eepis-its.edu
6
INTERNET PROGRAMMING PENS
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 AndroidManifest.xml
Contoh tampilan :
a.HALAMAN PERTAMA
NB:
Pada halaman pertama, user akan memasukkan data Nama, Alamat dan Jenis Makanan
yang dipilih.
zenhadi@eepis-its.edu
7
INTERNET PROGRAMMING PENS
b. HALAMAN KEDUA
NB:
Pada halaman kedua, data pada halaman pertama akan ditampilkan dan user juga akan
diminta untuk memasukkan data minuman melalui komponen EditText.
c. HALAMAN KETIGA
NB:
Pada halaman ketiga, data pada halaman pertama dan kedua akan ditampilkan semua.
Dan ada tombol untuk kembali ke halaman pertama.
E. Laporan Resmi
Analisa dari program yang telah anda buat diatas.
zenhadi@eepis-its.edu
8
