Yossica 2SIC P2 AndroidStudio

Nama/NIM : Yossica
Kelas/Prodi : 3 SIC / Sistem Informasi

Dosen : Indah Lestari, S.ST., M.T
AIL : Susiyanti, S.ST
Tanggal : 5 Oktober 2020
Praktikum 2
Layout, View, Resource
1.1 Tujuan
1. Mahasiswa mampu menjelaskan bahasa yang digunakan dalam android,
instalasi android studio, user interface android studio, struktur project android
serta pembuatan emulator android, dan mengimplementasikan berbagai jenis
layout dasar pada pengembangan aplikasi android, mampu membuat aplikasi
sederhana menggunakan view dan resources pada android, serta membaca
1.2 Teori Dasar

1.2.1. Pengenalan Android dan Android Studio
Android adalah sistem operasi dengan sumber terbuka, dan Google merilis kodenya
di bawah Lisensi Apache. Antarmuka pengguna Android umumnya berupa manipulasi
langsung, menggunakan gerakan sentuh yang serupa dengan tindakan nyata, misalnya
menggeser, mengetuk, dan mencubit untuk memanipulasi objek di layar, serta papan
ketik virtual untuk menulis teks. Android Studio merupakan sebuah tools yang mudah
dipahami dan digunakan. Dalam satu tools ini Anda bisa mendapatkan berbagai
manfaat mulai dari pembuatan aplikasi hingga testing aplikasi. Android memiliki
Operating system (OS) yang open-source. Berikut ini adalah beberapa fitur Android
Studio:
- Environment yang mempermudah Anda untuk mengembangkan aplikasi untuk
Android
- Support dalam mengembangkan aplikasi Android TV dan Android Wear
- Template untuk menentukan design dan komponen Android
- Editor layout dengan interface drag-and-drop
- Refactoring dan perbaikan cepat khusus Android
- Dukungan build berbasis Gradle
- Integrasi ProGuard
- Emulator yang cepat dan berbagai fitur didalamnya
Nama/NIM : Yossica
- Dapat terintegrasi dengan Google Cloud Messaging dan App Engine

- Dukungan program basic C++ dan NDK
1.2.2. Project Hello World
Setelah menginstall Android Studio pada bagian sebelumnya maka kali ini saya
akan membuat project pertama android yaitu aplikasi android ”Hello World“
menggunakan Android Studio yang akan di jelaskan pada bagian percobaan.
1.2.3. Frame Layout

Frame layout merupakan subclass viewgroup dari android untuk menampilkan posisi
beberapa tampilan yang ditempatkan di atas satu sama lain dalam tampilan aplikasi.
FrameLayout sangat bermanfaat ketika kita ingin membuat aplikasi yang memiliki
animasi.
1.2.4. Linear Layout

Linear Layout merupakan layout yang berfungsi untuk menampilkan komponen-
komponen aplikasi contohnya : teks, tombol, gambar dan lainnya dengan
cara vertikal ataupun horizontal. Model ini lah yang paling banyak digunakan untuk
membuat tampilan antar muka pada aplikasi android.
1.2.5. Relative Layout

Nama/NIM : Yossica
Relative Layout adalah layout yang penataan nya ini adalah penataan yang
menempatkan widget-widget didalamnya seperti layer, sehingga sebuah widget dapat
berada di atas/di bawah widget lainnya atau dengan kata lain Relative merupakan
layout yang penataannya lebih bebas (Relative) sehingga bisa di tata di mana saja.
1.2.6. Komponen View

View adalah obyek yang menggambar komponen tampilan ke layar yang mana
pengguna dapat melihat dan berinteraksi langsung.
Contoh komponen turunan dari View seperti :
 TextView, komponen yang berguna untuk menampilkan teks ke layar.
 Button, komponen yang membuat pengguna dapat berinteraksi dengan cara
