8

Modul

2
WIDGET
Tujuan

Praktikan diharapkan dapat menggunakan Android Studio untuk membuat program sederhana pada
smartphone/ emulator. Di akhir praktikum ini, praktikan diharapkan:

• Mahasiswa mampu memahami komponen Widget

• Mahasiswa mampu menerapkan komponen Widget

• Mahasiswa mampu menerapkan penggunaan Widget pada tampilan antarmuka

Persiapan
1. Buku ajar (jika ada)/diktat kuliah/materi dari sumber lain
2. Alat tulis
3. Kertas Buram
4. Lembar jawaban
5. Lembar penilaian (disiapkan oleh asisten)
6. Komputer yang sudah di-install Android Studio & Emulator didalamnya
7. Android Smartphone (Jika tidak menginstall emulator)

Materi Pokok
Praktikum ini mengasumsikan bahwa praktikan telah mempelajari macam-macam widget pada
Android. Praktikum ini mengasumsikan bahwa mahasiswa telah mempelajari berbagai jenis dan
komponen widget dengan benar beserta dengan cara-cara penginputan datan dan pemasangannya.
Praktikan diharapkan mampu menggunakan setiap widget yang dipilih/digunakan dalam program.
Selain itu praktikan diharapkan mampu mengombinasikan berbagai komponen widget yang dapat
digunakan untuk setiap widget tersebut. Agar mahasiswa dapat mencapai tujuan dalam pertemuan
praktikum ketiga ini, mahasiswa harus aktif dalam membuat program dan menyelesaikan setiap
kasus serta mencoba mempraktekkan tugas-tugas dalam praktikum ini.
 9

Proses
Praktikan membuat sebuah project atau menyelesaikan sebuah studi kasus yang berhubungan
dengan widget dan bisa melakukan pemasangannya, kemudian mahasiswa dapat menggunakan
komponen-komponen widget untuk melakukan proses penginputan maupun pengeluaran data dan
mempelajari struktur komponen widget dalam program Java Android dengan melihat source code
program Java, kemudian berdiskusi sesuai dengan panduan aktifitas yang ada. Sedangkan waktu
untuk mengerjakan project (membuat program/coding) secara individual harus diselesaikan di
dalam laboratorium dalam waktu 40 menit. Berikutnya untuk sesi latihan, ada soal tentang
pengembangan program yang juga harus diselesaikan di laboratorium dalam waktu 60 menit.
Terakhir adalah bagian tugas, yaitu project yang dikerjakan dirumah dan wajib dikumpulkan pada
pertemuan berikutnya.

Aktivitas
1. Mahasiswa membaca buku ajar (jika ada)/ diktat kuliah/materi dari sumber lain tentang Widget
/ widget view sebagai materi bab kedua. Temukan bagian penting dalam topik Komponen Dasar
Swing ini, kemudian tulis sebagai ringkasan hasil belajar.
2. Widget merupakan tampilan aplikasi mini yang dapat disematkan dalam aplikasi lain (seperti
Layar utama) dan menerima update berkala. Tampilan ini disebut sebagai Widget dalam
antarmuka pengguna, dan Anda dapat memublikasikannya dengan penyedia Widget Aplikasi.
3. Berikut adalah beberapa komponen dari widget pada pemrograman perangkat bergerak:

Komponen widget antara lain :

● TextView
● EditText
● Button

4. Berikut adalah Langkah-langkah membuat projek menggunakan widget pada android:

Basic Widget Android

● Buatlah projek baru dengan mengikuti Langkah-langkah yang sudah dipelajari

dalam modul 1.
● Sesuaikan kode berikut kedalam activity_main.xml

activity_main.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btnSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save" />
<Button
android:id="@+id/btnOpen"
android:layout_width="wrap_content"
 10

