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 :

[email protected]
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>

[email protected]
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");
}
}
}

[email protected]
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>

[email protected]
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(""); }
}
}
[email protected]
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>

[email protected]
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.

[email protected]
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.

[email protected]
8