ditekan untuk melakukan sesuatu.
 ImageView, Komponen untuk menampilkan gambar.
 ListView, komponen untuk menampilkan informasi dalam bentuk list.
 GridView, komponen untuk menampilkan informasi dalam bentuk grid.
 RadioButton, komponen yang memungkinkan pengguna dapat memilih satu
pilihan dari berbagai pilihan yang disediakan.
 Checkbox, komponen yang memungkinkan pengguna dapat memilih lebih dari
satu dari pilihan yang ada.
1.2.7. Resource
Nama/NIM : Yossica
Resource adalah file tambahan dan konten statis yang dapat diakses di aplikasi
bagian mendasar dari proses pengembangan aplikasi Android. Resource dapat dipakai
untuk mendefinisikan color (warna), image (gambar), layout (tata letak), menu, dan
nilai string. Jenis-jenis Resource:
Jenis-jenis Values:
Nama/NIM : Yossica
1.3 Kebutuhan Praktikum

1. PC
2. IDE Android Studio
3. Laptop
4. HP
5. Kabel USB
1.4 Percobaan
1.4.1. Membuat Project
Berikut adalah langkah-langkah dalam membuat projek Aplikasi Mobile pada
IDE Android Studio:
1. Pilih start a new android studio project
Nama/NIM : Yossica
2. Selanjutnya pilih layout empty selanjutnya klik next
3. Atur nama Project sesuai format berikut

Name : BelajarLayout
Package name : com.namaMhs.app (com.yossica.BelajarLayout)
Save location : Simpan pada folder yang anda inginkan
Language : Java → karna kita masih menggunakan bahasa java
Minimum SDK : Contoh Android 5.0 Lollipop
Kemudian Klik FInish
Nama/NIM : Yossica
1.4.2. Percobaan Membuat Kata Hello World

Android studio bisa menggunakan bahasa java untuk penulisan kata “ Hello
World” pada Android studio ini penulisan nya terletak pada file .XML pada folder app →
res → layout. Untuk mengubah tulisan terletak pada tag TextView contoh
android:text=”Hello nama saya yossica aja”
Nama/NIM : Yossica
Selanjutnya membuat AVD berisi profil hardware, image sistem, area penyimpanan, skin, dan
properti lainnya.
Langkah-langkah membuat ADV:
- Buka AVD Manager dengan mengklik Tools > AVD Manager. Klik Create Virtual
Device, di bagian bawah dialog AVD Manager.
- Selanjutnya akan muncul halaman select hardware dan pilih hardware yang
terdapat play store. Untuk mengindikasikan bahwa profil-profil ini sepenuhnya
mematuhi CTS dan dapat menggunakan image sistem yang menyertakan
aplikasi Play Store. Selanjutnya pilih Next.
Nama/NIM : Yossica
- Selanjutnya halaman System Image akan muncul. Pilih image sistem untuk API

level tertentu, lalu klik Next.
Nama/NIM : Yossica
- Selanjutnya Halaman Verify Configuration akan muncul. Dan ubah adv name

dan klik finish.
- Kemudian run dan hasilnya seperti gambar dibawah ini.

Nama/NIM : Yossica
1.4.3. Percobaan membuat Frame Layout

Tambahkan sebuah file .xml baru. Dengan Cara buka folder res → klik kanan pada folder
layout → pilih Layout resource file .
Nama/NIM : Yossica
Selanjutnya akan menampilkan halam seperti gambar dibawha ini. Beri nama
activity_frame_layout → Create → kemudian ketikkan kode xml di bawah ini.
Nama/NIM : Yossica
Berikut merupakan link dari xmlms

yang digunakan.
android:layout_width="match_parent"
adalah ukuran lebar dari layout text
Yaitu membuat button dengan text tersebut, match parent berarti ukuran
halaman 1, dengan layout heigh dan tersebut untuk menyesuaikan lebar
layout width yaitu match parent, dan dan tinggi suatu tampilan sama
letaknya yang di tengah. dengan ukuran lebar dan tinggi dari
layar smartphone android yang anda
gunakan.
android:layout_height="match_parent
adalah ukuran panjang atau ukuran
kebawah dari layout text tersebut,
Yaitu membuat textview dengan text
match parent berarti ukuran tersebut
halaman 2, dengan layout heigh dan
untuk menyesuaikan lebar dan tinggi
layout width yaitu match parent, dan
suatu tampilan sama dengan ukuran
letaknya yang di tengah.
lebar dan tinggi dari layar smartphone
android yang anda gunakan.
Selanjutnya membuat tombol dan TextView yang menggunakan FrameLayout. Dengan

