PMO PERTEMUAN 3 KOMPONEN APLIKASI ANDROID

Mata Kuliah : Pemrograman Mobile

Dosen Pengampu : Nandang Hermanto, M.Kom

Disusun Oleh : Ana Rofiqoh 15.11.0203

Probowati Setyo Rini 15.11.0220

Giat Riyadi 15.11.0286

Randi Octavian A 15.11.0273

Fandy Yuniawan 15.11.0287

Ginanjar Tri Oktavianto 15.11.0309

Kelas : TI 15 D

PROGRAM STUDI TEKNIK INFORMATIKA

STMIK AMIKOM PURWOKERTO

2017

BAHAN DISKUSI PERTEMUAN 3

Komponen Aplikasi Android
Hyrarchy Of Screen Elements
Proses Thread
Siklus Hidup Activity
Project Structure
Struktur Xml
Jenis-Jenis Layout
Mendesain User Interface / Layout
Android UI Control (Textview, Edittext, Button, Spinner, Checkbox, Radio Button)
Contoh Programnya Ui Control Dalam Aplikasi

Komponen Aplikasi Android

Komponen Utama

Komponen	Deskripsi
Activities	Suatu komponen yang mengendalikan User Interface dan menangani interaksi pengguna ke layar smart phone.
Services	Suatu komponen yang menangani proses di background yang terhubung dengan aplikasi.
Broadcast Receivers	Suatu komponen yang menangani komunikasi antara Sistem Operasi Android dengan aplikasi.
Content Providers	Suatu komponen yang menangani data dan masalah manajemen basis data.

Komponen Tambahan

Komponen	Deskripsi
Fragments	Merepresentasikan sebuah porsi dari User Interface dalam sebuah Activity.
Views	Elemen User Interface yang digambar pada layar seperti tombol, list, formulir, dan lain lain.
Layouts	Hierarki dari view yang mengontrol format layar dan tampilan dari view.
Intents	Objek pesan yang dapat digunakan untuk meminta aksi dari komponen aplikasi lain.
Resources	Elemen eksternal, seperti: string, konstanta dan gambar.
Manifest	File Konfigurasi untuk aplikasi.

Sumber : http://www.insinyoer.com/komponen-aplikasi-android/

2. Hyrarchy Of Screen Elements

Sumber : https://www.slideshare.net/guest213e237/mobile-application-development-with-android

3. Proses Thread

Proses

Beberapa tipe proses berdasarkan urutan prioritas (proses pertama adalah yang terpenting dan dimatikan terakhir) :

Proses latar depan

Proses yang diperlukan untuk aktivitas yang sedang dilakukan pengguna. Proses dianggap berada di latar depan jika salah satu kondisi berikut terpenuhi:

Proses menjadi host Activity yang berinteraksi dengan pengguna dengan (Activity dengan metode onResume() telah dipanggil).
Proses menjadi host Service yang terikat dengan aktivitas yang sedang berinteraksi dengan pengguna.
Proses menjadi host Service yang berjalan “di latar depan”— layanan telah memanggilstartForeground().
Proses menjadi host Service yang menjalankan salah satu callback daur hidupnya (onCreate(), onStart(), atau onDestroy()).
Proses menjadi host BroadcastReceiver yang menjalankan metode onReceive().

Proses yang terlihat

Proses yang tidak memiliki komponen latar depan, namun masih bisa memengaruhi apa yang dilihat pengguna di layar. Proses dianggap terlihat jika salah satu kondisi berikut terpenuhi:

Proses ini menjadi host Activity yang tidak berada di latar depan, namun masih terlihat oleh pengguna (metode onPause() telah dipanggil). Ini bisa terjadi, misalnya, jika aktivitas latar depan memulai dialog, sehingga aktivitas sebelumnya terlihat berada di belakangnya.
Proses menjadi host Service yang terikat dengan aktivitas yang terlihat (atau latar depan).

Proses yang terlihat dianggap sangat penting dan tidak akan dimatikan kecuali jika hal itu diperlukan agar semua proses latar depan tetap berjalan.

