SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, …rumahrobot.id/materi/android.pdf · source code...

46
SOURCE CODE XML UNTUK MEMBUAT LAYOUT RELATIVE, ABSOLUTE, DAN LINEAR MENGGUNAKAN TOOLS ECLIPSE INDIGO XML SOURCE CODE TO CREATE RELATIVE LAYOUT , ABSOLUTE LAYOUT, AND LINEAR LAYOUT USING ECLIPSE INDIGO TOOLS IT CAMP 2019 BELAJAR ANDROID UNTUK PEMULA CREATE XML DESAIN APP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SELESAI