Apps Development (Android Studio) BM

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 49

Atribut yang kita gunakan untuk imej adalah; android:src=“@drawable/androidparty”
Rajah 5.2.10 folder drawable

Klik kanan folder drawable dan pilih Show di
Explorer atau Reveal in Finder untuk pengguna
Mac.

Rajah 5.2.11 tetingkap drawable dan tetingkap gambar
Seret imej yang anda mahu gunakan di Android Studio ke dalam folder drawable.
Seterusnya, anda akan menambah atribut di dalam pengekodan anda. Sila masukkan
kod ini;

Wrap_content
memberitahu anda
untuk saiznya sendiri
kepada dimensi yang
diperlukan.

Android:source Nama imej anda

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 50

Ruang kerja anda harus
kelihatan seperti ini selepas
kunci dalam atribut
paparan imej baru.

Seterusnya, sila salin atribut pandangan teks kawasan ini kepada nombor seksyen 24
tetapi ubahNext, android:text attribute daripada, nama anda.

Rajah 5.2.12 mengubah android:text attribute
Ini akan menyebabkan paparan teks pada mod pratonton bertindih.

Kita akan
memisahkan
pandangan teks ini.

Rajah 5.2.13 paparan teks bertindih
Pertama, cari atribut from, your name. Seterusnya, tambah satu atribut yang baru.

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 51

Sila masukan kod dibawah;

Dengan menambahkan atribut ini, pratonton telefon anda akan kelihatan seperti ini.
(Rajah 5.2.14)

Kini sudah tiba masanya untuk bergerak ke Langkah 3, menggayakan Paparan.

5.4 Menggayakan Paparan

Terdapat beberapa perkara yang perlu kita ubah dari pratonton semasa;

 Buat teks yang lebih besar
 Tukar jenis Fon
 Tukar warna Fon
 Memperluas imej untuk mengisi skrin
 Elakkan teks daripada ditolak ke sisi skrin

5.4.1 Buat Teks yang lebih Besar

Atribut yang digunakan dalam menukar saiz fon adalah textSize. Disini, kita akan
menambah 36p sebagai nilai saiz fon. Sila masukkan atribut dan nilai dalam pengekodan;

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 52

5.4.2 Menetapkan Fon

Keluarga fon adalah satu set fail fon bersama dengan butiran gaya dan beratnya. Di
Android, anda boleh membuat keluarga fon baru sebagai sumber XML dan
mengaksesnya sebagai satu unit, bukannya merujuk setiap gaya dan berat sebagai
sumber yang berasingan. Dengan melakukan ini, system boleh memilih fon yang betul
berdasarkangaya teks yang anda cuba gunakan.
Sila masukkan kod dibawah;

Jenis nilai fon

Rajah 5.3.2 menambah nilai sans serif
Pastikan anda memasukkan atribut yang sama pada paparan teks yang lain. Terdapat
lebih banyak nilai fon yang tersedia yang boleh anda cuba;

Rajah 5.3.2.1 Nilai san serif yang lain
Layari https://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-
and-what-they-map-to untuk mengetahui lebih mengenai fon.
Kunjungi rujukan pemaju di https://developer.android.com/guide/topics/ui/look-and-
feel/fonts-in-xml.html untuk mengetahui lebih lanjut mengenai keluarga Fon.

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 53

5.4.3 Menukar warna Fon

Memandangkan kita akan menggunakan imej sebagai latar belakang, kita perlu
menukar warna Fon kepada putih. Masukkan atribut tersebut mengikut urutan untuk
berbuat demikian,

Rajah 5.3.3 textColor
Terdapat banyak warna yang boleh di guna dalam android studio, walau bagaimana
pun, untuk pembelajaran ini sila gunakan warna putih. Cari paparan teks dan tambahkan
atribut yang di berikan dalam Rajah 5.3.3.

Rajah 5.3.3.1 menukar warna fon

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 54

5.4.4 Memperluas Imej