Proses layanan

Proses yang menjalankan layanan yang telah dimulai dengan metode startService() dan tidak termasuk dalam salah satu dari dua kategori yang lebih tinggi.

Proses latar belakang

Proses yang menampung aktivitas yang saat ini tidak terlihat oleh pengguna (metode onStop() aktivitas telah dipanggil).

Proses kosong

Sebuah proses yang tidak berisi komponen aplikasi aktif apa pun. Alasan satu-satunya mempertahankan proses seperti ini tetap hidup adalah untuk keperluan caching, meningkatkan waktu mulai (startup) bila nanti komponen perlu dijalankan di dalamnya

Thread

Bila aplikasi diluncurkan, sistem akan membuat thread eksekusi untuk aplikasi tersebut, yang diberi nama, “main”. Thread ini sangat penting karena bertugas mengirim kejadian ke widget antarmuka pengguna yang sesuai, termasuk kejadian menggambar. Ini juga merupakan thread yang membuat aplikasi berinteraksi dengan komponen dari toolkit Android UI (komponen dari paket android.widget dan android.view). Karena itu, thread ‘main’ juga terkadang disebut thread UI.

Sumber :

https://developer.android.com/guide/components/processes-and-threads.html?hl=id

4. Siklus Hidup Activity

Flowchart siklus tersebut:

Activity adalah suatu kelas yang disediakan oleh Android guna mengimplementasikan siklus hidup suatu kelas-kelas pada suatu aplikasi. Berikut ilustrasi di dalam kode pemograman.

Nama kelas yang kita inisiasi adalah StartingPoint yang berada dalam package bernama com.thenewboston.travis. Package adalah suatu pembungkus atau suatu kemasan yang berisi banyak kelas-kelas. Setelah Activity menurunkan sifat-sifatnya atau dengan kata lain setelah StartingPoint melakukan extends kepada kelas Activity, maka siklus di atas berlaku pula pada kelas StartingPoint. Siklus sesungguhnya berisi dengan masing-masing state yang sebenarnya adalah suatu method yang dimiliki kelas activity .Berikut penjelasan pada masing-masing state :

onCreate()

Method ini dipanggil ketika activity pertama kali dibuat

onStart()

Method ini dipanggil ketika sebuah activity tampil ke pengguna

onResume()

Method ini dipanggil ketika activity yang berjalan pada saat itu dihentikan sementara (paused) dan activity sebelumnya dijalankan kembali(resumed). (Hasil dari method OnRestart())

onFreeze()

Method ini dipanggil ketika activity berada dalam keadaan freeze atau tidak merespon akibat sedang sibuk mengerjakan task tertentu pada sistem

onPause()

Method ini dipanggil ketika activity di hentikan sementara (pause) dan berikutnya ketika dijalankan kembali akan berada dalam posisi resume dan memanggil method OnResume()

onStop()

Method ini dipanggil ketika activity tidak lagi tampak kepada pengguna

onDestroy()