android:layout_height="wrap_content"
android:text="Open" />
<ImageButton
android:id="@+id/img1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background" />
<EditText
android:id="@+id/txtName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<CheckBox
android:id="@+id/chkAutoSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AutoSave" />
<CheckBox
android:id="@+id/star"
style="?android:attr/starStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioGroup
android:id="@+id/rdGp1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RadioButton
android:id="@+id/rdb1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Option1" />
<RadioButton
android:id="@+id/rdb2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Option2" />
</RadioGroup>
<ToggleButton
android:id="@+id/toggle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

● Langkah ketiga, sesuaikan kode berikut dengan MainActivity.java yang secara

otomatis dibuat ketika projek dibuat.

MainActivity.java
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
 11

setContentView(R.layout.activity_main);
//button view
Button btnOpen = (Button) findViewById(R.id.btnOpen);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast("You have click the Open button");
}
});
Button btnSave = (Button) findViewById(R.id.btnSave);
btnSave.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast("You have click the Save Button");
}
});
CheckBox checkBox = (CheckBox)findViewById(R.id.chkAutoSave);
checkBox.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if (((CheckBox)v).isChecked())
DisplayToast("Chekbox is checked");
else
DisplayToast("Checkbox is unchecked");
}
});
RadioGroup radioGroup =(RadioGroup)findViewById(R.id.rdGp1);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group,int checkedId) {
RadioButton rb1 = (RadioButton)findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast("Option 1 is checked");
}
else{
DisplayToast("Option 2 is checked");
}
}
});
ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle1);
toggleButton.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((ToggleButton)v).isChecked())
DisplayToast("Toggle button is On");
else
DisplayToast("Toggle button is Off");
}
});
}
private void DisplayToast(String msg) {
Toast.makeText(getBaseContext(), msg, Toast.LENGTH_SHORT).show();
}
}
 12

● Bila sudah selesai menyesuaikan semua kode, coba jalankan projek dan hasil dari
tampilan utamanya akan menjadi seperti berikut,

GridView Menggunakan Image

● Buat projek android baru seperti biasa

● Siapkan 6 file image berukuran 100x100 pixel (Gambar Bebas), yang nantinya akan
digunakkan untuk demo galeri foto pada gridview.
● Copy/Cut file image kedalam folder /res/drawable.
● Sesuaikan nama dan format file image dengan contoh berikut,

● Langkah berikutnya, buatlah sebuah file .xml bernama cell.xml kedalam folder
/res/drawable dengan mengikuti Langkah-langkahnya seperti berikut,
⮚ Klik kanan folder drawable dan pilih New -> Drawable Resources File.

⮚ Setelah itu kita akan diarahkan ke halaman pop-up untuk konfigurasi file
.xml yang akan dibuat. Beri nama cell.xml untuk projek kita dan klik OK.
 13

● Jika sudah selesai dibuat, sesuaikan kode didalam cell.xml seperti berikut,

cell.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="88dp"
android:layout_height="122dp"
android:layout_gravity="center_horizontal" />
<TextView
android:id="@+id/keterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="keterangan" />
</LinearLayout>

● Sesuaikan juga kode pada activity_main.xml seperti berikut,

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<GridView
android:id="@+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dip"
android:gravity="center"
android:horizontalSpacing="5dip"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="40dip" />
</LinearLayout>
 14

● Yang terakhir, sesuaikan kode pada MainActivity.java untuk menghandle layout

dan gridview didalamnya.

MainActivity.java
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements

AdapterView.OnItemClickListener {
// data buku
private static final String[] items = { "buku 1", "buku 2", "buku 3",
"buku 4", "buku 5", "buku 6" };
// gambar buku
private int[] imageID = { R.drawable.c1, R.drawable.c2, R.drawable.c3,
R.drawable.c4, R.drawable.c5, R.drawable.c6 };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView g = (GridView) findViewById(R.id.grid);
// set adapter gridview
g.setAdapter(new IconAdapter());
// beri action saat click
g.setOnItemClickListener((AdapterView.OnItemClickListener) this);
}