Kita akan menggunakan ScaleType untuk memperluaskan Imej Selamat Hari Jadi untuk
memenuhi skrin.
Terdapat beberapa perkara yang perlu kita ketahui semasa mengendalikan proses.

 Kita mengetahui dua nilai untuk scaleType center dan centerCrop. Manakah yang
patut anda guna?

 Adakah imej anda berkembang tetapi teks anda hilang? Cuba tukar susunan
pandangan anda.

Pertama sekali, masukkan kod dibawah paparan atribut imej;

Anda akan melihat bahawa imej akan berkembang sehingga ia menutup teks pada skrin
telefon pratonton anda.

Rajah 5.3.4 Imej diperluas
Cuba tukar jenis telefon ke mana-mana peranti tablet, anda akan melihat bahawa imej
sebenarnya lebih kecil. Ini tidak baik, kerana jika anda melihatnya menggunakan peranti
saiz lain yang belih besar, ia akan kelihatan tidak menarik. Ini berlaku kerana kita
menggunakan atribut wrap_content.

Kawasan
Putih

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 55

Rajah 5.3.5 tukar kepada nilai match_parent
CenterCrop bermakna ia akan memaparkan imej secara seragam (mengekalkan nisbah
aspek imej) supaya kedua-dua dimensi (lebar dan ketinggian) imej akan sama dengan
atau lebih besar daripada dimensi yang sama pandangan (minus padding).

5.4.5 Mengatasi Paparan Bertindih

A
B
C

Rajah 5.3.5 Paparan Bertindih

Rajah 5.3.5 menunjukkan bahawa sifat A atribut textView berada di bahagian paling atas
tetapi dalam bahagian pratonton berada di belakang. Ia menunjukkan bahawa atribut
pertama dalam ruang kerja pengekodan anda akan muncul di bahagian belakang
dalam bahagian pratonton. Oleh itu, anda perlu mengubah penempatan atribut anda.

B NOTA: Anda mungkin mahu
meleraskan warna fon anda untuk

paparan yang lebih cantic untuk Kad

Hari Jadi anda.

A

C

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 56

5.4.6 Elakkan Teks daripada ditolak dari sis skrin

Kita perlu menciptakan ruang antara textView dan
margin peranti. Biasanya, pengaturcaraan akan
mempunyai dua pilihan dalam menyelesaikan perkara
ini, satu lagi padding adalah layout_margin.

Happy birthday

Happy birthday

Padding Layout Margin

Padding adalah unsur ruang dalaman, dan margin adalah
ruang luar sesuatu unsur.
Perbezaannya menjadi jelas apabila anda memohon latar
belakang dan bersempadan dengan elemen. Tidak seperti
padding, margin tidak dilindungi sama ada latar belakang
atau sempadan kerana ia adalah ruang di luar elemen
sebenar. Anda boleh mendapatkan lebih banyak maklumat
dari Google dengan melayari Google-Layout-metrics &
Keylines. Adalah penting untuk memahami konsep padding
dan margin untuk menjadikan kandungan anda lebih mudah
dibaca.12

Paparan akan mengecilkan bungkusannya sendiri, oleh itu
kita perlu padding untuk mengelakkan daripada
membungkus terlalu ketat dengan menentukkan jumlah
padding pada setiap sisi.

Sila masukkan kod ini;

12 https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments
15/09/2017

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 57

Sebelum anda menekan butang Run app untuk melihat pratonton aplikasi anda

dalam emulator, pastikan anda menggerakkan tetikus anda ke butang analisis pada

ruang kerja XML aktiviti utama anda seperti yang ditunjukkan dalam Rajah 5.3.6.

Rajah 5.3.6 Butang Analisis

Rajah 5.3.7 Tag start is not close

Dengan memeriksa dari butang analisis, , ia akan membantu anda mengesan

kesilapan yang telah anda lakukan sebelum ini.

Rajah 5.3.8 Mesej Gradle Build

Anda juga boleh melihat bahagian bawah Android Studio yang mengemas kini anda
mengenai pengekodan semasa sama ada ia serasi dengan versi semasa di Android
Studio dan pemacu komputer.

