Mulai minggu ke-2 sesi 2, mahasiswa akan melakukan praktikum PAM yang dibagi ke dalam dua bagian, yaitu:

(1)

Mata Kuliah : IF330324-IF430324 Pembangunan Aplikasi Mobile

Semester : 2 (Genap)

Topik : Pengenalan Layout dan Input Controls Tanggal Sesi : 7 Maret 2017

Minggu ke-/sesi : 5/2

Waktu pengerjaan : 2x50 menit

Aktifitas : Mahasiswa menggunakan layout dan input controls untuk Android Setoran : Folder hasil pengerjaan bagian DELIVERABLES pada petunjuk

praktikum yang telah dikompres menjadi file dengan tipe .zip/.rar.

Batas penyerahan : Minggu, 12 Maret 2017 via Moodle Pukul 21.30 WIB

Tujuan praktikum : Mahasiswa mampu memahami dan menggunakan layout dan input

controls

Sarana : Android Studio

Jenis kegiatan : Praktikum

Mulai minggu ke-2 sesi 2, mahasiswa akan melakukan praktikum PAM yang dibagi ke dalam dua bagian, yaitu:

1. Mengikuti langkah-langkah praktikum untuk mengulas atau memperkuat kemampuan teknis mahasiswa yang didasarkan pada materi yang diajarkan pada kelas teori atau materi yang menjadi pelengkap atau tambahan dari materi yang telah disampaikan pada kelas teori.

2. Mengerjakan bagian deliverables pada dokumen praktikum untuk kemudian disetor via Moodle. Tugas yang diberikan tersebut harus dikerjakan dan disetor sesuai dengan waktu deadline yang diberikan. Pembeda bagian ini dengan praktikum yang telah dilakukan sebelumnya adalah mahasiswa diharapkan akan menghasilkan sebuah aplikasi yang utuh yang akan dikumpulkan pada minggu ke-14 masa perkuliahan PAM. Deskripsi aplikasi yang akan dibangun dijelaskan pada bagian deliverables. Mahasiswa diharapkan akan membangun komponen atau bagian-bagian dari aplikasi tersebut secara bertahap setiap minggu, sesuai dengan topik praktikum yang sedang diberikan pada setiap sesi.

BAGIAN I: LANGKAH-LANGKAH PRAKTIKUM

Pada praktikum ini kita akan mempelajari cara membuat beberapa jenis layout yang berperan sebagai container bagi view object lainnya, semisal TextView, EditText, Button, dan lainnya.

Selain itu kita sekaligus akan mempraktekkan penggunaan String. Tidak semua jenis layout akan tercakup dalam sesi ini, oleh karena itu, anda sangat disarankan untuk mencoba jenis layout lainnya secara mandiri.

LAYOUT

Pada praktikum ini, Anda akan diperkenalkan tiga jenis layout, yaitu Linear Layout, Relative Layout dan Table Layout .

1. Buat sebuah project beri nama Resouces_nimlengkap, pilih Empty Activity beri

nama MainActivity.

(2)

2. Layout yang pertama adalah Relative Layout. Tambahkan sebuah Empty Activity beri

nama RelativeLayoutActivity. Ubah file

activity_relative_layout.xml seperti contoh code dibawah ini

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.laborawatyr.test.RelativeLayout">

<EditText

android:id="@+id/name"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:hint="@string/reminder" />

<Spinner

android:id="@+id/day"

android:layout_width="0dp"

android:layout_alignParentLeft="true"

android:layout_below="@id/name"

android:layout_toLeftOf="@+id/times"

android:entries="@array/array_days" />

<Spinner

android:id="@id/times"

android:layout_alignParentRight="true"

android:layout_below="@id/name"

android:entries="@array/array_times" />

<Button

android:layout_alignParentRight="true"

android:layout_below="@id/times"

android:text="@string/done" />

</RelativeLayout>

3. Kita menggunakan sebuah tipe kelas

Spinner

untuk menampilkan input component berupa dropdown list (atau sering disebut juga dengan combo box). Untuk dapat menggunakannya, kita dapat mendefinisikan (mempopolasi) data yang akan menjadi tampilan dengan menambahkan

attribute android:entries

pada konfigurasi komponen, selain itu kita juga perlu mendeklarasikan string values yang akan menjadi item value bagi komponen

Spinner

. Untuk mendeklarasikan string values, modifikasi dan tambahkan deklarasi berikut ke dalam file

string.xml

:

<string-array name="array_days">

<item>Sunday</item>

<item>Monday</item>

(3)

<item>Tuesday</item>

<item>Wednesday</item>

<item>Thursday</item>

<item>Friday</item>

<item>Saturday</item>

</string-array>

<string-array name="array_times">

<item>ones</item>

<item>twice</item>