memberikan aksi kepada tombol tersebut, sehingga ketika di klik maka akan
menampilkan TextView. Seperti yang terlihat pada text, bahwa kita memberikan kode
“onClick” pada objek Button di atas.
Langkah – langkah :
Buka folder java, klik kanan pada folder → New → Java Class → beri nama FrameLayout →
create → ketik kode di bawah yaitu dengan menambahkan aksi onClick ketika tombol ditekan.
Nama/NIM : Yossica
Dan mengubah activity sesuai dengan nama class pada AndroidManifest.xml agar app
dapat dijalankan pada emulator. Seperti gambar dibwah ini:
Nama/NIM : Yossica
Nama/NIM : Yossica
1.4.4. Percobaan membuat Linear Layout

Langkah – langkah dalam membuat linear layout
- Membuat sebuah .xml baru → beri nama activity_linear_layout
- Selanjutnya ketik program seperti gambar dibawah ini

Nama/NIM : Yossica
- Kemudian membuat program java dengan mengubah activity android:name pada

AndroidManifiest.xml menjadi LinearLayout
- Dan jalankan program

Nama/NIM : Yossica
1.4.5. Percobaan membuat Relative Layout

Langkah-langkah dama membuat relative layout yaitu :
Nama/NIM : Yossica
- Buat sebuah .xml baru → beri nama activity_relative_layout, dan pilih OK.
- Selanjutnya ketikkan kode program seperti pada gambar di bawah ini.

Nama/NIM : Yossica
- Kemudian tambahkan file java baru bernama RelativeLayout. Dan ketikkan kode
seperti gambar dibawah ini.
- Selanjutnya mengubah activity android:name pada AndroidManifiest.xml menjasi

RelativeLayout. Seperti gambar dibawah ini:
Nama/NIM : Yossica
- Selanjutnya run kan hasil dari program seperti gambar dibawah ini
Nama/NIM : Yossica
1.4.6. Percobaan Membuat Table Layout

Langkah – langkah dalam membuat table layout seperti gambar dibawah ini
- Buat sebuah file xml baru bernama activity_table_layout. Dan pilih OK.
Nama/NIM : Yossica
- Selanjutnya tambahkan kode xml seperti pada contoh di bawah ini.

Nama/NIM : Yossica
Nama/NIM : Yossica
- Kemudian tambahkan file java baru bernama TableLayout. Dan ketikkan kode
seperti gambar dibawah ini

TableLayout. Seperti gambar dibawah ini
Nama/NIM : Yossica
- Selanjutnya Running program dan hasilnya seperti gambar dibawah ini

Nama/NIM : Yossica
1.4.7. Percobaan Membuat Android Resource

Langkah – langkah membuat Android Resource:
- Pilih folder res di expand -> kemudian pilih folder value ->Tambahkan kode ini
pada file string.xml. Seperti gambar dibawah ini.
- Kemudian tambahkan warna sesuai keingan pada file color.xml. seperti gambar
dibawah ini.
Nama/NIM : Yossica
- Selanjutnya Buat sebuah file .xml baru bernama activity_table_layout_modif, dan

pilih OK.
- kemudian ketikkan kode berikut. Perhatikan bahwa pada contoh kode dibawah,
kita menggunakan data yang telah kita simpan pada file color.xml dan string.xml.
Perhatikan cara pemanggilannya.
Nama/NIM : Yossica
Nama/NIM : Yossica
- Kemudian tambahkan file java baru bernama CustomeTableLayout. Dan

ketikkan kode java seperti gambar dibawah ini.