Rajah 5.3.9 Isu Pemacu GPU
Anda juga mungkin mengalami situasi ini
di mana pemandu anda perlu dikemas
kini untuk menggunakan Emulator.

Rajah 5.3.9

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 58

Rajah 5.3.10

Jadi, kita mungkin menghadapi Ralat yang berlainan semasa menjalankan aplikasi,
contohnya dalam keadaan ini ia menyatakan bahawa ‘H’ bukan watak nama sumber
berasaskan fail yang sah. Oleh itu, saya cuba menukar nama imej yang boleh ditarik
daripada huruf besar kepada huruf kecil sahaja seperti yang ditunjukkan dalam Rajah
5.3.11.

Rajah 5.3.11 Klik Kanan-> Tunjukkan di Explorer -> Menamakan->refresh Android Studio -
>masukkan nilai kod baru

Untuk melihat hasil terakhir: Sila klik butang Run app untuk melihat bagaimana aplikasi
ditunjukkan pada emulator android.

Untuk menjadikannya lebih menarik, saya menukar
kedudukan teks pertama dan menukar kata-kata ke dalam
‘Hari Jadi Tony Blessed!’ Anda perlu melakukan banyak
amalan supaya anda tahu bagaimana untuk membetulkan
Kesilapan dan menjana aplikasi anda dengan jayanya.

anda berjaya!

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 59

BAB 6
JALANKAN APP DI TELEFON ANDA

Objektif

a. Pelajar akan dapat memahami langkah-langkah yang menjalankan aplikasi di dalam
telefon mereka

b. Pelajar akan mengamalkan cara menggunakan ciri-ciri sebagai pemaju android

6.1 Peralatan Diperlukan

Pertama, sila sediakan kabel USB dan telefon Android anda. Seterusnya, anda perlu
memasang pemacu pada komputer anda (windows sahaja).

Rajah 6.1 Kabel USB dan Telefon Android
Pertama, anda perlu memastikan ubah kepada pemaju pada telefon android anda.
Langkah
1. Pergi kepada Setting
2. Tekan pada About Phone
3. Tekan bahagian Build Number (7 kali)
4. Tekan butang belakang dan anda akan melihat pilihan pemaju
5. Pilih USB debugging

Rajah 6.2 langkah menjadi pemaju dalam Sistem Android

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 60

Dengan membenarkan debugging USB, ia akan membenarkan komputer anda
memasang aplikasi pada telefon anda. Seterusnya, pasang kabel USB anda pada telefon
anda dan palam hujung yang lain ke dalam komputer anda.

Rajah 6.3 Telefon disambungkan ke komputer menggunakan kabel USB
Seterusnya, sistem komputer anda memerlukan pemandu untuk berkomunikasi dengan
telefon anda. Anda boleh mulakan dengan google chrome, sila cari oem android di bar
cari google chrome. OEM bermaksud laman web pengemudi peralatan pengilang asal.

Rajah 6.4 Cari pautan versi android anda dan muat turunnya.
Folder yang disediakan biasanya dalam fail zip, ekstrak fail di dalamnya, dan pastikan
anda ingat di mana anda menyimpan folder anda. Selepas itu, anda perlu pergi ke
pengurusan komputer, berikut langkah-langkahnya;
Langkah
1. Pergi computer
2. Tekan kanan pada tetikus dan pilih manage
3. Di sebelah kiri ruang kerja pilih Device Manager
4. Kemudian bergerak ke bahagian tengah, cari other devices (memperluaskan pilihan)
5. Anda harus melihat sesuatu yang merujuk kepada telefon anda, contoh Interface ADB

atau Nexus 5 (nama Android anda)
6. Tekan kanan dan pilih Update Driver Software
7. Seterusnya, Pilih Browse my computer
8. Jika telefon anda berjaya dikemaskini kotak dialog pop keluar sepatutnya muncul