<item>three times</item>

<item>four times</item>

<item>five times</item>

</string-array>

4. Layout yang kedua adalah Linear Layout. Buatlah sebuah empty activity baru dengan nama

LinearLayoutActivity

dan ubahlah activity_linear_layout.xml seperti contoh dibawah ini.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="fill_parent"

android:orientation="vertical"

android:paddingLeft="16dp"

android:paddingRight="16dp" >

<EditText

android:id="@+id/name"

android:hint="@string/name" />

<EditText

android:id="@+id/student_number"

android:hint="@string/student_number"

android:inputType="text"/>

<EditText

android:id="@+id/email"

android:hint="@string/email"

android:inputType="textEmailAddress"/>

<Button

android:id="@+id/register"

(4)

android:layout_gravity="right"

android:text="@string/register" />

</LinearLayout>

5. Layout yang ketiga adalah Table Layout. Buatlah sebuah empty activity baru dengan nama

TableLayoutActivity

dan ubahlah activity_.xml seperti contoh dibawah ini.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/table_layout"

android:layout_height="fill_parent" >

<TableRow

android:id="@+id/table_row_1"

android:layout_width="wrap_content"

android:padding="5dip" >

<TextView

android:id="@+id/textView1"

android:text="Column 1" />

<Button

android:id="@+id/button1"

</TableRow>

<TableRow

android:id="@+id/tableRow2"

<EditText

android:id="@+id/editText1"

android:layout_span="2"

android:text="Column 1 & 2" />

</TableRow>

<View

android:layout_height="2dip"

android:background="#FF0000" />

(5)

<TableRow

<TextView

android:id="@+id/textView2"

<Button

</TableRow>

<TableRow

<Button

android:layout_column="2"

</TableRow>

<TableRow

<Button

android:layout_column="1"

</TableRow>

</TableLayout>

Sangat disaranan bagi anda untuk memahami karakteristik layout jenis ini.

6. Run activity satu per satu.

(6)

GRIDLAYOUT

Materi ini akan memperkenalkan Gridview, layout yang dapat digunakan untuk menampilkan data dalam two-dimensional, scrollable grid

¹

. Pada kelas teori dan praktikum minggu ke-6, Anda akan diperkenalkan dengan Listview dan cara penggunaannya. Pada langkah-langkah praktikum berikut ini, Anda akan menghasilkan aplikasi Android dengan tampilan seperti pada gambar berikut ini:

Gambar 1 Contoh Gridview

7. Buat sebuah project beri nama Grid_nimlengkap, pilih Empty Activity beri nama MainActivity.

8. Unduh file kompresi berisi contoh gambar dengan nama sample_images.zip dari CIS. Ekstrak isi file tersebut dan simpan file gambar ke folder res/drawable/

proyek Anda.

9. Untuk membuat layout dari menu, modifikasi file

res/layout/main.xml

tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/gridview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:columnWidth="90dp"

android:numColumns="auto_fit"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

1 Materi praktikum terkait Gridview diambil dari situs Android Developer dengan link http://developer.android.com/guide/topics/ui/layout/gridview.html.

(7)

android:stretchMode="columnWidth"

android:gravity="center"

/>

Gridview ini akan memenuhi layar. Atribut-atribut pembuatan gridview ini sangat self explanatory, jadi Anda dapat mempelajarinya sendiri.

10. Buka file MainActivity.java dan tuliskan kode berikut pada onCreate() method:

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

GridView gridview = (GridView) findViewById(R.id.gridview);

gridview.setAdapter(new ImageAdapter(this));

//event handling untuk gridview

gridview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

//untuk menampilkan pesan singkat pada pengguna Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();

} });

}

11. Buatlah sebuah kelas baru bernama ImageAdapter yang meng-extend kelas BaseAdapter.

//kelas ini berfungsi untuk menyimpan daftar images untuk nantinya dilewatkan

//satu per satu ke gridview untuk ditampilkan public class ImageAdapter extends BaseAdapter { private Context mContext;

public ImageAdapter(Context c) { mContext = c;

}

public int getCount() { return mThumbIds.length;

}

public Object getItem(int position) { return null;

}

public long getItemId(int position) { return 0;

}

(8)

// create a new ImageView for each item referenced by the Adapter public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView;

if (convertView == null) {

// if it's not recycled, initialize some attributes imageView = new ImageView(mContext);

imageView.setLayoutParams(new GridView.LayoutParams(85, 85));

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setPadding(8, 8, 8, 8);

} else {

imageView = (ImageView) convertView;

}

imageView.setImageResource(mThumbIds[position]);

return imageView;

}

// references to our images private Integer[] mThumbIds = {

R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };

}

12. Run aplikasi tersebut.

Input Controls

CheckBox