CustomTableLayout. Seperti gambar dibawah ini.
Nama/NIM : Yossica
- Running program, dan hasilnya seperti gambar dibawha ini:
- Selanjutnya membuat aksi ketika tombol Login ditekan. Dengan proses mengecek
username dan password yang kita inputkan sesuai dengan yang diatur atau tidak.
Username yang diatur ke dalam program adalah “admin” dan password “admin123”.
Buka kembali file CustomTableLayout.java, lalu tambahkan kode program berikut
ini.Seperti gambar dibawah ini:
Nama/NIM : Yossica
- Running program:
Daftar Pustaka
1. https://id.wikipedia.org/wiki/Android_(sistem_operasi)
Nama/NIM : Yossica
2. https://www.techfor.id/cara-membuat-frame-layout-di-aplikasi-android/#:~:text=Frame
%20Layout%20pada%20Android%20ialah,untuk%20mewakili%20layar%20tampilan
%20tunggal.
3. https://badoystudio.com/belajar-android-untuk-pemula/menggunakan-linear-layout-
dengan-mudah-pada-android/#:~:text=Linear%20Layout%20merupakan%20layout
%20yang,dengan%20mudah%20pada%20android%20studio
4. https://medium.com/@tedoharischandra29/mengenal-linear-dan-relative-layout-
89bbdf4632f4
5. http://winditi12016.blogspot.com/2018/01/pengenalan-komponen-android-studio-
view.html
6. https://www.codepolitan.com/memahami-app-resource-di-android-
598c2b837f4fa#:~:text=Di%20Android%2C%20hampir%20semuanya%20adalah,%2C
%20menu%2C%20dan%20nilai%20string.

Yossica 2SIC P2 AndroidStudio

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Yossica 2SIC P2 AndroidStudio

Diunggah oleh

Hak Cipta:

Format Tersedia

Nama/NIM : Yossica

Kelas/Prodi : 3 SIC / Sistem Informasi

1.2 Teori Dasar

- Dapat terintegrasi dengan Google Cloud Messaging dan App Engine

1.2.3. Frame Layout

1.2.4. Linear Layout

1.2.5. Relative Layout

1.2.6. Komponen View

1.3 Kebutuhan Praktikum

2. Selanjutnya pilih layout empty selanjutnya klik next

3. Atur nama Project sesuai format berikut

1.4.2. Percobaan Membuat Kata Hello World

- Selanjutnya halaman System Image akan muncul. Pilih image sistem untuk API

- Selanjutnya Halaman Verify Configuration akan muncul. Dan ubah adv name

- Kemudian run dan hasilnya seperti gambar dibawah ini.

1.4.3. Percobaan membuat Frame Layout

Berikut merupakan link dari xmlms

Selanjutnya membuat tombol dan TextView yang menggunakan FrameLayout. Dengan

1.4.4. Percobaan membuat Linear Layout

- Selanjutnya ketik program seperti gambar dibawah ini

- Kemudian membuat program java dengan mengubah activity android:name pada

- Dan jalankan program

1.4.5. Percobaan membuat Relative Layout

- Selanjutnya ketikkan kode program seperti pada gambar di bawah ini.

- Selanjutnya mengubah activity android:name pada AndroidManifiest.xml menjasi

1.4.6. Percobaan Membuat Table Layout

- Selanjutnya tambahkan kode xml seperti pada contoh di bawah ini.

- Selanjutnya mengubah activity android:name pada AndroidManifiest.xml menjasi

- Selanjutnya Running program dan hasilnya seperti gambar dibawah ini

1.4.7. Percobaan Membuat Android Resource

- Selanjutnya Buat sebuah file .xml baru bernama activity_table_layout_modif, dan

- Kemudian tambahkan file java baru bernama CustomeTableLayout. Dan

- Selanjutnya mengubah activity android:name pada AndroidManifiest.xml menjasi

- Running program, dan hasilnya seperti gambar dibawha ini:

Anda mungkin juga menyukai