private class IconAdapter extends ArrayAdapter<String> {

// konstruktor memanggil method super() dari class parent nya
public IconAdapter() {
super(MainActivity.this, R.layout.cell, items);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// instansiasi row dari convertView
View row = convertView;
if (row == null) {
// inflate layout
LayoutInflater inflater = getLayoutInflater();
row = inflater.inflate(R.layout.cell, parent, false);
}
ImageView imageView = (ImageView) row.findViewById(R.id.imageView1);
TextView keterangan = (TextView) row.findViewById(R.id.keterangan);
// set skala gambar
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
// set keterangan dan gambar berdasarkan position
keterangan.setText(items[position]);
imageView.setImageResource(imageID[position]);
// kembalikan objek view
return row;
}
}
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int p, long arg3) {
//tampilkan pesan pop up saat click.
Toast.makeText(MainActivity.this,
items[p] + " clicked!", Toast.LENGTH_SHORT).show();
}
}
 15

● Jalankan proyek dan hasilnya adalah sebagai berikut,

DateTimePicker dan Splash Screen

● Buat projek baru seperti biasa

● Siapkan juga sebuah file image untuk dijadikan SplasScreen nantinya didalam file
drawable. (Didalam contoh ini, file image bernama kk.jpg)
● Buatlah sebuah empty activity baru dengan mengikuti Langkah-langkah sebagai
berikut,
⮚ Klik kanan pada folder package kita dan pilih
New->Activity->Empty Activity
 16

⮚ Selanjutnya kita akan diarahkan ke halaman pop-up untuk konfigurasi

empty activity yang akan dibuat, sesuaikan konfigurasinya seperti contoh
ini

● Setelah selesai membuat activity baru, AS akan membuat 2 file baru yaitu
activity_splash.xml dan Splash.java secara otomatis.
● Buka activity_splash.xml dan sesuaikan kodenya menjadi seperti berikut

activity_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/kk" >
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="164dp" />
</RelativeLayout>

● Sesuaikan juga activity_main.xml menjadi seperti berikut

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="@+id/editTextTanggal"
 17

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="Tanggal" >
<requestFocus />
</EditText>

<EditText
android:id="@+id/editTextJam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editTextTanggal"
android:layout_marginTop="17dp"
android:ems="10"
android:hint="Jam" />
</RelativeLayout>

● Sesuaikan juga kode pada Splash.java menjadi seperti ini

Splash.java
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;

public class Splash extends Activity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.splash);
Thread timer = new Thread()
{
public void run()
{
try {
sleep(4000);
}
catch (InterruptedException e) {
e.printStackTrace();
}
finally {
finish();
Intent m = new Intent(Splash.this, MainActivity.class);
startActivityForResult(m,0);
}
}
};
timer.start();
}
}

● Buka kelas MainActivity.java dan sesuaikan kodenya

MainActivity.java
import androidx.appcompat.app.AppCompatActivity;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
 18

import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

private EditText edtTanggal, edtJam;

int hari, bulan, tahun, jam, menit;
private String[] arrBulan = { "Januari", "Februari", "Maret", "April",
"Mei", "Juni", "Juli", "Agustus", "September", "Oktober",
"November", "Desember" };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Calendar c = Calendar.getInstance();
hari = c.get(Calendar.DAY_OF_MONTH);
bulan = c.get(Calendar.MONTH);
tahun = c.get(Calendar.YEAR);
edtTanggal = (EditText) findViewById(R.id.editTextTanggal);
edtJam = (EditText) findViewById(R.id.editTextJam);
edtTanggal.setOnTouchListener(new View.OnTouchListener() {
@SuppressWarnings("deprecation")
@Override
public boolean onTouch(View v, MotionEvent event) {
showDialog(0);
return true;
}
});
edtJam.setOnTouchListener(new View.OnTouchListener() {
@SuppressWarnings("deprecation")
@Override
public boolean onTouch(View v, MotionEvent event) {
showDialog(1);
return true;
}
});
}