Method ini dipanggil sebelum activity dihancurkan (destroy) oleh sistem (baik secara manual maupun untuk kepentingan pelonggaran memori

onRestart()

Method ini dipanggil ketika acitivity dijalankan kembali setelah state Stop

Sumber :

Siklus Hidup Activity Android

5. Project Structure

Struktur Penulisan Dokumen XML

Berikut ini adalah contoh sebuah struktur dokumen XML:

<?xml version=”1.0″ encoding=”ISO-8859-1″?> -> standard header

<email> -> elemen root

<to>randi</to>

<from>rizal</from>

<subject>hallo mad</subject>

<messege> selamat pagi…. </message>

</email>

Baris pertama pada dokumen XML di atas adalah deklarasi standar header yang mendefinisikan versi XML dan karakter encoding yang digunakan dalam dokumen XML. Dalam dokumen ini, XML mengacu pada versi 1.0 dan menggunakan standar encoding karakter set ISO-8859-1 (Latin-1/West European).

Baris selanjutnya menggambarkan elemen induk (root) dokumen “<email>..</email>”, sebagaimana kita menyebut bahwa “Dokumen ini adalah sebuah Email”. Kemudian baris ke 3-6 menggambarkan elemen anak (child) dari elemen induk dokumen.

Tag pada dokumen XML bersifat case sensitif di mana tag pembuka dan tag penutup harus ekivalen. Seperti contoh tag pembuka “<email>” harus ditutup dengan tag “</email>”.

Berikut ini adalah contoh penulisan dokumen XML yang tidak benar:

“<email>….</Email>”

“<email>….</EMAIL>”

“<Email>….</email>”

Berikut ini adalah contoh penulisan dokumen XML yang benar:

“<email>….</email>”

“<EMAIL>….</EMAIL>”

“<Email>….</Email>”

6. Struktur Xml

7. Jenis-Jenis Layout

Linear Layout adalah layout yang menampilkan elemen-elemen view dengan arah linear, vertikal ataupun horizontal. Ini adalah layout paling sederhana di Android.

Relative Layout adalah layout yang menampilkan elemen-elemen view dalam posisi yang relatif. Posisi dari sebuah view yang dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout.

Table Layout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom. Bagi Anda yang telah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table di HTML yaitu dengan tag <table> dan <tr> serta <td>.

Grid View adalah layout grid yang biasa digunakan untuk membuat galeri foto.

Tab Layout adalah layout pada android dengan desain seperti tab.

List View adalah jenis layout dengan tampilan list.

Sumber : https://www.dumetschool.com/blog/Layout-di-Android

8. Mendesain User Interface / Layout

Ada beberapa cara untuk mendesain user interface / layout

Penggunaan Relative Layout

Button Parent Top

Script untuk peletakan gambar button adalah sebagai berikut :

<Button

android:id=”@+id/myButton”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_centerHorizontal=”true”

android:layout_centerVertical=”true”

android:layout_alignParentTop=”true”

android:background=”@drawable/my_button” />

Kemudian kita akan meletakkan sebuah button lagi, dan letaknya persis dibawah objek myButton yang sudah kita buat diatas.

Button Below Objek

Source code untuk penambahan button pada posisi diatas adalah sebagai berikut :

<!– Button terletak dibawah button atas –>

<Button

android:id=”@+id/myButtonDua”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginTop=”10dp”

android:layout_centerHorizontal=”true”

android:layout_below=”@+id/myButton”

android:background=”@drawable/my_button” />

2. Penggunaan Linear Layout

<?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” >

<TextView

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:paddingTop=”5dp”

android:text=”Nama Anda”

android:textColor=”#37abc8″

android:textStyle=”bold” />

<EditText

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:inputType=”text” />

<TextView

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:paddingTop=”5dp”

android:text=”Alamat Anda”

android:textColor=”#37abc8″

android:textSize=”15dp”

android:textStyle=”bold” />

<EditText

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:inputType=”text” />

<Button

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:gravity=”center”

android:padding=”10dp”

android:text=”Simpan” />

</LinearLayout>

Dari source code di atas, akan menghasilkan tampilan berikut :

Linear Layout Android

Sumber : https://mkhuda.com/android/teknik-layouting-user-interface-aplikasi-android/

9. Android UI Control (Textview, Edittext, Button, Spinner, Checkbox, Radio Button)

Text View

Komponen TextView ini dapat menampilkan tulisan di layar tetapi pengguna tidak dapat mengubah tulisan tersebut. Perlu diketahui bahwa TextView juga dapat membuat autoLink terhadap URL. Jadi apabila pengguna menekan TextView, maka sistem akan merujuk pada halaman web dari URL tersebut dengan menggunakan class android.text.util.Linkfy.

Berikut ini adalah potongan kode definisi pebuatan TextView dalam

bentuk XML:

publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tv=new TextView(this);
tv.setText(“SEAMEO REGIONAL OPEN LEARNING CENTRE ” +
” Komplek Universitas Terbuka ” +
” Jl. Cabe Raya,Pondok Cabe Pamulang 15418 ” +
” PO BOX 59/CPA,Ciputat 15401 Jakarta – INDONESIA ” +
” Tel : (62-21)7422184 , 7423725 , 7424154 ” +
” Fax : (62-21)7422276 ” +
” Website : http://www.seamolec.org ” +
” e-mail : secretariat@seamolec.org ” );
Linkify. addLinks(tv, Linkify. ALL);
setContentView(tv);
}

Edit Text

Edit Text merupakan subclass dari Text View. Edit Text dapat digunakan untuk mengubah teks dan juga dapat digunakan untuk memasukkan input berupa angka saja atau membuat kata kunci.

EditText et =new EditText(this); et.setText(“Ini merupakan salah satu contoh dari EditText”); Spannable spn = et.getText();
spn.setSpan(new BackgroundColorSpan(Color. RED), 0, 7,
Spannable. SPAN_EXCLUSIVE_EXCLUSIVE);
spn.setSpan(new StyleSpan(android.graphics.Typeface. BOLD_ITALIC)
, 0, 7, Spannable. SPAN_EXCLUSIVE_EXCLUSIVE);
setContentView(et);

Button

Pada bagian ini, akan dibahas empat jenis button yang sering digunakan dalam mengembangkan aplikasi di Android. Button tersebut antara lain Basic Button, Image Button,Toggle Button dan Custom Button.

Berikut ini adalah potongan kode pemanggilan button menggunakan code Java:

Button btn = (Button) this.findViewById(R.id. ccbtn1);
btn.setOnClickListener(new OnClickListener(){
publicvoid onClick(View v){
finish();
}
});

Spinner

Spinner merupakan sebuah widget yang mirip dengan drop-downlist. Pada bagian ini, akan dijelaskan bagaimana cara membuat sebuah spinner sederhana yang akan menampilkan nama-nama kota. Pada saat terpilih, maka sebuah pesan akan keluar dengan menampilkan item yang dipilih.

CheckBok

CheckBox memiliki dua keadaan yaitu On dan Offsama seperti ToggleButton. Dalam pembuatannya di Android, dapat menggunakan class android.widget.CheckBox. Berikut adalah potongan kode dalam bentuk XML.

<?xmlversion=“1.0”encoding=“utf-8”?>
<LinearLayoutxmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”android:layout_width=“fill_parent”
android:layout_height=“fill_parent”>
<TextViewandroid:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:text=“Makanan kesukaan :”>
</TextView>
<CheckBoxandroid:text=“Nasi Goreng”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
<CheckBoxandroid:text=“Nasi Pecel”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
<CheckBoxandroid:text=“Nasi Uduk”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
<CheckBoxandroid:text=“Nasi Kuning”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
</LinearLayout>

RadioButton

RadioButton memberikan pilihan kepada pengguna, namun pengguna hanya dapat memilih satu item saja. Untuk membuat group dari RadioButton, pertama buat RadioGroup kemudian tambahkan RadioButton ke dalam group.

<?xmlversion=“1.0”encoding=“utf-8”?>
<LinearLayoutxmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”android:layout_width=“fill_parent”
android:layout_height=“fill_parent”>
<TextViewandroid:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:text=“Makanan kesukaan :”></TextView>
<RadioGroupandroid:id=“@+id/rBtnGrp”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:orientation=“vertical”>
<RadioButtonandroid:id=“@+id/gorengRBtn”android:text=“Nasi Goreng”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
<RadioButtonandroid:id=“@+id/udukRBtn”android:text=“Nasi Uduk”
android:layout_width=“wrap_content” android:layout_height=“wrap_content”/>
<RadioButtonandroid:id=“@+id/pecelRBtn”android:text=“Nasi Pecel”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
</RadioGroup>
</LinearLayout>

Sumber : https://adityaronisn.files.wordpress.com

10. Contoh Program UI Control Dalam Aplikasi

Program yang akan kita buat yaitu membuat widget Switch Button dan TextView yang akan kita masukan ke file layout activity_main.xml.

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:layout_margin=”16dp”

android:gravity=”center_horizontal”

android:orientation=”vertical”>

<TextView