Modul Praktikum Pemrograman Android

2015

MODUL 4. ANDROID BASIC WIDGET (1) :

RADIO BUTTON
4.1.

Tujuan

1. Mengenalkan kepada mahasiswa konsep umum Android.

2. Mahasiswa dapat memahami Android Widget yaitu radio button.
3. Mahasiswa dapat membuat program Android dengan radio button.

4.2.

DASAR TEORI

Android memiliki standard toolbox Views untuk membantu anda merancang

sebuah tampilan sederhana. Beberapa toolbox yang sering digunakan dalam
merancang sebuah tampilan program di Android seperti berikut ini :
RadioButton = Tombol-tombol yang ditampilkan secara group, biasanya
digunakan untuk user memilih salah satu dari tombol yang ada pada
RadioButton tersebut. Pada radioButton, hanya satu yang boleh aktif
(mutual exclusive) di dalam satu group yang disebut radioGroup.
TextView = TextView merupakan teks yang hanya bisa dibaca (read only)
atau jika kita terbiasa membuat sebuah aplikasi desktop menggunakan
Java atau VB, TextView dapat disamakan dengan Label.
EditText = Digunakan untuk memasukan data, sehingga user dapat
menuliskan suatu nilai kedalam EditText tersebut.
ListView = Digunakan untuk menampilkan item didalam list.
Button = Tombol yang biasanya digunakan untuk eksekusi perintah.
CheckBox = Tombol yang merepresentasikan apakah terpilih (checked)
atau tidak (unchecked).

4.3.

PELAKSANAAN PRAKTIKUM

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Setiya Nugroho, M.Eng

:
:
:
:
:

Radio Button 4
RadioButto4
com.radiobutton4
8
Android 2.2
Page 1

Modul Praktikum Pemrograman Android

Activity Name
Layout Name

:
:

2015

RadioButton4
main

3. Modifikasi layout di activity_main.xml menjadi seperti dibawah ini :

<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pilih Bahasa Pemrograman"
android:textSize="20dp"
android:textStyle="bold"
android:typeface="serif" />
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android" />
<RadioButton
android:id="@+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java" />
<RadioButton
android:id="@+id/rb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Php" />
<Button
android:id="@+id/pilih"
android:layout_width="288dp"
android:layout_height="wrap_content"
android:text="Pilih"
android:textStyle="bold" />
<TextView
android:id="@+id/hasil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textStyle="bold" />
</LinearLayout>

4. Ketiklah kode RadioButton4.java seperti berikut :

package com.example.radiobutton4;
import android.os.Bundle;
import android.view.View;

Setiya Nugroho, M.Eng

Page 2

Modul Praktikum Pemrograman Android

import
import
import
import
import
public

2015

android.view.View.OnClickListener;
android.widget.Button;
android.widget.RadioButton;
android.widget.TextView;
android.app.Activity;
class RadioButton4 extends Activity {
RadioButton android, java, php;
TextView hasil;
private String pilih;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
android = (RadioButton) findViewById(R.id.rb1);
java = (RadioButton) findViewById(R.id.rb2);
php = (RadioButton) findViewById(R.id.rb3);
hasil = (TextView) findViewById(R.id.hasil);
Button pilihan = (Button) findViewById(R.id.pilih);
pilihan.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (android.isChecked()) { pilih = "Andorid";
} else if (java.isChecked()) { pilih = "Java";
} else if (php.isChecked()) { pilih = "php";
}
hasil.setText(pilih);
android.setChecked(false);
java.setChecked(false);
php.setChecked(false);
}
});
}

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 4.1 berikut :

Gambar 4.1 : Tampilan Radio Button 1

Setiya Nugroho, M.Eng

Page 3

Modul Praktikum Pemrograman Android

4.4.

2015

Latihan

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Skenarionya ada 5 buah Radio Button masing masing diberi teks Horizontal,
Vertical, Kanan, Tengah, dan Kiri. Jika salah satu Radio Button dipilih, maka
susunan Radio Button akan berubah sesuai pilihannya.
Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Activity Name
Layout Name

:
:
:
:
:
:
:

Radio Button 2
RadioButton2
com.radiobutton2
8
Android 2.2
RadioButton
main

3. Modifikasi layout di main.xml menjadi seperti dibawah ini :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/orientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5px" >
<RadioButton
android:id="@+id/horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horizontal" >
</RadioButton>
<RadioButton
android:id="@+id/vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical" >
</RadioButton>
</RadioGroup>
<RadioGroup
android:id="@+id/gravity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5px" >