public Dialog onCreateDialog(int id) {

switch (id) {
case 0:
return new DatePickerDialog(this,
mDateSetListener, tahun, bulan, hari);
case 1:
return new TimePickerDialog(this,
mTimeSetListener, jam, menit, true);
}
return null;
}
public DatePickerDialog.OnDateSetListener mDateSetListener = new
DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
tahun = year;
bulan = monthOfYear;
hari = dayOfMonth;
String sdate = LPad(hari + "", "0", 2)
+ " " + arrBulan[bulan] + " " + tahun;
edtTanggal.setText(sdate);
}
};
public TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay, int
minuteOfHour) {
jam = hourOfDay;
menit = minuteOfHour;
String stime = LPad("" + jam, "0", 2) + ":"
 19

+ LPad("" + menit, "0", 2);

edtJam.setText(stime);
}
};
public static String LPad(String schar, String spad, int len) {
String sret = schar;
for (int i = sret.length(); i < len; i++) {
sret = spad + sret;
}
return new String(sret);
}
}

● Lalu yang terdapat file penting yang harus disesuaikan juga yaitu
AndroidManifest.xml dimana kita perlu membuat activity Splash untuk berjalan
pertama kali ketika aplikasi dibuka.

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.elreginaldcaesarosan.uas.latihampertemuan2_3">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".Splash">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
<activity android:name=".MainActivity"></activity>
</application>

</manifest>

● Coba jalankan projek dan hasilnya akan menjadi seperti ini

 20

Membuat ListActivity

● Buat projek baru seperti biasanya

● Ubah file layout activity_main.xml dengan kode berikut,

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--List View -->
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="17dp"
android:id="@+id/list_view"
/>
<TextView
android:text="Pilih Mata Kuliah :"
android:textStyle="bold"
android:layout_marginBottom="16dp"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:id="@+id/textView"/>
</RelativeLayout>

● Lalu sesuaikan kode MainActivity.java menjadi seperti ini

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private ListView lvItem;
private String[] MataKuliah = new String[]{
"Kalkulus","Jaringan Komputer","Pemrograman Mobile" ,
"Sistem Operasi", "Basis Data", "Etika Komputer",
"Information Retrieval","Pengolahan Citra Digital",
"Artificial Inteligence","Pemrograman Web lanjut"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("ListView Sederhana");
getSupportActionBar().setSubtitle("Jadwal Mata Kuliah");
lvItem = (ListView) findViewById(R.id.list_view);
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(MainActivity.this,
android.R.layout.simple_list_item_1, android.R.id.text1,
MataKuliah);
lvItem.setAdapter(adapter);
lvItem.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
 21

@Override
public void onItemClick(AdapterView<?> parent, View view, int
position, long id) {
Toast.makeText(MainActivity.this, "Memilih : "
+ MataKuliah[position], Toast.LENGTH_LONG).show();
}
});
}
}

● Jalankan projeknya dan hasilnya akan menjadi seperti berikut

Latihan
Buatlah sebuah list bertingkat dengan tingkatan sebagai berikut,
List Genre Buku -> GridView Buku sesuai genre yang dipilih -> Detail Buku
 22

Penutup
Tugas
Buatlah sebuah aplikasi untuk menghitung BP (Battle Power) dari Hero yang kalian inputkan dengan
tampilan sebagai berikut!

Petunjuk :

1. Buat Layar menggulung atau scroll

2. Tampilkan gambar sesuai dengan kelasnya (6 Gambar)
3. Tabel Rating

4. Nilai rating item :

● Attack Box : +10000
● Defense Box : +8000
● ASPD Box : +5000
● HP Box : +12000
5. Total Rate BP (Battle Power) = R. Hero + R. Kelas + R. Item
6. Isi kelas Hero harus sesuai dengan Hero yang dipilih!: