SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code...
Transcript of SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code...
![Page 1: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/1.jpg)
SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, ABSOLUTE, DAN LINEAR MENGGUNAKAN
TOOLS ECLIPSE INDIGOXML SOURCE CODE TO CREATE RELATIVE LAYOUT ,
ABSOLUTE LAYOUT, AND LINEAR LAYOUT USINGECLIPSE INDIGO TOOLS
IT CAMP 2019
BELAJAR ANDROID UNTUK PEMULA
CREATE XMLDESAIN APP
![Page 2: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/2.jpg)
PROFIL
Ade Setiawan, M.Kom
Pendidikan • SDN 01 PAGI JAKARTA -→ 2004• SMPN 156 JAKARTA → 2007• SMK NEGERI 39 - ELEKTRONIKA INDUSTRI → 2010• STMIK NUSA MANDIRI - S1 -TEKNIK INFORMATIKA → 2013• STMIK NUSA MANDIRI – S2 –ILMU KOMPUTER → 2018
Pengalaman• Magang di P.T Intisar Primula bagian produksi perangkat pembuatan
mesin absen - 2009• Training di lembaga V3 – Training Center → Kursus Handphone- 2011• Bekerja di BSI dari tahun 2013 sampai dengan sekarang
Kontak : 08561836944Email : [email protected]
www.materi-lab1.blogspot.com (elektronika)www.materi-lab2.blogspot.com (jaringan komputer)
![Page 3: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/3.jpg)
ANDROID
Menurut Safaat (2011:15) menjelaskan bahwa “Android SDK adalah tool API(Applicaramming Interface) yang diperlukan untuk memulai mengembangkan aplikasi pada platform android menggunakan bahasa pemprograman java”.
OPERATING SYSTEM
![Page 4: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/4.jpg)
OS ANDROID
• Android 1.0 & 1.1: Astro (Alpha) & Bender (Beta)
• Android 1.5: Cupcake
• Android 1.6: Donut
• Android 2.0 & 2.1: Eclair
• Android 2.2: Froyo (Frozen Yoghurt)
• Android 2.3: Gingerbread
• Android 3.0 & 3.2: Honeycomb
• Android 4.0: Ice Cream Sandwich
• Android 4.1 & 4.3: Jelly Bean
• Android 4.4: KitKat
• Android 5.0 & 5.1: Lollipop
• Android 6.0: Marshmallow
• Android 7.0 & 7.1: Nougat
• Android 8.0 & 8.1: Oreo
• Android 9.0: Pie
![Page 5: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/5.jpg)
Tools apa saja yang dipersiapkan untuk membuat aplikasi android ?
Eclipse
Android SDK
ADT
![Page 6: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/6.jpg)
Apa itu eclipse ?
TOOLS untuk membuat aplikasi android
https://id.wikipedia.org/wiki/Eclipse_(perangkat_lunak)
![Page 7: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/7.jpg)
Versi Eclipse
![Page 8: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/8.jpg)
Apa itu android SDK?
Android SDK (software development kit) adalah satu set alat pengembangan yang digunakan untuk mengembangkan aplikasi untuk platform Android Sumber : (http://www.informasi-internet.com/2016/09/android-sdk.html)
AVD adalah tools untuk membuat emulator
SDK adalah tools untuk mengelola segala kebutuhan untuk perangkat emulatorandroid seperti mengupdate os terbaru, google api terbaru, plugin dll
![Page 9: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/9.jpg)
Apa itu ADT?
ADT berfungsi untuk menghubungkan tools ECLIPSE INDIGO dengan tools
ANDROID SDK-WINDOWS
![Page 10: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/10.jpg)
Bagaimana cara menginstall eclipse ?
![Page 11: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/11.jpg)
Memilih Workspace yaitu tempat dimana kita menaruh projek yang kita buat. Contohnya seperti yang ada diatas ini, yaitu dengan alamat folder E:\Android\proyek_indigoKlik Browse
KONFIGURASI ECLIPSE
![Page 12: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/12.jpg)
Pilih folder yang ingin dijadikan folder workspace ,disini penulis menggunakan folder proyek indigo, setelah itu di klik Ok
![Page 13: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/13.jpg)
Menghubungkan eclipse indigo dengan AVD (Android Virtual Device)Klik windowsKlik Preferences
![Page 14: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/14.jpg)
• Klik android
• Klik Browse
![Page 15: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/15.jpg)
Setelah itu pilih folder android-sdk-windows dan klik OK
![Page 16: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/16.jpg)
Lalu pilih Apply dan
ok
![Page 17: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/17.jpg)
JENIS LAYOUT
• RELATIVE LAYOUT
• ABSOLUTE LAYOUT
• LINEAR LAYOUT
![Page 18: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/18.jpg)
RELATIVE LAYOUT
TextView
Button
TextView
Button
Layout aplikasi satu Layout aplikasi dua
![Page 19: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/19.jpg)
RELATIVE LAYOUT
TextViewid_judulsederhana
Buttonidtombolsatu
TextViewid_judulsederhana
Buttonidtombolsatu
Parameter button idtombolsatu :android:layout_below="@+id/id_judulsederhana"
Parameter textview id_judulsederhana:android:layout_above="@+id/idtombolsatu"
![Page 20: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/20.jpg)
ABSOLUTE LAYOUT
X
Y
![Page 21: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/21.jpg)
TextViewid_judulsederhana
Buttonidtombolsatu
Parameter button idtombolsatu :android:layout_x=“60dp"android:layout_y="20dp"
01234567891011121314......................
123456789..
X
Y
![Page 22: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/22.jpg)
LINEAR LAYOUT
Button EditText Button
EditText
Parameter : horizontal Parameter : Vertical
![Page 23: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/23.jpg)
Parameter : horizontal Parameter : Vertical
Button EditText
Button TextView
Button
EditText
Button
TextView
![Page 24: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/24.jpg)
Membuat Project Baru
Klik File → New → Other → Android→ Android Application Project→
![Page 25: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/25.jpg)
Membuat Project Baru
Klik File → New → Other → Android→ Android Application Project→
![Page 26: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/26.jpg)
Membuat Project Baru
Lalu beri nama application name , project name dan package name, seperti keterangan yang ada di samping ini.Lalu setelah itu klik next
![Page 27: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/27.jpg)
![Page 28: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/28.jpg)
![Page 29: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/29.jpg)
![Page 30: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/30.jpg)
Activity Name:
Menu_utama
Layout Name:Layout_menu
_utama
Klik FINISH
![Page 31: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/31.jpg)
![Page 32: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/32.jpg)
![Page 33: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/33.jpg)
![Page 34: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/34.jpg)
![Page 35: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/35.jpg)
Pembahasan WIDGET
APA ITU WIDGET
???
![Page 36: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/36.jpg)
Pembahasan WIDGET
• Widget TextView
• Widget Button
• Widget Spinner•
Widget ImageView
• dll
![Page 37: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/37.jpg)
Rancangan desain aplikasi menggunakan absolute layout
Button
Button
Button
Button
TextView TextView
ImageView
Menu pertama Menu kedua
Button
![Page 38: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/38.jpg)
TARGET DESAIN XML
Menu pertama Menu kedua
![Page 39: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/39.jpg)
Mengcopy gambar icon ke folder drawable-hdpi
![Page 40: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/40.jpg)
Membuat Layout Kedua
Klik kanan pada folder layout→ new→ other
![Page 41: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/41.jpg)
Membuat Layout Kedua
Android→ Android XML Layout File→ Next
![Page 42: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/42.jpg)
Membuat Layout Kedua
Beri nama “Layout_menu_
kedua”→ Next→
Finish
![Page 43: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/43.jpg)
Membuat class java dengan nama “Menu_kedua”
Klik kanan pada folder package aplikasi.percobaan→ new→ class
![Page 44: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/44.jpg)
Membuat class java dengan nama “Menu_kedua”
Lalu beri nama “Menu_kedua”→ Finish
![Page 45: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/45.jpg)
SOURCE CODE
![Page 46: SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code xml untuk membuat layout relative, absolute, dan linear menggunakan tools eclipse](https://reader031.fdokumen.com/reader031/viewer/2022012307/5e2db40d1d518105352421a0/html5/thumbnails/46.jpg)
SELESAI