1. Buat sebuah project beri nama UI_nimlengkap, pilih Empty Activity beri nama MainActivity.

2. Buka file

res/layout/main.xml

, ketikan kode berikut:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:orientation="vertical"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

>

<TextView android:id="@+id/opsi"

android:layout_height="wrap_content"

android:background="#ff0000cc"

android:textStyle="bold"

(9)

android:text="@string/teks"

android:onClick="@string/hasil"/>

<CheckBox android:id="@+id/cbMK1"

android:layout_width="wrap_content"

android:text="@string/MK1"/>

<Button android:id="@+id/btnHasil"

android:text="@string/submit"

android:onClick="@string/hasil"

android:layout_height="wrap_content"/>

<TextView android:id="@+id/lblHasil"

android:text="@string/output"

</LinearLayout>

3. Buka file

string.xml

tambahkan kode berikut :

<string name="app_name">W03S03_CheckBox</string>

<string name="action_settings">Settings</string>

(10)

<string name="teks">Coba CheckBox</string>

<string name="hasil">klikHasil</string>

<string name="submit">Submit</string>

<string name="output">Mata Kuliah yang dipilih :</string>

<string name="MK1">Bahasa Inggris VI</string>

<string name="MK2">Tugas Akhir II</string>

<string name="MK3">Kerja Praktek</string>

<string name="MK4">Komputer dan Masyarakat</string>

<string name="MK5">Mobile Computing</string>

<string name="MK6">Pancasila dan Kewarganegaraan</string>

<string name="MK7">Topik Khusus</string>

</resources>

4. Buka file

MainActivity.java

, tambahkan kode berikut sebelum class

MainActivity

:

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.widget.CheckBox;

import android.widget.TextView;

5. Tambahkan kode berikut diluar method

onCreate()

//findViewById digunakan untuk menghubungkan input controls yang sudah //dideklarasikan pada file XML layout terkait dengan sebuah instans dari //jenis input controls tersebut pada program Java.

//Dengan demikian, program Java dapat bekerja dengan komponen UI tersebut

public void klikHasil(View v){

TextView lblHasil = (TextView) findViewById(R.id.lblHasil);

CheckBox cbMK1=(CheckBox) findViewById(R.id.cbMK1);

String str="";

if(cbMK1.isChecked()){

str = str +"Bahasa Inggris VI ";

}

str = str +"Tugas Akhir II ";

}

str = str +"Kerja Praktek ";

}

str = str +"Komputer dan Masyarakat ";

}

str = str +"Mobile Computing ";

}

str = str +"Pancasila dan Kewarganegaraan ";

}

(11)

str = str +"Topik Khusus ";

}

lblHasil.setText(str);

}

6. Run aplikasi tersebut dan hasilnya adalah sebagai berikut:

Date Time Picker

1. Tambahkan sebuah Activity beri nama ActDatePicker dengan file layout bernama

actdatepicker.xml

.

2. Buka file

actdatepicker.xml

, ketikan kode berikut:

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent">

<TextView android:id="@+id/lblDate"

android:text="@string/date"

android:textStyle="bold"/>

<DatePicker

<TextView android:id="@+id/lbltime"

android:text="@string/time"

android:textStyle="bold"/>

(12)

<TimePicker

</LinearLayout>

3. Buka file

string.xml

tambahkan kode berikut :

<string name="app_name">DateTimePicker</string>

<string name="date">Tanggal</string>

<string name="time">Pukul</string>

</resources>

4. Tambahkan pendeklarasian berikut sebelum method onCreate().

static final int TIME_DIALOG_ID=0;

5. Run aplikasi tersebut.

6. Eksplorasi tampilan project anda dengan menambahkan

ScrollView

pada tampilan calendar.

Spinner

1. Tambahkan sebuah Activity beri nama ActSpinner dengan file layout bernama

actspinner.xml

.

2. Buka file

actspinner.xml

, ketikan kode berikut:

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

>

<TextView android:id="@+id/lblPilih"

android:text="@string/pilih"

android:background="#ff0033cc"

android:textSize="14pt"

android:textStyle="bold"

/>

<Spinner android:id="@+id/spnPilih"

/>

</LinearLayout>

3. Buka file

String.xml

dan tambahkan kode berikut

(13)

<string name="app_name">W03S03_Spinner</string>

<string name="pilih">Pilih salah satu mata kuliah berikut ini:</string>

</resources>

4. Buka file

ActSpinner.java

, tambahkan kode berikut sebelum class

ActSpinner:

import android.widget.Spinner;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.AdapterView.OnItemSelectedListener;

5. Tambahkan kode berikut pada

ActSpinner.java