Setiya Nugroho, M.Eng

Page 4

Modul Praktikum Pemrograman Android

2015

<RadioButton
android:id="@+id/kanan"
android:text="Kanan" >
</RadioButton>
<RadioButton
android:id="@+id/kiri"
android:text="Kiri" >
</RadioButton>
<RadioButton
android:id="@+id/tengah"
android:text="Tengah" >
</RadioButton>
</RadioGroup>
</LinearLayout>

Gambar 4.2. Letak layout main.xml dalam package

4. Ketiklah kode RadioButton.java seperti berikut :

package com.radiobutton;
import
import
import
import
import
public

android.app.Activity;
android.os.Bundle;
android.view.Gravity;
android.widget.LinearLayout;
android.widget.RadioGroup;
class RadioButton extends Activity implements
RadioGroup.OnCheckedChangeListener {
/** Called when the activity is first created. */
RadioGroup orientation;
RadioGroup gravity;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
orientation = (RadioGroup)

Setiya Nugroho, M.Eng

Page 5

Modul Praktikum Pemrograman Android

2015

findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity = (RadioGroup) findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(RadioGroup group, int checkId) {
switch (checkId) {
case R.id.horizontal:
orientation.setOrientation(LinearLayout.HORIZONTAL);
break;
case R.id.vertical:
orientation.setOrientation(LinearLayout.VERTICAL);
break;
case R.id.kiri:
gravity.setGravity(Gravity.LEFT);
break;
case R.id.tengah:
gravity.setGravity(Gravity.CENTER);
break;
case R.id.kanan:
gravity.setGravity(Gravity.RIGHT);
break;
}
}
}

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 4.3 berikut :

(a)
(b)
Gambar 4.3. (a) Kombinasi tampilan secara vertivcal dengan rata kanan
(b) Kombinasi tampilan horizontal dengan center

Setiya Nugroho, M.Eng

Page 6

Modul Praktikum Pemrograman Android

4.5.

2015

Tugas

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Activity Name
Layout Name

:
:
:
:
:
:
:

Radio Button 5
RadioButton5
com.radiobutton5
8
Android 2.2
RadioButton5
main

3. Modifikasi layout di main.xml menjadi seperti dibawah ini :

<LinearLayout
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:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pilih warna teks"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/rb_merah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Merah" />
<RadioButton
android:id="@+id/rb_hijau"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hijau" />
<RadioButton
android:id="@+id/rb_biru"
android:layout_width="match_parent"

Setiya Nugroho, M.Eng

Page 7

Modul Praktikum Pemrograman Android

2015

android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Biru" />
</RadioGroup>
<TextView
android:id="@+id/txt_tampil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"
android:gravity="center"
android:text="Prak.Mobile Fasilkom Unwidha"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

4. Modifikasi file RadioButton5.java menjadi seperti berikut :

package com.radiobutton5;
import
import
import
import
import
import

android.os.Bundle;
android.app.Activity;
android.graphics.Color;
android.view.View;
android.widget.RadioButton;
android.widget.TextView;

public class RadioButton5 extends Activity implements View.OnClickListener

{
private RadioButton rb_merah, rb_hijau, rb_biru;
private TextView txt_tampil;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
rb_merah = (RadioButton) findViewById(R.id.rb_merah);
rb_hijau = (RadioButton) findViewById(R.id.rb_hijau);
rb_biru = (RadioButton) findViewById(R.id.rb_biru);
txt_tampil = (TextView) findViewById(R.id.txt_tampil);
rb_merah.setOnClickListener(this);
rb_hijau.setOnClickListener(this);
rb_biru.setOnClickListener(this);
txt_tampil.setTextColor(Color.WHITE);
}
public void onClick(View v) {
switch (v.getId()) {

Setiya Nugroho, M.Eng

Page 8

Modul Praktikum Pemrograman Android

2015

case R.id.rb_merah:
txt_tampil.setTextColor(Color.RED);
break;
case R.id.rb_hijau:
txt_tampil.setTextColor(Color.GREEN);
break;
case R.id.rb_biru:
txt_tampil.setTextColor(Color.BLUE);
break;
}
}
}

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 4.4 berikut :

Gambar 4.4 : Tampilan Radio Button 3

Setiya Nugroho, M.Eng

Page 9