Pengenalan Layouting Pada Android Studio (Part 1)

    Hai teman - teman semua! Pada tutorial android studio kali ini kita akan pelajari Pengenalan Layouting pada android studio. Saya berharap setelah memahami penggunaan layout pada android dan dapat membuat tampilan semenarik mungkin aplikasi android yang sedang ingin dibangun.

Apa sih Layout? Layout atau tata letak merupakan tempat dimana kita meletakan suatu komponen yang kita butuhkan dalam aplikasi android sehingga tata letak dari komponen tersebut menjadi kebih teratur dan menarik, nah pada android studio layout di desain dengan menggunakan bahasa XML. Letak file layout di android studio berada di folder res/layout.

    Blok penyusun dasar untuk antarmuka pengguna adalah objek view yang dibuat dari kelas view dan menempati area persegi panjang di layar dan bertanggung jawab untuk menggambar dan menangangi event. View adalah kelas dasar untuk widget, yang digunakan untuk memebuat komponen UI interaktif seperti tombol, bidang teks, dll. ViewGroup adalah subClass View dan menyediakan wadah tak terlihat yang menampung tampilan lain atau ViewGroup lain dan menentukan properti tata letaknya. Pada tingkat ketiga kami memiliki tata letak berbeda yang merupakan subClass dari kelas ViewGroup dan tata letak tipikal mendefinisikan stuktur visual untuk antarmuka pengguna android dan dapat dibuat baik pada waktu proses menggunakan view.

    ViewGroup juga disebut dengan layout karena ViewGroup mengelola tampilan child dengan cara khusus dan umumnya digunakan sebagai root view. 

    Sebelum membahas jenis - jenis Layout, berikut ini attribut - attribut umum yang ada di ViewGroup atau layout :

Jenis - Jenis Layout :

1. LinearLayout

    LinearLayout adalah group tampilan yang meratakan semua child view baik secara vertical maupun horizontal. LinearLayout mengelompokkan child view-nya dengan menampilakan dalam satu baris atau kolom (Vertical atau Horizontal). Arahnya dapat diatur melalui atribut android:orientation. ViewGroup biasa digunakan untuk membuat form.

Berikut ini adalah atribut penting khusus untuk LinearLayout :

    Jadi di dalam setiap baris/kolom hanya ada 1 objek (widget) yang kita tempatkan. Di LinearLayout ini ada 2 (dua) jenis, yaitu :

    1. Vertical LinearLayout yaitu apabila user menempatkan 1 widget (objek) per baris.

    2. Horizontal LinearLayout yaitu apabila user menempatkan 1 objek per kolom.

    Semua isi dari LinearLayout akan ditampilkan berdasarkan urutan penulisan mereka di file layout. Disini kita akan melakukan implementasi dari LinearLayout untuk membuat aplikasi Android, langsung saja ikuti langkah - langkah berikut ;

1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.

• Pilih Start → Android Studio
• Pilih Create New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  LinearLayout.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project LinearLayout.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

Di Source code diatas mengimplementasikan penggunaan 2 jenis LinearLayout yaiut LinearLayout Vertical dan Horizontal

3. Jalankan emulator maka akan tampil seperti gambar dibawah ini :

4. Selanjutnya kita akan mencoba kembali membuat App menggunakan LinearLayout dengan implementasi inputan, seperti biasa buat project baru di Android Studio, jika sudah berada di halaman Android Studio maka langsung saja ikuti seperti langkah di bawah ini. Jika belum maka lakukan cara pembuatan file projects seperti langkah diatas (LinearLayout_1).

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  LinearLayout_2.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project LinearLayout_2.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

5. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

6. Jalankan emulator maka akan tampil seperti gambar dibawah ini :

2. Relative Layout

    Android RelativeLayout memungkinkan anda menentukan bagaimana child views di posisikan secara relative satu sama lain. Posisi setiap tampilan dapat ditentukan sebagai relative terhadap elemen saudara atau relative terhadap parent.

    RelativeLayout adalah layout yang penataannya ini adalah menempatkan wigdet - widget di dalamnya seperti layar, sehingga sebuah widget dapat berada di atas/di bawah lainnya atau dengan kata lain Relative merupakan layout yang penataannya lebih bebas (Relative) sehingga bisa ditata dimana saja. Attrubut yang bisa dipakai untuk memposisikan suatu view didalam RelativeLayout adalah :

