TECHNICAL REPORT

PRAKTIKUM PEMROGRAMAN PERANGKAT BERGERAK

MODUL II
Aplikasi Android dengan Menggunakan Komponen Antarmuka, Huruf dan
Warna

Disusun Oleh :
TGL. PRAKTIKUM : 29 Maret 2017
NAMA : Yanuar Aliffio
NRP : 130411100006
KELOMPOK : B1
DOSEN : Yonathan Ferry Hendrawan, S.T.,
M.I.T.

TELAH DISETUJUI TANGGAL :

.
ASISTEN PRAKTIKUM

Mochammad Sodiqin
(130411100029)

LABORATORIUM TEKNOLOGI INFORMASI DAN APLIKASI

JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
2017
 TECHNICAL REPORT
PRAKTIKUM PEMROGRAMAN PERANGKAT BERGERAK
APLIKASI ANDROID DENGAN MENGGUNAKAN KOMPONEN
ANTARMUKA, HURUF DAN WARNA

A. PENDAHULUAN
Pada modul kedua ini, praktikan dikenalkan pada ruang lingkup
android serta struktur dasar dari android. Mempelajari komponen-komponen
android juga mempraktikkan secara langsung komponen-komponen
tersebut. Seperti label, button, text view dan sebagainya.
Oleh karena itu, praktikan diharuskan untuk mengeksplore lebih lagi
untuk mengetahui komponen-komponen android, serat mempraktikkan
secara langsung masing-masing komponen tersebut sehingga bisa
mengetahui fungsi dan kegunaan dari komponen tersebut.

B. DESKIPSI TUGAS PRAKTIKUM

Setelah mencoba membuat sebuah project yang terdapat pada modul,
praktikan diharuskan untuk memodifikasi program yang untuk mengerjakan
tugas praktikum. Tugas praktikum modul 2 pada praktikum ini adalah
sebagai berikut :
1. Sebut dan jelaskan macam-macam komponen GUI pada Android.
2. Beri contoh dalam bentuk XML dan tampilan grafis nya.
3. Modifikasi aplikasi sehingga kalimat yang ditampilkan bisa diubah
oleh pengguna

C. PENJELASAN PROGRAM
1. Komponen GUI pada android beserta source code dan tampilannya :
a) Label : label berfungsi untuk menuliskan sesuatu di frame yang kita
buat, nama default Jlabel.
Source code :
b) Button : Button digunakan untuk mengeksekusi sebuah perintah,
jika button di pencet maka proses akan berjalan, nama default
JButton.
Source code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yanuar.label.MainActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="250dp"
android:text="Login"
 android:layout_below="@+id/textView"
android:layout_centerHorizontal="true" />

</RelativeLayout>

c) Text Field : Text Field marupakan salah satu cara untuk

mengisikan suatu inputan dalam program, nama default JTextfield.
d) Text Area : Text Area biasanya digunakan untuk menampilkan hasil
output dari program, nama default JTextarea.
e) Combo box : Combo Box merupakan salah satu cara inputan juga.
jika combo box di pencet, maka akan keluar berbagai pilihan untuk
di proses, nama default JCombobox.
Source Code :
f) Radio button : Radio button juga salah satu cara inputan dalam
program, tetapi dalam penggunaannya berbeda dengan combo box,
radio button digunakan jika pilihan yang di sediakan sedikit, maka
akan lebih efektif jika menggunakan radio button, berbeda dengan
combo box yang hjerus click 2 kali untuk memilih, radio button
cukup sekali pilihan, dan hanya boleh satu pilihan yang di pilih,
maka digunakan radio button group agar hanya satu yang bisa di
pilih, nama default JRadiobutton.
Source code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid"
xmlns:app="http://schemas.android.com/apk/res-
auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yanuar.label.MainActivity">

<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes"
android:textAlignment="center"
android:textSize="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />

</RelativeLayout>
g) Check box : Check box juga merupakan salah satu cara inputan,
mirip dengan radio button, tetapi check box memperbolehkan user
untuk memilih lebih dari satu pilihan, jadi check box di gunakan
untuk menjawab petanyaan yang memperbolehkan lebih dari satu
jawaban, nama defaultnya jCheckbox.
Source code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid"
xmlns:app="http://schemas.android.com/apk/res-
auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yanuar.label.MainActivity">

<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="200dp"
android:text="Manager"
android:textAlignment="center"
android:textSize="30sp"></CheckBox>

<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="250dp"
android:text="Programmer"
android:textSize="30sp" >
</CheckBox>

</RelativeLayout>
2. Modifikasi Apps
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="67dp"
android:gravity="center"
android:textSize="25sp"
android:textStyle="bold" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="21dp"
android:gravity="center"
android:text="Change font size"
android:textSize="25sp"
 android:layout_below="@+id/editText"
android:layout_centerHorizontal="true" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:gravity="center"
android:text="Change color"
android:textSize="25sp"
android:layout_below="@+id/button1"
android:layout_centerHorizontal="true" />

</RelativeLayout>

MainActivity.java
package com.yanuar.label;

import android.support.v7.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

int ch = 1;
float font = 30;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText t = (EditText)
findViewById(R.id.editText);
Button b1 = (Button) findViewById(R.id.button1);
b1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
t.setTextSize(font);
font = font + 5;
if (font == 50)
font = 30;
}
});
Button b2 = (Button) findViewById(R.id.button2);
b2.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
switch (ch) {
 case 1:
t.setTextColor(Color.RED);
break;
case 2:
t.setTextColor(Color.GREEN);
break;
case 3:
t.setTextColor(Color.BLUE);
break;
case 4:
t.setTextColor(Color.CYAN);
break;
case 5:
t.setTextColor(Color.YELLOW);
break;
case 6:
t.setTextColor(Color.MAGENTA);
break;
}
ch++;
if (ch == 7)
ch = 1;
}
});
}
}