public class ActSpinner extends Activity implements OnItemSelectedListener{

String[] items ={"Bahasa Inggris VI","Tugas Akhir II","Kerja Praktek","Komputer dan Masyarakat","Mobile Computing","Pancasila dan Kewarganegaraan","Topik Khusus"};

private TextView pilihan;

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.actspinner);

pilihan=(TextView) findViewById(R.id.lblPilih);

Spinner spin=(Spinner) findViewById(R.id.spnPilih);

spin.setOnItemSelectedListener(this);

//Bagian yang menyebutkan desain tampilan yang akan digunakan //oleh Spinner dan data yang akan digunakan oleh Spinner.

//Untuk kasus ini, data pilihan di-supply oleh array items ArrayAdapter <String> pil=new ArrayAdapter

<String>(this,android.R.layout.simple_spinner_item,items);

pil.setDropDownViewResource(android.R.layout.simple_spinner_dropdown _item);

spin.setAdapter(pil);

}

public void onItemSelected(AdapterView<?> parent, View v, int posisi, long id){

pilihan.setText(items[posisi]);

}

(14)

public void onNothingSelected(AdapterView<?> parent){

pilihan.setText("");

} }

6. Jalankan aplikasi tersebut sehingga hasilnya sebagai berikut:

(15)

Radio Button

1. Tambahkan sebuah Activity beri nama ActRadioButton dengan file layout bernama

actradiobutton.xml

.

2. Buka file

actradiobutton.xml

, ketikan kode berikut:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent">

<TextView android:id="@+id/lblPilih"

android:text="@string/pilih"

android:layout_height="wrap_content" />

<RadioGroup android:id="@+id/rgMK"

android:text="@string/MK1">

<RadioButton android:id="@+id/rbMK1"

<Button android:id="@+id/btnHasil"

(16)

android:text="@string/submit"

android:onClick="@string/hasil"

<TextView android:id="@+id/lblHasil"

android:text="@string/output"

</RadioGroup>

</LinearLayout>

3. Buka file

String.xml

dan tambahkan kode berikut

<string name="app_name">Radio_Button</string>

<string name="pilih">Pilih salah satu mata kuliah berikut ini:</string>

</resources>

4. Buka file ActRadioButton

.java

, tambahkan kode berikut sebelum class

ExRadioButtonMainActivity :

import android.widget.RadioGroup;

5. Tambahkan kode berikut pada ActRadioButton

.java public class ActRadioButton extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.actradiobutton);

}

public void klikHasil(View v){

TextView lblHasil = (TextView) findViewById(R.id.lblHasil);

RadioGroup rgMK=(RadioGroup) findViewById(R.id.rgMK);

int id= rgMK.getCheckedRadioButtonId();

(17)

if(id==R.id.rbMK1){

lblHasil.setText("Bahasa Inggris VI ");

}

lblHasil.setText("Tugas Akhir II ");

}

lblHasil.setText("Kerja Praktek ");

}

lblHasil.setText("Komputer dan Masyarakat ");

}

lblHasil.setText("Mobile Computing ");

}

lblHasil.setText("Pancasila dan Kewarganegaraan ");

}

lblHasil.setText("Topik Khusus ");

} } }

6. Run aplikasi tersebut dan hasilnya adalah sebagai berikut:

Aplikasi Adu Jago Kuis ini bertujuan untuk adu kemampuan dalam menjawab kuis bagi para pesertanya. Untuk pembuatan aplikasi ini, Anda dibebaskan untuk menyediakan data soal dan jawaban kuis yang Anda inginkan, termasuk gambar, teks dan resources yang lainnya. Kumpulan gambar berikut ini menunjukkan struktur umum aplikasi “Asah Otak Kuis” karya Spirit Mandiri.

Desain struktur aplikasi pada praktikum ini diserahkan kepada Anda, tapi diharapkan tidak terlalu kompleks jika dibandingkan dengan aplikasi “Asah Otak Kuis” karya Spirit Mandiri.

2 Referensi: https://play.google.com/store/apps/details?id=com.spiritmandiri.asahotakkuis

(20)

(21)

Pada praktikum-praktikum di minggu-minggu mendatang, Anda diharapkan untuk mulai membangun komponen-komponen aplikasi tersebut. Contohnya, Anda akan membuat komponen Activity aplikasi Adu Jago Kuis buatan Anda pada praktikum minggu ke-2 sesi-2 ini (topik pada praktikum ini adalah Activity). Hasil pembuatan komponen tersebut yang akan menjadi Deliverables Anda setiap sesi praktikum. Di minggu ke-14, Anda diharapkan menyetor aplikasi Adu Jago Kuis secara lengkap dan tanpa error.

Deliverables Sesi Praktikum Ini

1. Implementasikanlah semua jenis layout yang telah dipelajari pada activity-activity dalam aplikasi Adu Jago Kuis yang telah anda buat pada praktikum sebelumnya.