- Posisi berdasarkan view lain yang satu level : layout_above, layout_below, layout_toLeftOf, layout_toRightOf.

- Posisi berdasarkan parent : android:layout_centerHorizontal, android:layout_centerVertical

- Posisi penjajaran berdasarkan View lain yang satu level : layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignBaseline.

- Posisi penjajaran berdasarkan parent : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight.

Disini kita akan melakukan implementasi dari RelativeLayout untuk membuat aplikasi Android, langsung saja ikuti langkah - langkah berikut ;

1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.

• Pilih Start → Android Studio
• Pilih Create New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  RelativeLayout_1.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project RelativeLayout_1.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

3. Jalankan emulator maka akan tampil seperti gambar dibawah ini : 

4. Selanjutnya kita akan mencoba kembali membuat App menggunakan RelativeLayout dengan implementasi inputan, seperti biasa buat project baru di Android Studio, jika sudah berada di halaman Android Studio maka langsung saja ikuti seperti langkah di bawah ini. Jika belum maka lakukan cara pembuatan file projects seperti langkah diatas (RelativeLayout_1).

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  RelativeLayout_2.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project RelativeLayout_2.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

5. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

6. Jalankan emulator maka akan tampil seperti gambar dibawah ini :

3. TableLayout

 TableLayout adalah layout yang digunaka untuk membangun user interface (tampilan antar muka) aplikasi android dengan berdasarkan baris dan kolom. Layout ini digunakan untuk keperluan tertentu saja karena kebanyakan pembangunan tampilan antar muka lebih sering memanfaatkan RelativeLayout dan LinearLayout.

Gambar. Format TableLayout

    TableLayout pada Android adalah subkelas ViewGroup yang digunakan untuk menampilkan elemen View child dalam baris dan kolom untuk mengatur semua elem child menjadi baris dan kolom dan tidak menampilkan garis batas antara baris, kolom atau cells. Cara kerja TableLayout hampir mirip dengan table HTML dan berisi kolom sebanyak baris dengan cells terbanyak.

TableLayout terdiri dari :

1. Row/baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.

2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.

Beberapa tag pada TableLayout diantaranya :

1. TableLayout : Tag pembuka untuk menggunakan TableLayout

2. TableRow : Tag untuk membuat baris.

Berikut ini adalah atribut penting khusus untuk TableLayout :

Disini kita akan melakukan implementasi dari TableLayout untuk membuat aplikasi Android, langsung saja ikuti langkah - langkah berikut ;

1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.

• Pilih Start → Android Studio
• Pilih Create New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  TableLayout_1.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project TableLayout_1.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

3. Jalankan emulator maka akan tampil seperti gambar dibawah ini : 

4. Selanjutnya kita akan mencoba kembali membuat App menggunakan TableLayout yang ke 2 (dua), seperti biasa buat project baru di Android Studio, jika sudah berada di halaman Android Studio maka langsung saja ikuti seperti langkah di bawah ini. Jika belum maka lakukan cara pembuatan file projects seperti langkah diatas (TableLayout_1).

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  TableLayout_2.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project TableLayout_2.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

5. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

6. Jalankan emulator maka akan tampil seperti gambar dibawah ini : 

4. AbsoluteLayout

AbsoluteLayout menggunakan angka/koordinat untuk mengatur si widget tersebut. Atribut yang digunakan adalah layout_x dan layout_y. Android AbsoluteLayout digunakan ketika komponen UI di layar diposisikan pada posisi mereka mutlak sehubungan dengan asal di sudut kiri atas layout. Kita perlu menentukan x dan y koordinat posisi masing - masing komponen pada layar. AbsoluteLayout sudah tidak direkomendasikan karena membuat UI tidak fleksibel, sebenarnya AbsoluteLayout sudah jarang digunakan.

Berikut ini adalah atribut yang paling penting yang digunakan dalam layout ini :

Beberapa point penting untuk dicatat :

Disini kita akan melakukan implementasi dari TableLayout untuk membuat aplikasi Android, langsung saja ikuti langkah - langkah berikut ;

1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.

• Pilih Start → Android Studio
• Pilih Create New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana →  AbsoluteLayout.