seperti Windows has successfully updated your driver software.
9. Tekan Close

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 61
Pada asasnya, pada masa ini telefon anda sudah bersedia untuk menerima aplikasi dari
komputer anda. Selepas itu, pilih butang apl Run, klik peranti anda dan tunggu untuk
bertindak balas.

6.2 Peralatan SDK Lain
6.2.1 Pratonton

Pandangan pratonton mempunyai beberapa kawalan di sepanjang bahagian atas yang
membolehkan anda menukar cara pratonton dipaparkan. Anda boleh membuat
pratonton anda dalam mana-mana peranti tertentu yang mana anda telah menentukan
AVD. Anda boleh melihat prapapar beberapa peranti pada masa yang sama. Anda juga
boleh menukar tahap API dan tema yang digunakan untuk memberikan pratonton anda.
Jadual 8-2 menerangkan bahagian tertera pada panel pratonton yang diserlahkan
dalam Rajah 6.2.13

Rajah 6.2.1 Pratonton secara terperinci

Rajah 6.2.2 Pratonton
13 Learning Android Studio E-book by Adam Gerber and Clifton Craig (2015)

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 62

6.2.2 Mod Pereka

Klik tab Reka bentuk di sebelah kiri bawah Editor (ditunjukkan dalam Rajah 6.2.2) untuk
memaparkan mod reka bentuk. Dalam bahagian ini, anda akan meneroka cara
menggunakan Pereka Visual untuk mengawal kedudukan.

Rajah 6.2.2 Mod Pereka

Mod reka bentuk mempunyai panel pratonton langsung yang sama sebagai mod teks
tetapi menambah palet widget. Anda boleh menyeret dan melepaskan widget dari palet
ke dalam panel pratonton semasa anda merancang susun atur anda secara visual.
Pereka visual menghasilkan XML untuk anda, sambil membolehkan anda memberi
tumpuan kepada rupa dan rasa susun atur anda. Mod reka bentuk juga memaparkan
panel pokok komponen di sudut kanan atas serta anak tetingkap sifat di bawahnya.
Pokok komponen memberikan pandangan hierarki terhadap semua pandangan dan
komponen paparan kumpulan dalam susun atur semasa anda. Di bahagian atas adalah
komponen akar, yang dalam contoh kami adalah FrameLayout.14

6.2.3 Frame Tata Letak

Seperti yang anda lihat, FrameLayout menyusun komponen mengikut urutan yang
ditetapkan. Walau bagaimanapun, ia turut membahagikan skrin anda kepada sembilan
bahagian khas. Klik TextView dalam pokok komponen dan tekan Delete untuk
mengeluarkannya. Lakukan sama untuk memadamkan widget Checkbox dan Button
dan kosongkan paparan sepenuhnya. Cari widget Button di dalam palet kiri dan klik.
Gerakkan tetikus anda di sekitar anak tetingkap pratonton dan perhatikan bahagian

yang diserlahkan yang ditunjukkan semasa
tetikus anda berada di sekeliling. Skrin
dibahagikan kepada kawasan yang
ditunjukkan oleh setiap bahagian FrameLayout
khas (lihat Rajah 6.2.3). Klik tunggal di bahagian
atas sebelah kiri untuk menggugurkan butang.
Klik dua kali butang dan tukar teksnya ke Atas
Kiri untuk menunjukkan kedudukannya. Terus
menyeret dan menjatuhkan widget dalam
lapan bahagian lain dan melabelkannya
dengan sewajarnya. Apabila anda menyeret
dan menggugurkan setiap butang, bertukar-
tukar antara mod teks dan mod reka bentuk
untuk melihat bagaimana XML dihasilkan untuk
anda. Apabila anda selesai, anda sepatutnya
mempunyai sesuatu yang menyerupai Rajah
6.2.3.15

Figure 6.2.3 Frame layout

14 Learning Android Studio E-book by Adam Gerber and Clifton Craig (2015)

PEMBANGUNAN APLIKASI (ANDROID STUDIO) 63

6.3 Latihan

Sila gunakan mod Reka Bentuk dan hasilkan interface aplikasi mudah.
Contoh;