- Pilih lokasi penyimpanan (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project AbsoluteLayout.

- Untuk minimum API level kita pilih →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

 - Untuk bahasa yang digunakan pilih Java.

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :

3. Jalankan emulator maka akan tampil seperti gambar dibawah ini : 

Demikianlah Pengenalan Layouting dan juga implementasi. Semoga apa yang disampaikan bisa mermanfaat bagi teman - teman semua, mohon maaf jika ada kesalahan dan kekurangan lainnya. Dan untuk pembahasan di artikel selanjutnya kita akan membahas FrameLayout dan ListView jadi tetap pantau blog Pi.Not yaa.

Terima Kasih!!!

Layouting:

Pengenalan Layouting Pada Android Studio (Part 2)

Pengenalan Layoutung (GridView dan ConstraintLayout) Pada Android Studio (Part 3)

Continue reading Pengenalan Layouting Pada Android Studio (Part 1)

Pengenalan Komponen User Interface (PickerView & ListView) dan Penggunaan Application Resource Pada Android Studio

Hai teman - teman semua! Pada tutorial Android Studio kali ini masih melanjutkan pembahasan komponen UI yaitu PickerView dan ListView dengan penggunaan Application Resource. 

Pengenalan Komponen UI Basic View :

• Pengenalan Komponen UI (Part 1)
• Pengenalan Komponen UI (Part 2)

PickerView ada 2 (dua) macam yaitu TimePicker dan DatePicker.

1. TimePicker

TimePicker berfungsi untuk membantu user memilih waktu yang diinginkan untuk diinputkan pada aplikasi Android. Dalam penerapannya, TimePicker banyak digunakan pada aplikasi alarm, calender, reminder, to-do list, ticket reservation dan aplikasi lainnya yang membutuhkan user untuk menginputkan waktu (jam dan menit) di aplikasi tersebut.

Untuk implementasinya sebagai berikut:

1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.

• Pilih Start → Android Studio
• Pilih Create New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project,

Keterangan :

- Beri nama (Name) project →  TimePicker (sesuaikan dengan project yang anda buat).

- Lalu pilih lokasi (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project TimePicker .

- Untuk Language pilih bahasa Java.

- Untuk Minimum API level →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout default (ConstraintLayout) menjadi LinearLayout lalu ubah lagi menjadi LinearLayout (Vertical). Kemudian buka file activity_main.xml  dan ketikan source code berikut :

3. Untuk menjalankan fungsi TimePicker ketikan source code pada file MainActivity.java seperti dibawah ini :

HASIL TimePicker

 

2. DatePicker

DatePicker berfungsi untuk membantu user memilih tanggal yang diinginkan diaplikasi Android. Pada penerapannya, DatePicker banyak digunakan pada aplikasi yang membutuhkan penginputan tanggal. Seperti aplikasi pemesanan tiket, aplikasi reminderm to-do list dan sebagainya.

Untuk implementasinya sebagai berikut:

1. Seperti biasa buatlah Project baru di Android Studio, jika sudah dihalaman utama Android makan langsung saja seperti di bawah ini. Jika belum ikuti pembuatan File Projects seperti cara diatas.

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project, 

Keterangan :

- Beri nama (Name) project →  DatePicker (sesuaikan dengan project yang anda buat).

- Lalu pilih lokasi (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project DatePicker .

- Untuk Language pilih bahasa Java.

- Untuk Minimum API level →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout default (ConstraintLayout) menjadi LinearLayout lalu ubah lagi menjadi LinearLayout (Vertical). Kemudian buka file activity_main.xml  dan ketikan source code berikut :

3. Untuk menjalankan fungsi DatePicker ketikan source code pada file MainActivity.java seperti dibawah ini :

Penjelasan : 

acivity_main.xml memanggil resource yang sudah di kita atur di MainActivity.java. 

- import android = mengimport libarary yang sudah tersedia di Android Studio sesui dengan kebutuhan

- public void onClick(View v){ toast() } = ketika menekan "Tombol" maka akan melakukan pemanggilan pada fungsi toast()

- public void toast() = fungsi yang akan mengatur dan menampilkan ketika tanggal/bulan/tahun yang dipilih

HASIL DatePicker

3. ListView

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau database yang sudah ditentukan. ListView pada saat ini sudah tergantikan dengan RecycleView yang memiliki konsep Material Design, karen lebih custom dan juga dapat mengatur tampilan layout.

Walaupun begitu ListView masih banyak digunakan oleh programmer untuk membuat list/daftar yang sederhana pada aplikasi mereka.

Untuk implementasinya sebagai berikut:

1. Seperti biasa buatlah Project baru di Android Studio, jika sudah dihalaman utama Android makan langsung saja seperti di bawah ini. Jika belum ikuti pembuatan File Projects seperti cara diatas.

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project, 

Keterangan :

- Beri nama (Name) project →  ListView (sesuaikan dengan project yang anda buat).

- Lalu pilih lokasi (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project ListView.

- Untuk Language pilih bahasa Java.

- Untuk Minimum API level →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout default (ConstraintLayout) menjadi LinearLayout lalu ubah lagi menjadi LinearLayout (Vertical). Kemudian buka file activity_main.xml  dan ketikan source code berikut :

3. Selanjutnya untuk menjalankan fungsi ListView ketikan source code pada file MainActivity.java seperti dibawah ini :

HASIL ListView

4. Application Resource

Aplikasi yang bagus adalah aplikasi yang mengakses sumber daya secara programatikal dari pada menggunakan secara hardcoding ke dalam source code. Mengekternalisasikan sumber daya seperti string akan memudahkan untuk mengalokasikan aplikasi untuk bahasa - bahasa yang berbeda berdasarkan daerah geografis. Selain itu, pembuatan string resource juga akan memudahkan jika string digunakan beberapa kali dan terjadi perubahan. Kita hanya perlu mengubah satu nilai string resource tanpa harus mengubahnya di source code satu persatu.

Resource dapat dipakai untuk mendefinisikan color (warna), image (gambar), layout (tata letak), menu, dan nilai string. Nilai - nilai didalam resource ini mencegah kita dari menuliskannya secara langsung (hardcore). Semua yang didefinisikan dapat dipanggil dari manapun didalam project yang dibuat. Contoh paling umum dan paling sederhana adalah penggunaan string resource untuk lokalisasi teks yang fleksibel.

Jenis - Jenis Resource Android Studio

Berikut ini ada jenis resource yang paling umum di pakai di Android Studio di antaranya yaitu:

Dan dibawah ini merupakan berkas - berkas yang tersimpan di folder values :

Untuk daftar jenis resource yang lebih lengkap, silahkan kunjungi halaman berikut.

Untuk implementasinya sebagai berikut:

1. Seperti biasa buatlah Project baru di Android Studio, jika sudah dihalaman utama Android makan langsung saja seperti di bawah ini. Jika belum ikuti pembuatan File Projects seperti cara diatas.

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project, 

Keterangan :

- Beri nama (Name) project →  AppResource (sesuaikan dengan project yang anda buat).

- Lalu pilih lokasi (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project AppResource..

- Untuk Language pilih bahasa Java.

- Untuk Minimum API level →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout default (ConstraintLayout) menjadi LinearLayout lalu ubah lagi menjadi LinearLayout (Vertical). 

Disini kita akan mengimplementasikan beberapa resouce di antaranya :

• Membuat String Resource

Untuk setiap teks yang ingin ditampilkan di aplikasi (misalnya label sebuah Button dan Teks didalam Text View), kita pertama harus mendefinisikan dulu teks tersebut didalam berkas /res/values/strings.xml. Setiap nilai yang ditambahkan di dalam teks itu sendiri. Contoh, apabila kita ingin membuat sebuah Button dengan teks "Submit" berikut ini nilai yang mesti ditambahkan ke strings.xml :

Sekarang kapanpun kita memanggil id submit_label, kita akan mendapatkan teks "Submit". Selain itu juga kita dapat menampilkan data yang lebih kompleks (misalnya teks yang mengandung kode html atau karakter khusus) menggunakan CDATA sebagai berikut :

• Mereferensikan App Resource

Setelah kita mendefinisikan string resource yang dibutuhkan, kita dapat memanggilnya dari java atau XML lain. Untuk mengaksesnya dari file XML lain, cukup panggil menggunakan simbol @ seperti berikut :

Untuk mengakses resource ini dari java, maka kita perlu memanggil metode getResource.getString atau getString dengan memanggil id-nya :

Pola yang sama dapat kita pakai untuk memanggil semua jenis resource.

• Mendefinisikan Color Resource

Selain string resource seperti contoh diatas, kita juga dapat membuat color resource sebagai berikut :

Note : Kalian tambahkan color yang dibutuhkan seperti yang ada didalam kotak merah. 

 Mengaksesnya dikode java dengan cara sebagai berikut :

Dan memanggil color resource dari berkas XML lain dengan cara berikut :

• Mendefinisikan Dimension Resource

Saat menentukan ukuran kita menggunakan beberapa unit misalnya 16dp untuk ukuran margin dan 12sp untuk ukuran font. Dimensi ini mesti kita definisikan di berkas dimens.xml dengan cara :

Buka Struktur folder project Android pilis res/values lalu klik kanan pada folder values dan pilih New -> Values Resource File.

Buat sebuah file xml dengan nama dimens.xml lalu klik OK

Ketikan source code dimens.xml seperti berikut :

Setelah itu buka MainActivity.java  untuk melakukan pemanggilan, lalu ketikan source code berikut :

Sedangkan di activity_main.xml seperti berikut :

HASIL Application Resource

Full Source Code AppResource activity_main.xml di bawah ini :

Full Source Code AppResource MainActivity.java di bawah ini :

Challenge Membuat AppResourceHappiness

Seperti biasa di setiap tutorial di akhir selalu ada challenge, untuk mengulas secara keseluruhan dari materi yang disampaikan kali ini.

1. Seperti biasa buatlah Project baru di Android Studio, jika sudah dihalaman utama Android makan langsung saja seperti di bawah ini. Jika belum ikuti pembuatan File Projects seperti cara diatas (TimePicker).

• Klik File → New Projects
• Pilih Empty Activity lalu klik Next

akan muncul Configure Your Project, 

- Beri nama (Name) project →  AppResourceHappiness (sesuaikan dengan project yang anda buat).

- Lalu pilih lokasi (Save Location) →  Disesuikan dengan keinginan kalian dimana project ini akan di simpan.

- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project AppResourceHappiness .

- Untuk Language pilih bahasa Java.

- Untuk Minimum API level →  API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).

- Jika Sudah selesai klik  Finish.

2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio.

3. Setelah itu ubah layout default (ConstraintLayout) menjadi LinearLayout dengan cara klik kanan pada ConstraintLayout, pilih ConvertView

Lalu pilih LinearLayout, Klik Apply.

Setelah Layout diubah menjadi Linear  kemudian ubah lagi menjadi LinearLayout(Vertical).

4. Setelah diubah menjadi Vertical, selanjutnya kita akan menambahkan source code program untuk warna yaitu di resource colors.xml dan untuk pengaturan margin sampai ukuran font yaitu di resource dimens.xml. 

Source code colors.xml

Source code dimens.xml

5. Kemudian teman - teman tambahkan beberapa komponen, buka activity_main.xml dan kemudian ketikan source code seperti di bawah ini :

6. Selanjutnya untuk pemanggilan MainActivity.java teman - teman ketikan source code berikut :

7. Bila sudah selesai menambahkan source - source code di atas maka langsung saja Run programnya dengan cara jalankan emulator tambahan (Vysor) di kedua perangkat yaitu PC dan Handphone teman - teman. Kenapa menggunakan Vysor? Supaya tidak terlalu berat dan membebankan PC kalian, akan tetapi kalian juga bisa RUN langsung dari PC nya jika PC kalian memenuhi spesifikasi Android Studio atau bahkan lebih tanpa harus menggunakan emulator tambahan ini. Dan inilah hasilnya...

HASIL Challenge AppResource Happiness Meter

Demikianlah Pengenalan Komponen UI (PickerView & ListView) dengan Penggunaan AppResource dan juga implementasi. Semoga apa yang disampaikan bisa mermanfaat bagi teman - teman semua, mohon maaf jika ada kesalahan dan kekurangan lainnya. Sampai jumpa di pembahasan selanjutnya.

Terima Kasih!!!

Continue reading Pengenalan Komponen User Interface (PickerView & ListView) dan Penggunaan Application Resource Pada Android Studio