Kenal Android Kuy!!!!!!!!

 

Apa itu Android

Android adalah sistem operasi yang dikeluarkan oleh Google. Android dibuat khusus untuk smartphone dan tablet. Berbagai macam produsen telah menggunakan Android sebagai sistem operasi untuk peranti (device) yang mereka produksi. Android juga mempunyai store dengan lebih dari 2 miliar pengguna aktif per bulannya, per Januari 2018.

 

 

Mengapa Android

Kenapa menggunakan Android ?

Android memanjakan penggunanya dengan fitur yang sangat canggih dan tampilan yang bagus. Sistem Android dapat digunakan sebagai alat multimedia seperti pemutar musik dan video. Ia juga memiliki perangkat keras seperti accelerometer, gyroscope dan sensor lainnya.

Di samping itu ada beberapa hal yang membuat Android menjadi sistem operasi yang memang layak digunakan oleh pengguna atau dikembangkan para developer, seperti yang akan diuraikan berikut ini.

 

Sistem Operasi Smartphone Terpopuler

Sejak dirilis tahun 2008, Google telah mengeluarkan beberapa versi, dengan "Oreo" sebagai versi yang terbaru.

Pada tahun 2013, Android menjadi operation system (OS) terlaris pada tablet dan smartphone. Kini market share Android sedikitnya 80 % dari total penjualan smarphone di tingkat global (statista.com). Tercatat pada tahun 2016 Android store memiliki lebih dari 2.8 juta aplikasi.

Android menarik bagi perusahaan teknologi yang membutuhkan barang siap jadi, biaya rendah dan kustomisasi OS untuk perangkat teknologi tinggi mereka. Hal ini menjadi daya tarik bagi banyak perusahaan, sehingga mereka memilih Android.

Source code dari Android bersifat open source. Ini adalah hal menarik bagi komunitas developer, karena lisensi open source sangat mendukung untuk mengembangkan produknya dengan aman.

 

Store

Aplikasi Android bisa didistribusikan menggunakan web, copy APK, dan store. Android store , yaitu Google Play, merupakan cara termudah bagi para developer untuk mendistribusikan aplikasinya ke pasar dengan miliaran pengguna.

Google play merupakan store resmi Android yang dikelola oleh Google. Pengguna bisa mencari dan mengunduh aplikasi yang dikembangkan dengan menggunakan Android Software Development Kit.

Google Play tak hanya menawarkan aplikasi. Ada beragam konten lainnya yang dapat dinikmati pengguna, misalnya media digital, musik, buku, majalah, film dan program televisi.

Bagaimana para developer memonetisasi aplikasi yang ada di dalam Google Play?

Strategi monetisasi aplikasi yang ditawarkan Google Play ada bermacam-macam. Dimulai dari app berbayar (paid distribution), pembelian dalam aplikasi (in-app purchase), langganan (subscriptions), dan iklan (ads). Tentunya developer harus mengikuti aturan yang ada untuk memastikan bahwa pengguna mendapatkan pengalaman (user experience) terbaik.

 

Development Kit untuk Developer

Android Software Development Kit (SDK) merupakan kit yang bisa digunakan oleh para developer untuk mengembangkan aplikasi berbasis Android. Di dalamnya, terdapat beberapa tools seperti debugger, software libraries, emulator, dokumentasi, sample code dan tutorial.

Bahasa pemrograman yang sering digunakan untuk mengembangkan aplikasi Android adalah Java. Namun ada beberapa bahasa lainnya yang dapat digunakan, seperti C++ dan Go. Pada IO 2017 Google juga menetapkan Kotlin sebagai tambahan bahasa resmi.

      

Berbicara tentang pemrograman tentunya tak lepas dari Integrated Development Environment (IDE). Pada 2014 Google mengeluarkan IDE yang bernama Android Studio yang berbasiskan Intellij IDEA.

Dengan menggunakan Android Studio, para developer dapat membuat aplikasi dari nol hingga dipublikasikan ke dalam store. Android Studio juga mempunyai beberapa fitur built-in yang sangat membantu para developer untuk memaksimalkan proses pembuatan aplikasi. Fitur-fitur ini misalnya Gradle, Code Completion, dan beragam integrasi dengan layanan dari Google, seperti Firebase.

 

Sejarah Perkembangan Android

Berikut adalah rangkaian sejarah perkembangan Android yang resmi diluncurkan oleh Google dari waktu ke waktu.

Version	Code name	Release date	API level	DVM/ART	New features	Icon
10	10	September 3, 2019	29	ART	Live Caption Smart Reply Sound Amplifier Dark Theme Privacy & Security Digital Wellbeing
9	Pie	August 6, 2018	28	ART	Adaptive Battery Adaptive Brightness
8.0-8.1	Oreo	October 25, 2017	26 - 27	ART	Picture-in-Picture
7.1 - 7.1.2	Nougat	August 22, 2016	24 - 25	ART	Multi window GIF Keyboard
6.0 - 6.0.1	Marshmallow	October 5, 2015	23	ART	Now On Tap Permissions Battery (Doze & App Standy)
5.1 - 5.1.1	Lollipop	November 12, 2014	21 - 22	ART	Material Design Multiscreen Notifications
4.4 - 4.4.4	KitKat	October 31, 2013	19 - 20	DVM (and ART 1.6.0)	Voice : Ok Google Immersive Design Smart Dialer
4.1 - 4.3.1	Jelly Bean	July 9, 2012	18	DVM	Google Now Actionable Notifications Account Switching
4.0 - 4.6	Ice Cream Sandwich	October 19, 2011	15	DVM	Custom Home Screen Data Usage Control Android Beam
3.0 - 3.2.6	HoneyComb	February 22, 2011	11 - 13	DVM	Tablet-Friendly Design System Bar Quick Settings
2.3 - 2.3.7	Gingerbread	February 9, 2011	9 - 10	DVM	Gaming APIs NFC Battery Management
2.2 - 2.23	Froyo	May 20, 2010	8	DVM	Voice Action Portable Hotspot Dalvik JIT
2.0 - 2.1	Eclair	October 26, 2009	5	-	Google Maps Navigation Home Screen Customization Speech-to-Text
1.6	Donut	September 15, 2009	4	-	Quick Search Box Screen Size Diversity Android Market
1.5	Cupcake	April 27, 2009	3	-	-

Sources : https://en.wikipedia.org/wiki/Android_(operating_system)

ART dan DVM

Dari tabel sejarah perkembangan di atas dapat kita lihat ada kolom DVM / ART. Kolom ini menunjukkan eksekusi kompilasi ketika menjalankan aplikasi Android. Pada API KitKat dan sebelumnya Android menggunakan DVM (Dalvik Virtual Machine). DVM menerapkan pendekatan JIT (Just-In-Time), di mana kompilasi dijalankan ketika ada permintaan untuk menjalankan aplikasi.

Sedangkan ART (Android Runtime) menerapkan pendekatan berbeda yaitu AOT (Ahead-Of-Time). AOT melakukan kompilasi pada saat proses instalasi aplikasi.

Dari versi Lollipop hingga Oreo, Android sepenuhnya mengadopsi ART. Kenapa demikian ?

DVM menggunakan JIT yang berarti kompilasi dilakukan setiap kali aplikasi dijalankan. Hal ini sangat mempengaruhi kecepatan respon aplikasi. Setiap kali kita menyentuh ikon aplikasi maka kompilasi akan dilakukan. Tentu proses ini menghabiskan CPU dan berimbas pada relatif lebih borosnya penggunaan baterai.

Beda dengan DVM, ART melakukan proses kompilasi pada saat proses instalasi. Jadi setiap kali aplikasi dijalankan, sudah tidak ada lagi proses kompilasi. Hal ini meningkatkan performa dalam menjalankan aplikasi. Selain itu karena penggunaan sumber daya CPU bisa dikurangi, pemakaian baterai jadi lebih hemat. Akan tetapi ART membutuhkan space (ukuran berkas) yang lebih besar jika dibandingkan dengan DVM.

Jika ingin mendalami proses run-time yang ada di Android, silakan klik tautan berikut ini: 

• https://source.android.com/devices/tech/dalvik/

Beberapa bacaan dasar yang dapat menambah wawasan Anda, antara lain: 

• https://www.android.com/history/
• https://en.wikipedia.org/wiki/Android_version_history

Android Studio

Android Studio adalah Lingkungan Pengembangan Terpadu - Integrated Development Environment (IDE) untuk pengembangan aplikasi Android, berdasarkan IntelliJ IDEA. Selain merupakan editor kode IntelliJ dan alat pengembang yang berdaya guna, Android Studio menawarkan fitur lebih demi meningkatkan produktifitas Anda saat membuat aplikasi Android, misalnya:

• Sistem versi berbasis Gradle yang fleksibel
• Emulator yang cepat dan kaya fitur
• Lingkungan yang menyatu untuk pengembangan bagi semua perangkat Android
• Instant Run untuk mendorong perubahan ke aplikasi yang berjalan tanpa membuat APK baru
• Template kode dan integrasi GitHub untuk membuat fitur aplikasi yang sama dan mengimpor kode contoh
• Alat pengujian dan kerangka kerja yang ekstensif
• Alat Lint untuk meningkatkan kinerja, kegunaan, kompatibilitas versi, dan masalah-masalah lain
• Dukungan C++ dan NDK
• Dukungan bawaan untuk Google Cloud Platform, mempermudah pengintegrasian Google Cloud Messaging dan App Engine

 

Persyaratan Sistem

Windows	Mac	Linux
Microsoft® Windows® 7/8/10 (32- atau 64-bit) RAM minimum 3 GB, RAM yang disarankan 8 GB; tambah 1 GB untuk Android Emulator Ruang disk minimum yang tersedia 2 GB, Disarankan 4 GB (500 MB untuk IDE + 1,5 GB untuk Android SDK dan gambar sistem emulator) Resolusi layar minimum 1280 x 800	Mac® OS X® 10.10 (Yosemite) atau lebih baru, hingga 10.13 (macOS High Sierra) RAM minimum 3 GB, RAM yang disarankan 8 GB; tambah 1 GB untuk Android Emulator Ruang disk minimum yang tersedia 2 GB, Disarankan 4 GB (500 MB untuk IDE + 1,5 GB untuk Android SDK dan gambar sistem emulator) Resolusi layar minimum 1280 x 800	Desktop GNOME atau KDE Telah diuji pada Ubuntu® 14.04 LTS, Trusty Tahr (distribusi 64-bit yang mampu menjalankan aplikasi 32-bit) Distribusi 64-bit yang mampu menjalankan aplikasi 32-bit GNU C Library (glibc) 2.19 atau lebih baru RAM minimum 3 GB, RAM yang disarankan 8 GB; tambah 1 GB untuk Android Emulator Ruang disk minimum yang tersedia 2 GB, Disarankan 4 GB (500 MB untuk IDE + 1,5 GB untuk Android SDK dan gambar sistem emulator) Resolusi layar minimum 1280 x 800

How to Install

 

Java

Salah satu Bahasa yang bisa digunakan untuk development Android adalah Java. Selain Java ada beberapa Bahasa lain yang bisa digunakan seperti C/C++, Go, dan Kotlin (per Mei 2017).

Pada akademi ini kita hanya akan fokus menggunakan Java sebagai Bahasa pemrograman. Oleh karena itu mari instal dulu software yang harus kita gunakan untuk coding (menuliskan baris code). Siapkan senjata Anda sebelum berperang.

Instal Java Development Kit yang bisa kita dapatkan pada tautan berikut:

• http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

Biasanya muncul pertanyaan "Apakah JRE cukup?" Tidak, JRE adalah Java Runtime Environment yang berfungsi sebagai Virtual Machine untuk menjalankan program Java. Sedangkan JDK merupakan Java SE Development Kit, di mana JRE juga terdapat di dalamnya. Dan yang lebih penting adalah di dalamnya terdapat compiler dan tools untuk membuat dan compile program.

Sederhananya JRE untuk menjalankan program, sedangkan JDK untuk membuat program.

Mari kita mulai dengan proses instalasi dari JDK.

1. Langsung saja buka tautan di atas menggunakan browser Anda. Pilih Java Platform (JDK).  
   

2.    Lalu pilihlah yang sesuai dengan gawai (device) dan OS yang Anda pakai. Jangan lupa untuk melakukan Accept License Agreement.

3.    Setelah proses mengunduh selesai, langsung instal ke gawai Anda dan ikuti petunjuknya sampai selesai.

 

Android Studio

Pada akademi kali ini kita akan menggunakan Android Studio sebagai IDE (Integrated Development Environment). Android Studio dirilis 16 Mei 2013 saat Google IO berlangsung. Android Studio berbasiskan JetBrains Intellij IDEA, dan dikhususkan untuk pengembangan software berplatform Android.

Semua versi dari Android Studio dapat Anda unduh pada tautan ini:

• https://developer.android.com/studio/archive.html

Atau versi terbarunya:

• https://developer.android.com/studio/index.html#downloads
  
  

Mari langsung saja kita mulai instalasi Android Studio.

1. Tampilan dari laman unduh Android Studio.
   

2.    Kemudian instal Android Studio ke gawai Anda dan Ikuti petunjuknya sampai selesai. Saat instalasi berlangsung Anda diminta untuk menginstal SDK(Software Development Kit) yang membutuhkan koneksi internet. Maka pastikan saat menginstal Anda terhubung dengan internet.

3.    Setelah selesai melakukan instalasi Android Studio, akan muncul seperti gambar di bawah ini. Artinya Aplikasi Android Studio sudah bisa digunakan.

 

Catatan : Untuk migrasi ke Android Studio 3.4 dari android 2.x terkadang perlu menyesuaikan beberapa kode terutama pada berkas gradle-nya. Silakan kunjungi tautan ini untuk keterangan lebih lanjut https://developer.android.com/studio/releases/gradle-plugin

Introduction to Android Studio

 

Agar mulus menggunakan Android Studio, baiknya Anda tahu bagaimana strukturnya terlebih dahulu. Bila terbiasa menggunakan produk IntelliJ IDEA lainnya, maka akan mudah bagi Anda untuk menavigasi tata letak dan struktur Android Studio ini. Yang berbeda adalah komponen tambahan pendukung yang membantu pengembangan dan pembuatan aplikasi Android. Yuk, kita kenali Android Studio, right from the git-go!!

Project Android Pertama

Kali pertama menjalankan Android Studio, Anda akan melihat tampilan seperti berikut ini.

Untuk memulai proyek baru pilihlah “Start a new Android Studio project”.

 

Project Wizard

Setelah proses instalasi Android Studio, mari kita mulai membuat sebuah aplikasi Hallo World, aplikasi pertama Anda.

1. Setelah melakukan “Start a new Android Studio project”, Anda diminta untuk melakukan konfigurasi dalam pembuatan proyek baru Anda. Dalam dialog ini Anda bisa memilih template dari Aplikasi yang akan Anda buat. Terdapat beberapa template yang bisa kita gunakan seperti Empty Activity, Login Activity, Navigation Drawer Activity dan lain-lain. Di dalam dialog ini kita bisa memilih target devices dari aplikasi yang akan kita buat.
   

2.    Dalam dialog ini Anda bisa memberi nama dari aplikasi, lokasi proyek Anda dan nama package. Nama package akan digunakan dalam identifikasi unik dari aplikasi kita ketika sudah di-publish. Kita juga dapat mengganti dari direktori di mana proyek kita akan disimpan. Kita juga bisa mengganti nilai minimum SDK, yang berfungsi untuk membatasi penggunaan API pada sebuah aplikasi. Di dalam dialog ini juga Anda bisa memberi nama dari Activity yang pertama kali yang Anda buat. Selain itu Anda juga bisa mengganti bahasa default pada aplikasi tersebut menjadi bahasa Java atau Kotlin.

Catatan: Untuk Android Studio versi 3.4 ke bawah, penggunaan AndroidX belum menjadi default. Jadi, silakan beri tanda centang pada "Use AndroidX.* artifacts" di setiap kali membuat project. Informasi lebih detail mengenai AndroidX bisa Anda lihat di sini, dan untuk melihat perubahan antara sebelum dan sesudah AndroidX, atau cara migrasi menggunakan AndroidX bisa lihat di sini. Perlu Anda ketahui juga, ketika Anda sudah menggunakan AndroidX maka Anda tidak bisa menambahkan library lama atau sebelum AndroidX.

3.     

Antarmuka Android Studio

OK, membuat proyek pertama kali di Project Wizard, done! Kali ini kita akan menemui tampilan penuh Android Studio. Untuk meningkatkan produktivitas, mari kita bahas lebih jauh tentang antarmuka (interface) dari Android Studio ini.

Di atas adalah screenshot tampilan penuh IDE Android Studio berbasis IntelliJ IDEA. Mungkin tampilan tersebut akan berbeda dengan tampilan di layar Anda karena perbedaan konfigurasi dan versi Android Studio.

 

Tools

Merupakan Tools yang sering digunakan dalam development seperti copy/paste, build, menjalankan aplikasi, hingga menjalankan emulator.

 

Navigasi

Membantu melihat struktur dari kedalaman (depth) dan posisi proyek yang saat ini sedang dibuka.  

 

Project Explorer dan Editor

Merupakan bagian utama dari IDE Android Studio di mana kita menuliskan kode. Pada tampilan di atas, sebelah kiri adalah struktur proyek kita dan sebelah kanan adalah editor. Bagian ini akan dibahas lebih detail di poin selanjutnya.

 

Tool window bar

Tools menu yang mengelilingi editor ini merupakan button yang dapat di-expand ataupun untuk menampilkan Tools secara detail dan individual. 

 

Status Bar

Terletak di bagian terbawah di Android Studio, ia berfungsi untuk menampilkan status proyek kita dan pesan peringatan (warning message), bila ada.

 

Struktur Proyek

Setiap proyek di Android Studio berisi satu atau beberapa modul dengan file kode sumber dan file sumber daya. Jenis-jenis modul mencakup:

• Modul Aplikasi Android
• Modul Pustaka
• Modul Google App Engine

Secara default, Android Studio akan menampilkan berkas proyek Anda dalam tampilan proyek Android, seperti yang ditampilkan dalam gambar berikut :

Tampilan disusun berdasarkan modul untuk memberikan akses cepat ke berkas sumber utama proyek Anda.

Secara default ketika kita membuat proyek baru, Android Studio akan menampilkan struktur yang lebih ringkas dan cepat sesuai dengan kebutuhan pengembangan Android. Bila ingin melihat struktur proyek dalam bentuk selain standar Android, kita dapat mengubahnya dengan tombol dropdown yang terdapat di atas project structure.

Pada bagian ini kita dapat mengganti tampilan project structure sesuai kebutuhan.

Mari kita bahas lebih detail tentang proyek yang baru saja kita buat.

Masing-masing modul aplikasi berisi folder berikut:

 

Android Manifest

Manifest adalah salah satu berkas yang harus ada di dalam sebuah proyek Android. Manifest akan memberikan beragam informasi penting kepada sistem Android. Sistem perlu mengetahui apa yang akan digunakan oleh aplikasi sebelum dijalankan.

Beberapa fungsi yang ada di dalam manifest adalah sebagai berikut.

• Nama Package
  
  

1.  <manifest xmlns:android="http://schemas.android.com/apk/res/android"

2.      package="com.dicoding.picodiploma.myapplication">

Package name merupakan sebagai identitas unik dari sebuah aplikasi. Identitas ini juga yang akan digunakan di dalam store untuk membedakan suatu aplikasi dengan aplikasi lainnya. Jangan pernah mengganti value di dalam package karena nantinya akan dikenali sebagai aplikasi yang lain, jika sudah masuk ke dalam store.

• Komponen Aplikasi
  Berfungsi untuk mendeskripsikan komponen dari aplikasi mulai dari activity, services, broadcast receiver, dan content provider.
  
  

1.  <application

2.      android:allowBackup="true"

3.      android:icon="@mipmap/ic_launcher"

4.      android:label="@string/app_name"

5.      android:roundIcon="@mipmap/ic_launcher_round"

6.      android:supportsRtl="true"

7.      android:theme="@style/AppTheme">

8.      <activity android:name=".MainActivity">

9.          <intent-filter>

10.             <action android:name="android.intent.action.MAIN" />

11.  

12.             <category android:name="android.intent.category.LAUNCHER" />

13.         </intent-filter>

14.     </activity>

15.  

16.     <service

17.         android:name=".MyIntentService"

18.         android:exported="false" />

19.  

20.     <receiver

21.         android:name=".MyReceiver"

22.         android:enabled="true"

23.         android:exported="true"></receiver>

24. </application>

Komponen aplikasi semuanya berada di antara tag <application>. Ia juga berfungsi sebagai penamaan kelas yang mengimplementasi komponen dan mendeskripsikan kemampuannya seperti intent-filter, di mana fungsinya mendeskripsikan bahwa komponen itu adalah yang pertama kali dijalankan. 

• Permission
  Mendeklarasikan permission apa saja yang harus dimiliki oleh aplikasi untuk akses ke dalam komponen API seperti internet, external storage, contact, dan juga untuk berinteraksi dengan aplikasi lainnya. Sebagai contoh ini adalah kode untuk permission Internet
  
  

1.  <uses-permission android:name="android.permission.INTERNET"/>

Kode ini biasanya diletakkan di atas tag <application> dan masih di dalam tag <manifest>

Java

Merupakan salah satu folder yang sering dipakai, berisi berkas source code kita yang ditulis dalam bahasa Java/Kotlin, termasuk juga kode Unit Test dan androidTest (Instrumentation Test).

Catatan: Penamaan folder "java" bisa juga diganti sesuai dengan bahasa yang dipakai, misal "kotlin." 

GeneratedJava

Berisi file hasil dari generate library atau sebuah kelas dari proyek Android.

Res / Resource

Mengatur resource di dalamnya, yang mana bukan berupa kode, melainkan layout aplikasi, sumber gambar, ikon, hingga style. Di dalam folder res ini juga terdapat sejumlah folder yang sudah diatur dan dikategorikan sesuai kebutuhan, seperti :

• Drawable
  Untuk menyimpan file gambar maupun ikon.
• Layout
  Salah satu folder yang sering dipakai untuk file desain aplikasi.
• Mipmap
  Untuk menyimpan logo dalam berbagai dimensi.
• Values
  Berisi berbagai macam sumber data, seperti colors.xml untuk warna, strings.xml untuk teks, dimens.xml untuk ukuran, dan styles.xml untuk membuat style atau template.

 

Gradle

Gradle merupakan open source build automation system. Automation system berguna untuk mengotomatisasi proses pembuatan dari software build dan proses-proses terkait lainnya termasuk compile source code menjadi binary code, packaging binary code, dan menjalankan automated test.

build.gradle (Project: MyApplication)

Merupakan software build tingkat teratas yang meliputi keseluruhan dari proyek dari sebuah aplikasi. Di dalamnya berisi konfigurasi semua modul yang ada di dalam proyek.

build.gradle (Module: app)

Merupakan software build yang ada pada setiap modul di dalam proyek sebuah aplikasi. Beberapa konfigurasi yang diedit di antaranya adalah android settings, defaultConfig dan productFlavors, buildTypes, dan dependencies. 

1.  apply plugin: 'com.android.application'

2.   

3.  android {

4.      compileSdkVersion 29

5.      defaultConfig {

6.          applicationId "com.dicoding.picodiploma.myapplication"

7.          minSdkVersion 15

8.          targetSdkVersion 29

9.          versionCode 1 //(Incremental)

10.         versionName "1.0"

11.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

12.     }

13.     buildTypes {

14.         release {

15.             minifyEnabled false

16.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

17.         }

18.     }

19. }

20.  

21. dependencies {

22.     implementation fileTree(dir: 'libs', include: ['*.jar'])

23.     implementation 'androidx.appcompat:appcompat:1.0.2'

24.     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

25.     testImplementation 'junit:junit:4.12'

26.     androidTestImplementation 'androidx.test:runner:1.2.0'

27.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

28. }

• Android Settings
  Di dalam block android kita bisa menetapkan compileSDKVersion dan buildToolsVersion.
• Default Config
  Di dalamnya terdapat properties seperti applicationID, minSdkVersion, targetSdkVersion dan test information.
• Build Types
  Di dalamnya terdapat properties dari debuggable, ProGuard enabling, debug signing, version name suffix dan test information.
• Dependencies
  Di dalamnya terdapat informasi tentang library yang digunakan oleh aplikasi.

Yang perlu diperhatikan di sini yaitu di bagian versionCode,  misal kita sudah publish aplikasi ke PlayStore dengan version code 1, maka ketika kita ingin meng-update aplikasinya lagi ke Playstore, kita perlu merubah version code-nya menjadi 2 (incremental), kalau tidak kita ubah maka PlayStore akan menolak APK yang kita upload.

 

Sync Project

Setiap kali terjadi perubahan informasi di dalam build.gradle kita harus melakukan sinkronisasi terlebih dahulu. Tombol sync now akan muncul pada sebelah kanan atas ketika terjadi perubahan.

Setelah proses sinkronisasi selesai maka akan muncul informasi pada log apakah proses sinkronisasi berhasil atau tidak.

 

Resource Manager

Resource Manager, berfungsi untuk memanajemen segala resource yang ada di proyek Anda seperti gambar, warna, layout dll. Jika Anda perhatikan struktur dari res, dengan menggunakan Resource Manager semua resource akan tampil di sini dan Anda bisa memanipulasinya sesuai kebutuhan Anda. 

 

Useful Tools pada Android Studio

Android Studio menyediakan fasilitas yang powerful di bawah IntelliJ IDEA ini. Banyak tools milik Android yang membantu kita saat mengembangkan Aplikasi. Mari kita bahas tools yang sering digunakan dan manfaatnya.  

 

Shortcut

Pencarian

·         Shift+Shift
Search Everywhere, atau dapat dikatakan pencarian semua jenis berkas yang masih dalam 1 proyek.

·         Ctrl+F 
Find, pencarian teks dalam salah satu berkas.

·         Ctrl+Shift+F
Find in path, pencarian teks di seluruh berkas proyek.

·         Ctrl+Shift+A
Find action, pencarian aksi atau perintah-perintah yang ada di Android Studio.

·         Ctrl+R 
Replace, mengganti teks di dalam berkas.

Navigasi

• Ctrl+N 
  Find Class, navigasi ke kelas tertentu.

·         Ctrl+Shift+N 
Find file, navigasi ke berkas.

·         Ctrl+B
Go to declaration, lompat ke deklarasi yang dipilih.

·         Alt+↑ 
Lompat ke method sebelumnya.

·         Alt+↓ 
Lompat ke method sesudahnya.

·         Ctrl+G 
Go to line, lompat ke baris tertentu.

·         Ctrl+E
Membuka berkas teranyar (recent file).

·         Ctrl+Left Mouse (or) Ctrl+Alt+F7
Melihat penggunaan pada variabel/objek yang diklik.

·         Alt+F7 / Ctrl+F7
Melihat penggunaan variabel/objek yang dipilih di seluruh berkas proyek.

·         Ctrl+Shift+B 
Mencari tahu implementasi dari variabel/objek yang dipilih.

Redaksi

·         Ctrl+D 
Menggandakan bagian yang dipilih.

·         Ctrl+Q 
Melihat dokumentasi dengan tampilan minimal.

·         Ctrl+P
Melihat isi dari parameter, penting ketika melihat method dari Android atau library lain.

·         Ctrl+Space 
Basic code completion, menampilkan saran untuk melengkapi kode Anda.

·         Ctrl+Shift+Space 
Smart code completion, menampilkan saran kode untuk melengkapi kode Anda dengan lebih pintar (menampilkan apa yang benar-benar terkait dengan kode Anda).

·         Alt+Insert
Generate code, menghasilkan (generate) kode. Perintah ini sangat memudahkan ketika membuat constructor dan setter/getter.

·         Ctrl+Alt+L
Memformat ulang kode, merapikan kode.

·         Ctrl+Y
Delete One Line, Menghapus satu baris kode.

·         Ctrl+V
Create variable, Membuat teks yang diblok menjadi sebuah variabel.

·         Ctrl+M
Create method, Membuat teks yang diblok menjadi sebuah fungsi.

·         Shift+F6
Rename, untuk mengganti nama suatu file atau variabel maupun fungsi.

Run

·         Ctrl+F9
Make project, build project.

·         Ctrl+Shift+F9
 Melakukan kompilasi pada berkas, package atau modul. 

·         Shift+F10
Run. Menjalankan aplikasi ke emulator atau devices.

·         Shift+F9
 Debug. Menjalankan aplikasi ke emulator atau devices dalam mode Debug, biasanya untuk keperluan testing.

 

Code Completion

Untuk meminimalisir salah ketik (typo) dalam pemanggilan class, method hingga variabel sebaiknya kita memanfaatkan Code Completion di Android Studio. Terdapat dua (2) jenis Code Completion yang sering digunakan di Android Studio:

·         Basic Code Completion

Ctrl+Space
Pemanggilan Code Completion standar untuk membantu kita melengkapi kode.

Ketika kita akan memanggil sebuah variabel, cukup ketikkan code completion di atas. Saran pun akan diberikan.

·         Statement Completion

Ctrl+Shift+Enter
Perintah ini sangat membantu karena kita bisa menyelesaikan kode tanpa harus mengetik lengkap dan tanpa tanda kurung, kurung siku, kurung kurawal, dan banyak macam pemformatan lainnya.
Kode di bawah ini ditulis sebelum menggunakan shortcut:


Kemudian kita menggunakan Statement Completion. Lihat apa yang terjadi!

Statement kita yang belum tuntas akan diselesaikan oleh Android Studio. Tentu hal ini akan mempercepat waktu kita dalam menggarap aplikasi. 

Selengkapnya Anda dapat mempelajarinya di sini: https://www.jetbrains.com/help/idea/2016.1/code-completion-2.html

 

Style dan Formatting

Gaya penulisan kode adalah seni dalam pemrograman. Kita memiliki signature style masing-masing, Semua tergantung pilihan kita sendiri. Tetapi kita tetap perlu memperhatikan bagaimana tata letak kode, apalagi bila suatu saat nanti kita membuat aplikasi bersama orang lain. Kode yang rapi itu enak dilihat dan memudahkan, baik kita maupun orang lain untuk membacanya. Secara default Android Studio memberikan code style formatting untuk tata letak kode yang kita miliki. Untuk menyesuaikan setelan Code Style, klik File > Settings > Editor > Code Style (Android Studio > Preferences > Editor > Code Style pada Mac.)

Bagaimana menurut Anda tentang kode di atas? Ya tidak ada yang salah. Namun Code Style berantakan dan tidak indah untuk dilihat.
Nah, kini kita akan melakukan kode formatting dengan menggunakan shortcut Ctrl+Alt+L. 

Hasilnya lebih baik, bukan?

Mungkin bila kode yang kita miliki sedikit, tidak terlalu berpengaruh. Tapi bila baris kode sudah mulai kompleks, formatting code seperti ini akan sangat membantu.

 

Sample Code

Android Studio juga membantu kita menemukan kode yang berkualitas dan best practice-nya. Melalui Google, Android Studio memiliki sample code yang bebas kita gunakan dan manfaatkan untuk kebutuhan kita belajar atau membuat aplikasi Android. Dengan mengakses File > New > Import Sample, kita punya banyak pilihan contoh kode yang bisa dipakai. 

Selengkapnya dapat kita jumpai di sini: https://developer.android.com/studio/write/sample-code.html

Run Emulator dan Device

Uji coba aplikasi wajib dilakukan seorang developer. Proses running atau debugging bisa dilakukan dengan dua cara, yaitu running dengan emulator atau peranti (device). Baik emulator maupun peranti memiliki kelebihan dan kekurangan masing-masing. Kita sebagai developer tinggal pilih mana yang sesuai  keperluan.

 

Persiapan Running Menggunakan Emulator

Sebelum menggunakan emulator, pastikan beberapa hal berikut ini:  

 

Virtualization

Untuk menjalankan emulator di dalam Android Studio, pastikan aspek virtualization. Sistem Anda harus memenuhi persyaratannya, yakni ketentuan prosesor dan sistem operasi dari laptop / PC yang Anda gunakan.

Processor 

• Prosesor Intel: Jika laptop/pc Anda menggunakan prosesor Intel, maka pastikan ia mendukung Intel VT-x, Intel EM64T (Intel 64), dan Execute Disable (XD) Bit functionality.
• Prosesor AMD: Jika laptop/pc Anda menggunakan AMD, maka pastikan bahwa ia support dengan AMD Virtualization (AMD-V) dan Supplemental Streaming SIMD Extensions 3 (SSSE3).

Sistem Operasi

• Intel: Jika menggunakan processor Intel maka Anda dapat menjalankannya di sistem operasi Windows, Linux, maupun Mac.
• AMD: Untuk prosesor AMD maka hanya bisa menjalankannya di sistem operasi Linux.

 

Konfigurasi Hardware Accelerated Execution Manager (HAXM)

Dalam beberapa device yang tidak mendukung Emulator, Anda perlu menginstal HAXM. HAXM adalah hardware-assisted virtualization engine yang menggunakan teknologi VT dari Intel untuk mempercepat aplikasi Android yang diemulasi di mesin host. HAXM diperlukan untuk menjalankan emulator di Android Studio.

HAXM diperlukan jika sistem operasi yang Anda gunakan adalah Windows atau Mac. Untuk menginstalnya, ikuti petunjuk berikut ini.

1. Buka SDK Manager.
2. Pilih SDK Update Sites, kemudian hidupkan Intel HAXM.
3. Tekan OK.
4. Cari berkas installer-nya di directory folder sdk komputer Anda,
   ~sdk\extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe.
5. Jalankan installer dan ikuti petunjuknya sampai selesai.

Catatan:
Jika HAXM sudah otomatis ter-install, maka Anda dapat melewati langkah di atas.

 

Menginstal Kernel-based Virtual Machine (KVM) untuk Pengguna Linux

Karena HAXM hanya untuk Windows dan Mac, bagaimana dengan sistem operasi Linux? Untuk Linux, Anda harus menginstal KVM. Sistem operasi Linux dapat support accelerated virtual machine dengan menggunakan KVM. Untuk instal KVM, Anda bisa menggunakan perintah berikut ini.

1.  $ sudo apt-get install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils ia32-libs-multiarch

Selengkapnya dapat Anda baca pada halaman ini https://developer.android.com/studio/run/emulator.html

https://developer.android.com/studio/run/emulator-acceleration.html

 

Menggunakan Emulator

OK, Anda sudah memastikan bahwa virtualization bisa berjalan di komputer. Kini ikuti langkah-langkah berikut untuk menjalankan aplikasi dengan menggunakan emulator built-in dari Android Studio.

1. Jalankan ikon, kemudian akan muncul dialog seperti ini. Mari kita coba buat emulator baru dengan memilih Create New Virtual Device.
   

2.    Akan muncul dialog dengan pilihan beberapa emulator yang bisa langsung Anda gunakan.

3.    Jika anda ingin membuat spesifikasi hardware (perangkat keras) sendiri, Anda bisa memilihnya pada pilihan New Hardware Profile. Akan muncul dialog seperti di bawah ini.

Anda dapat menentukan konfigurasi hardware sesuai dengan kebutuhan Anda. Yang perlu diingat adalah untuk menggunakan konfigurasi emulator yang sesuai dengan kemampuan laptop atau komputer yang Anda gunakan.

4.    Anda dapat membuat hardware emulator baru atau memilih hardware emulator yang sudah ada. Setelah memilih hardware emulator, akan muncul dialog seperti ini.

Pada dialog ini Anda akan memilih versi android dari emulator yang akan anda buat. Pada dialog tersebut, Anda perlu memilih versi yang sudah diunduh yaitu Nougat. Tombol download di sebelah kanan versi menunjukkan bahwa Anda perlu mengunduhnya terlebih dahulu jika ingin menggunakannya.

5.    Selanjutnya klik Next. Akan muncul dialog verify configuration. Pada dialog ini, Anda bisa memeriksa konfigurasi dari emulator yang Anda pilih.
Pada bagian kiri bawah, terdapat tombol Show Advanced Settings. Bila Anda menekan tombol ini, akan muncul tampilan dialog baru seperti gambar di bawah ini.
Pada bagian advanced setting, Anda bisa mengubah konfigurasi hardware yang telah ditentukan sebelumnya.

6.    Jika sudah selesai, Anda dapat menekan tombol Finish. Anda dapat membuka emulatornya dengan menekan tombol hijau yang ada di sebelah kanan.

7.    Pengaturan emulator sudah selesai dan bisa langsung dijalankan.

 

Run dengan device

Bila Anda hendak melakukan run atau debugging, lebih baik Anda menjalankannya pada peranti smartphone asli. Running dengan menggunakan peranti memiliki beberapa kelebihan jika dibandingkan dengan emulator yaitu:

• Lebih cepat,
• Fitur seperti geo-location, push notif bisa digunakan,
• Bisa mengetahui daya serap baterai terhadap aplikasi,
• Lebih mudah.

Dengan menggunakan peranti smartphone asli, kita dapat memastikan bahwa aplikasi kita berjalan dengan wajar ketika sudah sampai di tangan pengguna. Kendala dari pendekatan ini adalah beragamnya model peranti yang ada di pasaran. Namun, pembahasan mengenai hal tersebut tidak tercakup dalam kelas ini.

Mari ikuti langkah-langkah untuk menjalankan proses run atau debugging. Tampilan dari langkah berikut bisa dipastikan akan berbeda dengan peranti yang Anda pakai. Akan tetapi secara garis besar langkahnya akan sama.

1. Pastikan peranti yang akan dipakai sesuai dengan target SDK atau paling tidak mendukung versi SDK terendah yang digunakan aplikasi.
2. Buka setting dan masuk ke dalam menu About. Pada halaman menu ini, Anda perlu menemukan informasi tentang Build number.
   
   
   

3.    Kemudian tekan Build number sebanyak 7 kali.

4.    Kembali ke menu setting di awal dan akan muncul menu baru di bawah about yaitu Developer Options.

5.    Masuk ke dalam menu Developer Options dan pastikan opsi USB Debugging Mode sudah on.

 

6.    Setelah menyelesaikan pengaturan pada peranti, peranti pun dapat dihubungkan dengan laptop atau komputer yang Anda pakai.

 

Catatan : Beberapa vendor smartphone memiliki sistem operasi yang unik. Tampilan setting dan letak opsi bisa jadi tak sama dengan gambar di atas. Beberapa vendor juga mengharuskan Anda untuk mengunduh driver khusus sebelum bisa menghubungkannya ke Android Studio. Kami sarankan untuk mengunjungi website / membaca petunjuk yang sesuai dengan vendor dari peranti Anda.

Anda bisa unduh ADB Driver di tautan berikut:

• http://adbdriver.com/downloads/
• https://adb.clockworkmod.com/

 

Build APK

 

Salah satu langkah terakhir yang perlu dilakukan setelah mengembangkan aplikasi Android adalah membuat berkas executable dalam format APK (Android Application Package). Berkas ini yang akan didistribusikan oleh Google Play ke pengguna. Jadi, ketika Anda hendak mempublikasikan Aplikasi Anda ke Google Play, berkas inilah yang harus Anda unggah.

Jika Anda belum memahami berkas APK, Anda dapat menyamakannya dengan berkas exe di windows atau ipa di iOS.

Cara membuat file APK di Android terbilang cukup mudah. Anda dapat menggunakan sebuah wizard atau melalui command line. Pada modul ini, kita akan fokus menggunakan wizard.

Membuat APK terbagi menjadi 2 yakni dengan menggunakan: 

1. Default keystore
2. Custom keystore

Keystore adalah sebuah berkas biner yang berisi informasi tentang satu atau lebih private key. Private key ini digunakan untuk mencegah pemalsuan aplikasi. Konsep umumnya adalah:

• Sistem Operasi Android mewajibkan semua APK di-sign sebelum terpasang ke dalam device.
• Proses signing ini membutuhkan Public dan Private Key.
• Proses signing ini berlangsung selama pembuatan APK dalam mode debug maupun released.
• Sebuah sertifikat digital public key, atau identity certificate, berisi informasi mengenai sertifikat itu sendiri dan metadata dari pemilik sertifikat tersebut. Pemilik sertifikat ini biasanya adalah developer yang mengembangkan aplikasi.
• Public key yang digunakan dalam proses signing di atas akan dilampirkan di dalam berkas APK. Proses ini dilakukan secara otomatis oleh Android Studio.
• Ketika Anda hendak memperbarui Aplikasi Anda pada Google Play, maka Google Play hanya akan menerimanya bila keystore yang digunakan sama dengan keystore yang pertama kali Anda gunakan ketika mengunggah Aplikasi tersebut ke Google Play.

Kegunaan lain dari keystore adalah:

• Untuk integrasi ke layanan Google seperti Google Maps dengan menggunakan nilai hash (digest SHA1) di dalamnya.
• Untuk integrasi ke layanan API Facebook dengan menggunakan key hash base64 yang terkandung di dalam keystore.

Keystore merupakan sebuah berkas penting yang harus Anda jaga, terlebih ketika aplikasi Anda memiliki jumlah unduhan pengguna yang banyak. Sebabnya, kelalaian menjaga keystore ini dapat menghalangi Anda untuk memperbarui aplikasi. Akibat terburuk adalah Anda harus melakukannya dari awal lagi.

Berikut adalah tips yang bisa Anda gunakan untuk mengamankan keystore :

1. Pilih kata kunci (password) yang sulit ditebak. Kombinasikan angka, alfabet dan simbol dalam membuatnya.
2. Bedakan antara keystore password dan key password ketika membuat berkas APK dengan custom keystore.
3. Jangan memberikan keystore kepada orang yang tidak dipercaya apalagi meletakkannya di dalam berkas proyek aplikasi.
4. Letakan di tempat yang Anda ingat dan aman tentunya.

Untuk memahami hal di atas lebih jauh, baca tautan berikut:

• App Signing

Jika Anda ingin menemukan default keystore Anda, maka pengguna Mac dapat menemukannya di ~/.android/debug.keystore. Sementara itu pengguna Windows bisa menemukannya di  C:\User\YourUser\.android\debug.keystore.

 

CodeLab Build APK

Untuk mulai melakukan proses build APK, Anda dapat mengikuti langkah berikut:

1. Buka kembali proyek kosong yang telah kita buat sebelumnya.
2. Sekarang klik menu Build → Build Bundles(s) / APK(s) → Build APK(s).
   

3.    Gradle akan membuat berkas APK secara otomatis. Lama proses ini bergantung pada seberapa kompleks Aplikasi yang Anda buat dan jumlah dependency yang Anda gunakan serta spesifikasi perangkat yang Anda gunakan.

4.    Ketika berhasil, Anda dapat melihat notifikasi pada sudut kanan atas Android Studio:

Sekarang tinggal Anda tekan tautan yang terdapat pada notifikasi tersebut. Secara otomatis Anda akan diarahkan ke lokasi di mana berkas APK disimpan.

Biasanya lokasinya mengikuti struktur project-name/module-name/build/outputs/apk/. Jika proyek bernama HelloWorld, maka lokasinya adalah HelloWorld/app/build/outputs/apk/apk-debug.apk.

5.    Sekarang coba Anda pindahkan berkas APK yang baru dibuat ke dalam sebuah peranti (device). Buka lokasi berkas tersebut menggunakan file explorer pada gawai tersebut. Kemudian lakukan instalasi aplikasi seperti biasa.

Selamat, aplikasi Android baru Anda sudah terpasang di peranti. Berkas APK ini bisa Anda berikan ke pengguna lain untuk dicoba.

6.    Mudah bukan? Sekarang kita lanjut membuat APK dengan custom keystore.  Ingat, APK yang baru saja Anda buat akan ditolak oleh Google Play Store jika Anda mencoba mengunggahnya ke Google Play Store karena Anda membuat APK dengan menggunakan default keystore. Agar dapat diterima, Anda harus menjalankan proses signing atau generate APK tersebut dengan menggunakan custom keystore.

7.    Kembali ke Proyek, klik Build → Generate Signed APK.

8. Selanjutnya, pilih APK.
   Apa bedanya dengan Android App Bundle? Android App Bundle adalah format baru yang mempunyai fitur dengan ukuran unduh lebih kecil, fitur on-demand aplikasi dan pembuatan modul asset tertentu saja. Anda bisa mempelajarinya lebih dalam di sini.

9.    Selanjutnya, pilih create new.
Pada form yang tampil lengkapi isian di dalamnya. Contoh pengisiannya adalah seperti gambar di bawah ini:
Berikut penjelasan tiap isiannya:

Keystore path	Anda perlu menentukan di mana lokasi keystore Anda
Password	Isikan keystore password minimal 6 digit dan bedakan dengan keypassword di bawahnya
Alias	Alias dari keystore
Password	keypassword
Validity	Berapa lama keystore Anda akan valid (dalam hitungan tahun)
Firstname hingga Country Code	Isikan metadata. Penting untuk mengisi data ini dengan benar.

10.  

11. Setelah selesai klik OK.

12. Dialog yang di awal akan secara otomatis terisi ketika Anda sudah berhasil mengisi form sebelumnya. Klik next untuk melanjutkan.

13. Jika muncul pertanyaan kata kunci, masukkan kata kunci yang Anda gunakan untuk laptop atau komputer.

14. Selanjutnya tentukan di mana Anda menyimpan APK yang dihasilkan. Di sini kami membiarkannya tetap default. Klik finish untuk memulai generate signed APK.
Anda diharuskan memilih Signature V1 atau V2. Google menyarankan untuk memilih V2 karena signature jenis ini akan membuat instalasi APK lebih cepat. Selain itu, ia lebih aman terhadap pergantian (alteration) program dengan tujuan yang tidak baik. Ikuti tautan ini untuk keterangan lebih lanjut.
https://developer.android.com/about/versions/nougat/android-7.0.html#apk_signature_v2

15. Perhatikan gradle process di status bar bagian bawah untuk melihat progress signed/generate APK.

16. Ketika berhasil, notifikasi seperti berikut akan tampil :

17. Selamat APK versi released Anda telah berhasil dibuat. Proses ini perlu ketika Anda hendak mempublikasikan aplikasi Anda di Google Play Store dan memperbaruinya di kemudian waktu.

Ketika Anda memperbarui aplikasi, jangan lupa mengubah nilai yang ada di dalam build.gradle(Module:app):

1.  versionCode 2 //Incremental

2.  versionName "2.0"

Modul Introduction

 

Dalam modul ini kita akan belajar tentang komponen-komponen dasar yang digunakan untuk membuat aplikasi android yang sederhana. Beberapa komponen di antaranya adalah :

1. Activity
   Merupakan satu komponen yang berhubungan dengan pengguna. Activity menangani window (tampilan) mana yang akan di tampilkan ke dalam interface (antarmuka). Activity memiliki daur hidup (life cycle) tersendiri yang dimulai dari onCreate hingga onDestroy.
   
   
   
2. Intent
   Komunikasi antar komponen di dalam sebuah aplikasi merupakan hal yang sangat sering dilakukan. Inilah peran dari suatu intent. Beberapa fungsi dari intent adalah dapat digunakan untuk menjalankan sebuah activity, mengirimkan pesan ke broadcast receiver, dan dapat juga digunakan untuk berkomunikasi dengan service yang sedang berjalan.
   
   
3. Views and ViewGroup
   Pada dasarnya semua elemen antar pengguna di aplikasi Android dibangun menggunakan dua buah komponen inti, yaitu view dan viewgroup. Sebuah view adalah obyek yang menggambar komponen tampilan ke layar yang mana pengguna dapat melihat dan berinteraksi langsung.
   Contoh komponen turunan dari view seperti :

o    TextView, komponen yang berguna untuk menampilkan teks ke layar.

o    Button, komponen yang membuat pengguna dapat berinteraksi dengan cara ditekan untuk melakukan sesuatu.

o    ImageView, Komponen untuk menampilkan gambar.

o    ListView, komponen untuk menampilkan informasi dalam bentuk list.

o    GridView, komponen untuk menampilkan informasi dalam bentuk grid.

o    RadioButton, komponen yang memungkinkan pengguna dapat memilih satu pilihan dari berbagai pilihan yang disediakan.

o    Checkbox, komponen yang memungkinkan pengguna dapat memilih lebih dari satu dari pilihan yang ada.

4. Style and Theme
   
   

Prinsip dasar dalam merancang antarmuka aplikasi Android harus mematuhi kaidah yang ditetapkan oleh Design Guideline. Guideline ini dibuat oleh tim Android di Google. Beberapa prinsipnya adalah:

• Menampilkan informasi yang hanya dibutuhkan.
• Jika aplikasi meminta izin pengguna untuk melakukan sebuah aksi, maka pengembang harus menyediakan mekanisme untuk membatalkan izin tersebut.
• Lakukan interupsi jika diperlukan.
• Menggunakan teks secara singkat. Gunakan gambar untuk menjelaskan informasi secara lebih deskriptif.
• Jaga data pengguna.
• Permudah pengguna untuk melakukan sesuatu yang penting secara cepat.
• Jika terlihat sama, maka perilaku haruslah sama.
• Bantu pengguna untuk membuat keputusan tapi tetap biarkan pengguna menentukan keputusannya.
  
  
4. RecyclerView
   
   

RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang pendahulunya listview. Ia bersifat lebih fleksibel. RecyclerView memiliki kemampuan untuk menampilkan data secara efisien dalam jumlah yang besar. Terlebih jika Anda memiliki koleksi data dengan elemen yang mampu berubah-ubah sewaktu dijalankan (runtime).

Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum menggunakan recyclerview.

• RecyclerView dan LayoutManager: Komponen antarmuka yang bertugas untuk menampilkan data set yang dimiliki di dalamnya. Layoutmanager akan mengatur posisi tampilan data baik itu secara list (vertikal), grid (baris dan kolom) atau staggered grid (grid yang memiliki susunan tak seragam / tak beraturan)

o    Adapter: Komponen yang akan mengatur bagaimana menampilkan data set ke dalam RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari file layout xml untuk tiap elemen dari data yang sebelumnya terpasang (bind) ke dalam RecyclerView.

o    Dataset: Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list maupun obyek map.

o    Item Animator: Ini yang spesial. Kita bisa pasang animasi untuk tiap item di dalamnya. Contoh animasi yang umum seperti penambahan (add) dan penghapusan (removal) item. Kita akan mempelajari hal ini pada materi terpisah.

Teori

1. Activity merupakan sebuah komponen di Android yang berfungsi untuk menampilkan user interface ke layar handset Android pengguna. Ini seperti pada saat Anda melihat daftar percakapan pada aplikasi chat atau daftar email pada aplikasi Gmail di ponsel Android Anda.
2. Umumnya dalam sebuah aplikasi terdapat lebih dari satu activity yang saling terhubung dengan tugas yang berbeda-beda.
3. Activity merupakan salah satu komponen penting Android yang memiliki daur hidup (life cycle) dalam sebuah stack pada virtual sandbox yang disiapkan oleh Dalvik Virtual Machine (DVM) atau Android Runtime (ART) yang bersifat last in first out.
4. Pada implementasinya, activity selalu memiliki satu layout user interface dalam bentuk berkas xml.
5. Suatu aplikasi Android bisa memiliki lebih dari satu activity dan harus terdaftar di berkas AndroidManifest.xml sebagai sub aplikasi.
6. Sebuah class Java dinyatakan sebuah activity jika mewarisi (extends) superclass Activity atau turunannya seperti AppCompatActivity dan FragmentActivity.

 

Untuk lebih mendalami activity, kami menyarankan Anda untuk membaca referensi berikut :

• Activities

 

Activity Lifecycle

Developer yang baik harus mengetahui secara detail tentang life cycle sebuah activity. Terutama untuk melakukan aksi yang tepat, saat terjadi perubahan state activity. Callback methods yang ada dapat digunakan untuk melakukan beragam proses terkait state dari activity. Misalnya melakukan semua inisialisasi komponen di onCreate(), melakukan disconnect terhadap koneksi ke server pada onStop() atau onDestroy() dan lain sebagainya.

Pemahaman yang baik tentang daur hidup activity akan membuat implementasi rancangan aplikasi Anda menjadi lebih baik. Hal ini juga akan meminimalisir terjadinya error/bug/force close yang tidak diinginkan.

 

Last In, First Out (LIFO)

 

Gambar 1	Gambar 2	Gambar 3
Aktif: Activity 1 onCreate() → onStart() → onResume()	Aktif: Activity 2 Stack append: Activity 2 [ onResume() ]	Activity 1 onStop() → onRestart() → onStart() → onResume()
Aksi: Klik Button1 (Pindah)	Aksi: Klik Hardware Back Button	Aktif: Activity 1
Stack append: Activity 1 [ onStop() ]	Activity 2 [ finish() ] Stack pop: Activity 2 [ onDestroy() ]

 

1. Gambar 1
   Jika Anda memiliki sebuah aplikasi yang terdiri dari 2 activity, maka activity pertama akan dijalankan setelah pengguna meluncurkan aplikasi melalui ikon aplikasi di layar device. Activity yang ada saat ini berada pada posisi activity running setelah melalui beberapa state onCreate (created) → onStart (started) → onResume (resumed) dan masuk ke dalam sebuah stack activity.
   Bila pada activity pertama Anda menekan sebuah tombol untuk menjalankan activity kedua, maka posisi state dari activity pertama berada pada posisi stop. Saat itu, callback onStop() pada activity pertama akan dipanggil.
   Ini terjadi karena activity pertama sudah tidak berada pada layar foreground / tidak lagi ditampilkan. Semua informasi terakhir pada activity pertama akan disimpan secara otomatis.
   Sementara itu, activity kedua masuk ke dalam stack dan menjadi activity terakhir yang masuk.
   
   
2. Gambar 2
   Activity kedua sudah muncul di layar sekarang. Ketika Anda menekan tombol back pada physical button menu utama atau menjalankan metode finish(), maka activity kedua Anda akan dikeluarkan dari stack.
   Pada kondisi di atas, state activity kedua akan berada pada destroy. Oleh karenanya, metode onDestroy() akan dipanggil.
   Kejadian keluar dan masuk stack pada proses di atas menandakan sebuah model Last In, First Out. Activity kedua menjadi yang terakhir masuk stack (Last In) dan yang paling pertama keluar dari stack (First Out).
   
   
3. Gambar 3
   Activity pertama akan dimunculkan kembali di layar setelah melalui beberapa state dengan rangkaian callback method yang terpanggil, onStop → onRestart → onStart → onResume.

 

Detailnya dapat Anda baca di sini :

• LifeCycle

 

Saving Activity State

Ketika sebuah activity mengalami pause kemudian resume, maka state dari sebuah activity tersebut dapat terjaga. Sebabnya, obyek activity masih tersimpan di memory sehingga dapat dikembalikan state-nya.

Dengan menjaga state dari activity, maka ketika activity tersebut ditampilkan, kondisinya akan tetap sama dengan kondisi sebelumnya.

Akan tetapi ketika sistem menghancurkan activity untuk keperluan memori misalnya karena memori habis, maka obyek activity dihancurkan. Alhasil, ketika activity ingin ditampilkan kembali diperlukan proses recreate activity yang dihancurkan tadi.

Kejadian di atas adalah hal yang lumrah terjadi. Oleh karena itu, perubahan yang terjadi pada activity perlu disimpan terlebih dahulu sebelum ia dihancurkan. Di sinilah metode onSaveInstanceState() digunakan.

Dalam onSaveInstanceState terdapat bundle yang dapat digunakan untuk menyimpan informasi. Informasi dapat disimpan dengan memanfaatkan fungsi seperti putString() dan putInt().

Ketika activity di-restart, bundle akan diberikan kepada metode onCreate dan onRestoreInstanceState. Bundle tersebut akan dimanfaatkan untuk mengembalikan kembali perubahan yang telah terjadi sebelumnya.

Proses penghancuran activity dapat juga terjadi ketika terdapat perubahan konfigurasi seperti perubahan orientasi layar (portrait-landscape), keyboard availability, dan perubahan bahasa. Penghancuran ini akan menjalankan callback method onDestroy dan kemudian menjalankan onCreate. Penghancuran ini dimaksudkan agar activity dapat menyesuaikan diri dengan konfigurasi baru yang muncul pada kejadian-kejadian sebelumnya.

Hal yang perlu diingat ketika menggunakan onSaveInstanceState adalah untuk tidak menyimpan data yang besar pada bundle. Contohnya, hindari penyimpanan data bitmap pada bundle. Bila data pada bundle berukuran besar, proses serialisasi dan deserialisasi akan memakan banyak memori.

Tujuan

Codelab ini bertujuan untuk mengimplementasikan komponen activity pada aplikasi pertama yang Anda bangun. Harapannya aktifitas ini dapat memberi gambaran yang jelas tentang cara kerja activity.

Codelab pertama adalah dengan membuat aplikasi yang dapat menghitung volume balok. Seperti ini tampilannya.

Logika Dasar

Melakukan input ke dalam obyek EditText → melakukan validasi input → melakukan perhitungan volume balok ketika tombol hitung diklik.

 

Codelab Membuat Proyek Baru

1.      Buat proyek baru dengan klik File → New → New Project pada Android Studio Anda atau Anda bisa memilih Start a new Android Studio project di bagian dashboard.

2. Pada bagian ini kita akan memilih tipe activity awal dari template yang telah disediakan. Saat ini Android Studio sudah menyediakan berbagai macam template activity dari yang paling sederhana hingga yang paling kompleks seperti:
   Add No Activity                           : Tidak ada activity yang ditambahkan
   Basic Activity                               : Activity dengan template komponen material design seperti FloatingActionButton
   Bottom Navigation Activity   : Activity dengan tampilan side bar menu di bagian bawah
   Empty Activity                             : Activity dalam bentuk yang paling dasar
   Fragment + ViewModel           : Activity dengan menerapkan architecture component
   Fullscreen Activity                     : Activity fullscreen tanpa status bar
   Google AdMob Ads Activity   : Activity dengan konfigurasi default iklan Admob
   Google Maps Activity                : Activity dengan menyediakan konfigurasi dasar Google Maps
   Login Activity                               : Activity untuk halaman login
   Master / Detail Flow                  : Activity yang diperuntukan untuk alur aplikasi master detail pada peranti tablet
   Navigation Drawer Activity   : Activity dengan tampilan side bar menu
   Scrolling Activity                        : Activity dengan kemampuan scroll konten didalamnya secara vertikal
   Settings Activity                         : Activity yang diperuntukkan untuk konfigurasi aplikasi
   Tabbed Activity                           : Activity yang diperuntukkan untuk menampilkan lebih dari satu tampilan, dapat digeser ke kanan dan ke kiri (swipe) dan dengan menggunakan komponen ViewPager
   
   Selain itu, Anda juga bisa memilih target device mana yang akan dibuat seperti Phone and Tablet, Wear OS, TV, Android Auto atau Android Things.
   Saat ini kita pilih tipe Empty Activity, klik Next untuk melanjutkan.
   
   
3. Selanjutnya masukkan nama aplikasi dan nama package aplikasi Anda. Sebaiknya jangan sama dengan apa yang ada di contoh, karena ini berfungsi sebagai id dari aplikasi yang Anda buat. Kemudian Anda bisa menentukan lokasi proyek yang akan Anda buat. Setelah itu pilih tipe gawai/peranti (device) untuk aplikasi beserta target minimum SDK yang akan digunakan. Pilihan target Android SDK akan mempengaruhi banyaknya peranti yang dapat menggunakan aplikasi. Di sini kita memilih nilai minimum SDK kita pasang ke Level 21 (Lollipop). Klik Finish untuk melanjutkan.
   

Catatan: Untuk Android Studio versi 3.4.1 ke bawah, penggunaan AndroidX belum menjadi default. Jadi, silakan beri tanda centang pada "Use AndroidX artifacts" di setiap kali membuat project. Informasi lebih detail mengenai AndroidX bisa Anda lihat di sini, dan untuk melihat perubahan antara sebelum dan sesudah AndroidX, atau cara migrasi menggunakan AndroidX bisa lihat di sini. Perlu Anda ketahui juga, ketika Anda sudah menggunakan AndroidX maka Anda tidak bisa menambahkan library lama atau sebelum AndroidX. Kelas ini sudah mendukung bahasa Kotlin. Untuk menggunakan bahasa Kotlin ubahlah languages dari Java menjadi Kotlin, maka secara otomatis Android Studio akan menyesuaikan dengan bahasa Kotlin.

4.  
5. Tampilan layar Anda akan seperti contoh di bawah ini:
   
6. Di sebelah kanan Anda adalah workspace di mana Activity Anda berada dan bernama MainActivity dengan layout-nya activity_main.xml. Di sebelah kiri Anda terdapat struktur proyek, di mana nanti kita akan banyak menambahkan berbagai komponen baru, asset dan library. Untuk lebih mengenal Android Studio lebih dalam silakan baca materi ini https://developer.android.com/studio/intro/index.html.

 

Selanjutnya kita akan mulai melakukan pengkodean aplikasi atau lebih enaknya disebut ngoding.

Berikut flow umumnya:

1. Ngoding Layout untuk user interface aplikasi.
2. Ngoding Activity untuk menambahkan logika aplikasi.

Untuk mengoptimalkan proses pengetikan, Anda dapat memanfaatkan code completion dengan menekan ctrl + space. Android Studio juga akan mengimpor package dari komponen yang digunakan. 

Dilarang Keras untuk copy - paste! Ngoding pelan-pelan akan membuat Anda lebih jago di masa depan.

Selamat ngoding!

 

Codelab Layouting

Menambahkan Code Sederhana pada Layout Activity

1. Silakan pilih tab berkas activity_main.xml pada workspace Anda(res/layout/activity_main.xml).
   Pastikan project window pada pilihan Android, seperti di bawah ini.
   Maka akan ada tampilan seperti ini, kemudian pilih metode text.
   Dan tambahkan baris-baris berikut:
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:padding="16dp"

7.      android:orientation="vertical">

8.   

9.      <TextView

10.         android:layout_width="match_parent"

11.         android:layout_height="wrap_content"

12.         android:text="Panjang" />

13.  

14.     <EditText

15.         android:id="@+id/edt_length"

16.         android:layout_width="match_parent"

17.         android:layout_height="wrap_content"

18.         android:inputType="numberDecimal"

19.         android:lines="1" />

20.  

21.     <TextView

22.         android:layout_width="match_parent"

23.         android:layout_height="wrap_content"

24.         android:text="Lebar" />

25.  

26.     <EditText

27.         android:id="@+id/edt_width"

28.         android:layout_width="match_parent"

29.         android:layout_height="wrap_content"

30.         android:inputType="numberDecimal"

31.         android:lines="1" />

32.  

33.     <TextView

34.         android:layout_width="match_parent"

35.         android:layout_height="wrap_content"

36.         android:text="Tinggi" />

37.  

38.     <EditText

39.         android:id="@+id/edt_height"

40.         android:layout_width="match_parent"

41.         android:layout_height="wrap_content"

42.         android:inputType="numberDecimal"

43.         android:lines="1" />

44.  

45.     <Button

46.         android:id="@+id/btn_calculate"

47.         android:layout_width="match_parent"

48.         android:layout_height="wrap_content"

49.         android:text="Hitung" />

50.  

51.     <TextView

52.         android:id="@+id/tv_result"

53.         android:layout_width="match_parent"

54.         android:layout_height="wrap_content"

55.         android:gravity="center"

56.         android:text="Hasil"

57.         android:textSize="24sp"

58.         android:textStyle="bold" />

59. </LinearLayout>

Perlu diperhatikan root layout (tag layout terluar) yang dipakai di sini adalah LinearLayout. Jika kita menggunakan Android Studio versi 3 maka secara default root yang dipakai adalah ConstraintLayout. Agar sesuai dengan latihan ini, kita tinggal menggantinya menjadi LinearLayout.
Untuk Layout akan dibahas nanti pada modul yang berbeda.

2. Kemudian akan muncul warning pada atribut android:text pada layout tersebut.
   Ini karena kita melakukan hardcoding pada nilai string-nya. Mari kita hilangkan code warning tersebut dengan menekan Alt+Enter (option + return pada Mac) atau menekan lampu kuning yang muncul pada attribut android:text.
   Akan muncul dialog seperti ini, pilih extract string resource.
   

3.      Kemudian akan muncul dialog seperti di bawah ini. Sesuaikan dengan nama yang ada.

4.      Fungsi extract string resource akan secara otomatis menambahkan nilai dari android:text ke dalam berkas res → values → strings.xml.
Lakukan hal yang sama pada View lainnya hingga tidak ada warning lagi. Jika kita buka berkas strings.xml, maka isinya akan menjadi seperti ini:

1.  <resources>

2.      <string name="app_name">BarVolume</string>

3.      <string name="width">Lebar</string>

4.      <string name="height">Tinggi</string>

5.      <string name="calculate">Hitung</string>

6.      <string name="result">Hasil</string>

7.      <string name="length">Panjang</string>

8.  </resources>

5.      Maka kode di dalam activity_main.xml akan menjadi seperti ini:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:padding="16dp"

7.      android:orientation="vertical">

8.   

9.      <TextView

10.         android:layout_width="match_parent"

11.         android:layout_height="wrap_content"

12.         android:text="@string/length" />

13.  

14.     <EditText

15.         android:id="@+id/edt_length"

16.         android:layout_width="match_parent"

17.         android:layout_height="wrap_content"

18.         android:inputType="numberDecimal"

19.         android:lines="1" />

20.  

21.     <TextView

22.         android:layout_width="match_parent"

23.         android:layout_height="wrap_content"

24.         android:text="@string/width" />

25.  

26.     <EditText

27.         android:id="@+id/edt_width"

28.         android:layout_width="match_parent"

29.         android:layout_height="wrap_content"

30.         android:inputType="numberDecimal"

31.         android:lines="1" />

32.  

33.     <TextView

34.         android:layout_width="match_parent"

35.         android:layout_height="wrap_content"

36.         android:text="@string/height" />

37.  

38.     <EditText

39.         android:id="@+id/edt_height"

40.         android:layout_width="match_parent"

41.         android:layout_height="wrap_content"

42.         android:inputType="numberDecimal"

43.         android:lines="1" />

44.  

45.     <Button

46.         android:id="@+id/btn_calculate"

47.         android:layout_width="match_parent"

48.         android:layout_height="wrap_content"

49.         android:text="@string/calculate" />

50.  

51.     <TextView

52.         android:id="@+id/tv_result"

53.         android:layout_width="match_parent"

54.         android:layout_height="wrap_content"

55.         android:gravity="center"

56.         android:text="@string/result"

57.         android:textSize="24sp"

58.         android:textStyle="bold" />

59. </LinearLayout>

60.  

6.      Jika Anda perhatikan, hasil layout sementara akan menjadi seperti ini:

 

Codelab Kode Logika

Menambahkan Kode Logika Sederhana pada MainActivity.

1. Selanjutnya setelah selesai, lanjutkan dengan membuka berkas MainActivity dan lanjutkan ngoding baris-baris di bawah ini.
   Tambahkan beberapa variabel yang akan digunakan untuk menampung View.
• Java
• Kotlin

3.          private EditText edtWidth;

4.  private EditText edtHeight;

5.  private EditText edtLength;

6.  private Button btnCalculate;

7.  private TextView tvResult;

Kemudian inisiasi variabel yang telah kita buat dengan menambahkan kode berikut di dalam metode onCreate.

• Java
• Kotlin

10. @Override

11. protected void onCreate(Bundle savedInstanceState) {

12.     super.onCreate(savedInstanceState);

13.     setContentView(R.layout.activity_main);

14.  

15.     edtWidth = findViewById(R.id.edt_width);

16.     edtHeight = findViewById(R.id.edt_height);

17.     edtLength = findViewById(R.id.edt_length);

18.     btnCalculate = findViewById(R.id.btn_calculate);

19.     tvResult = findViewById(R.id.tv_result);

20. }

Kemudian tambahkan implementasi interface onClickListener pada kelas MainActivity.

• Java
• Kotlin

23. public class MainActivity extends AppCompatActivity implements View.OnClickListener {

24.  

25.     ...

26.  

27. }

Jika terdapat baris merah seperti ini:

Jangan khawatir! Silakan klik di atas baris merah tersebut dan klik pada ikon bola lampu. Atau dengan tekan tombol Alt+Enter (option+return pada Mac) atau menekan lampu merah yang muncul lalu pilih implement methods.
Maka secara otomatis akan ada penambahan metode onClick di kelas MainActivity. Tambahkan kode berikut ini.

• Java
• Kotlin

30. @Override

31. protected void onCreate(Bundle savedInstanceState) {

32.     super.onCreate(savedInstanceState);

33.     setContentView(R.layout.activity_main);

34.     

35.     ...

36.     

37.     btnCalculate.setOnClickListener(this);

38. }

39.  

40. @Override

41. public void onClick(View v) {

42.     if (v.getId() == R.id.btn_calculate) {

43.         String inputLength = edtLength.getText().toString().trim();

44.         String inputWidth = edtWidth.getText().toString().trim();

45.         String inputHeight = edtHeight.getText().toString().trim();

46.  

47.         boolean isEmptyFields = false;

48.         boolean isInvalidDouble = false;

49.  

50.         if (TextUtils.isEmpty(inputLength)) {

51.             isEmptyFields = true;

52.             edtLength.setError("Field ini tidak boleh kosong");

53.         }

54.  

55.         if (TextUtils.isEmpty(inputWidth)) {

56.             isEmptyFields = true;

57.             edtWidth.setError("Field ini tidak boleh kosong");

58.         }

59.  

60.         if (TextUtils.isEmpty(inputHeight)) {

61.             isEmptyFields = true;

62.             edtHeight.setError("Field ini tidak boleh kosong");

63.         }

64.  

65.         Double length = toDouble(inputLength);

66.         Double width = toDouble(inputWidth);

67.         Double height = toDouble(inputHeight);

68.  

69.         if (length == null) {

70.             isInvalidDouble = true;

71.             edtLength.setError("Field ini harus berupa nomer yang valid");

72.         }

73.  

74.         if (width == null) {

75.             isInvalidDouble = true;

76.             edtWidth.setError("Field ini harus berupa nomer yang valid");

77.         }

78.  

79.         if (height == null) {

80.             isInvalidDouble = true;

81.             edtHeight.setError("Field ini harus berupa nomer yang valid");

82.         }

83.  

84.         if (!isEmptyFields && !isInvalidDouble) {

85.  

86.             double volume = length * width * height;

87.  

88.             tvResult.setText(String.valueOf(volume));

89.         }

90.     }

91. }

Terakhir tambahkan kode untuk validasi nilai double.

• Java
• Kotlin

94. private Double toDouble(String str) {

95.     try {

96.         return Double.valueOf(str);

97.     } catch (NumberFormatException e) {

98.         return null;

99.     }

100.     }

Akhirnya kelas MainActivity akan memiliki kode seperti berikut ini.

• Java
• Kotlin

103.     public class MainActivity extends AppCompatActivity implements View.OnClickListener {

104.         private EditText edtWidth, edtHeight, edtLength;

105.         private Button btnCalculate;

106.         private TextView tvResult;

107.      

108.         @Override

109.         protected void onCreate(Bundle savedInstanceState) {

110.             super.onCreate(savedInstanceState);

111.             setContentView(R.layout.activity_main);

112.      

113.             edtWidth = findViewById(R.id.edt_width);

114.             edtHeight = findViewById(R.id.edt_height);

115.             edtLength = findViewById(R.id.edt_length);

116.             btnCalculate = findViewById(R.id.btn_calculate);

117.             tvResult = findViewById(R.id.tv_result);

118.      

119.             btnCalculate.setOnClickListener(this);

120.         }

121.      

122.         @Override

123.         public void onClick(View v) {

124.             if (v.getId() == R.id.btn_calculate) {

125.                 String inputLength = edtLength.getText().toString().trim();

126.                 String inputWidth = edtWidth.getText().toString().trim();

127.                 String inputHeight = edtHeight.getText().toString().trim();

128.      

129.                 boolean isEmptyFields = false;

130.                 boolean isInvalidDouble = false;

131.      

132.                 if (TextUtils.isEmpty(inputLength)) {

133.                     isEmptyFields = true;

134.                     edtLength.setError("Field ini tidak boleh kosong");

135.                 }

136.      

137.                 if (TextUtils.isEmpty(inputWidth)) {

138.                     isEmptyFields = true;

139.                     edtWidth.setError("Field ini tidak boleh kosong");

140.                 }

141.      

142.                 if (TextUtils.isEmpty(inputHeight)) {

143.                     isEmptyFields = true;

144.                     edtHeight.setError("Field ini tidak boleh kosong");

145.                 }

146.      

147.                 Double length = toDouble(inputLength);

148.                 Double width = toDouble(inputWidth);

149.                 Double height = toDouble(inputHeight);

150.      

151.                 if (length == null) {

152.                     isInvalidDouble = true;

153.                     edtLength.setError("Field ini harus berupa nomer yang valid");

154.                 }

155.      

156.                 if (width == null) {

157.                     isInvalidDouble = true;

158.                     edtWidth.setError("Field ini harus berupa nomer yang valid");

159.                 }

160.      

161.                 if (height == null) {

162.                     isInvalidDouble = true;

163.                     edtHeight.setError("Field ini harus berupa nomer yang valid");

164.                 }

165.      

166.                 if (!isEmptyFields && !isInvalidDouble) {

167.                     double volume = length * width * height;

168.                     tvResult.setText(String.valueOf(volume));

169.                 }

170.             }

171.         }

172.      

173.         private Double toDouble(String str) {

174.             try {

175.                 return Double.valueOf(str);

176.             } catch (NumberFormatException e) {

177.                 return null;

178.             }

179.         }

180.     }

 

2. Setelah selesai, silakan jalankan aplikasi dengan memilih menu Run → Run ‘app’ dari menu bar.
   Kemudian ada pilihan seperti ini.
   Itu tandanya adb (Android Debugger) pada peranti yang Anda punya telah terhubung dengan Android Studio. Jika Anda tidak memiliki peranti, maka Anda dapat menggunakan emulator. Ikuti materinya di modul sebelumnya https://www.dicoding.com/academies/14/tutorials/1132 atau di sini https://developer.android.com/studio/run/managing-avds.html.
   
   Kami merekomendasikan Anda menggunakan peranti Android sewaktu mengembangkan aplikasi. Selain karena beban memori pada peranti Anda akan jadi lebih rendah, pendekatan ini juga akan memungkinkan Anda untuk merasakan bagaimana aplikasi berjalan di device sebenarnya.
   
   Pilih OK untuk menjalankan dan tunggu hingga proses building dan instalasi APK selesai. Jika sudah, seharusnya hasilnya akan seperti ini.
   Silakan masukkan nilai panjang, lebar dan tinggi kemudian tekan tombol Hitung dan hasilnya akan ditampilkan di obyek textview tvHasil.
   
   
3. Apakah kita sudah selesai?
   Belum! Masih ada yang kurang. Ketika nilai volume sudah dihitung dan kemudian terjadi pergantian orientasi (portrait-landscape) pada peranti, maka hasil perhitungan tadi akan hilang.
   Untuk mengatasinya, tambahkan metode onSaveInstanceState() pada MainActivity dan sesuaikan seperti berikut:

• Java
• Kotlin

2.  private static final String STATE_RESULT = "state_result";

3.   

4.  ...

5.   

6.  @Override

7.  protected void onSaveInstanceState(Bundle outState) {

8.      super.onSaveInstanceState(outState);

9.      outState.putString(STATE_RESULT, tvResult.getText().toString());

10. }

Kemudian tambahkan juga beberapa baris berikut pada baris terakhir metode onCreate.

• Java
• Kotlin

13. @Override

14. protected void onCreate(Bundle savedInstanceState) {

15.     super.onCreate(savedInstanceState);

16.     setContentView(R.layout.activity_main);

17.  

18.     ...

19.  

20.     if (savedInstanceState != null) {

21.         String result = savedInstanceState.getString(STATE_RESULT);

22.         tvResult.setText(result);

23.     }

24. }

 

4. Silakan jalankan kembali aplikasinya. Ulangi proses perhitungan seperti sebelumnya. Kemudian ganti orientasi peranti Anda. Jika sudah benar maka hasil perhitungan tidak akan hilang. 

 

Bedah Kode

Pembahasan tentang layout xml

Layout merupakan user interface dari suatu activity. Layout dituliskan dalam format xml (extensible markup language).

1.  xml version="1.0" encoding="utf-8"?>

Baris ini mengidentifikasi bahwa berkas ini berformat xml.

1.  xmlns:android="http://schemas.android.com/apk/res/android"

Kode di atas menandakan namespace yang digunakan dalam keseluruhan berkas xml ini.

 

Macam Views

Di sini kita menggunakan beberapa komponen user interface yang disebut view. Di antaranya:

TextView             : Komponen view untuk menampilkan teks ke layar

EditText               : Komponen view untuk memberikan input teks

Button                  : Komponen view untuk melakukan sebuah aksi klik

LinearLayout     : Komponen view bertipe viewgroup yang menjadi parent dari semua sub komponen view (sub view) di dalamnya. Komponen ini bersifat sebagai kontainer untuk komponen lain dengan orientasi secara vertikal atau horizontal.

Cara membaca :

1.   <TextView

2.      android:layout_width="match_parent"

3.      android:layout_height="wrap_content"

4.      android:text="@string/calculate"

5.      android:layout_marginBottom="16dp"/>

Komponen di atas adalah sebuah TextView. Perhatikan gambar di bawah ini. Warna ungu menandakan namespace yang digunakan; warna biru adalah atribut dari komponen dan warna hijau adalah nilai dari atribut. Penjelasannya seperti di bawah ini:

match_parent: Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran layar secara horizontal jika pada layout_width dan vertikal jika pada layout_height.

wrap_content : Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran konten di dalamnya baik secara horizontal pada layout_width dan vertikal jika pada layout_height.

@string/calculate: value calculate berasal dari berkas strings.xml yang bisa Anda lihat dengan cara menekan dan tahan tombol Ctrl (atau command) + arahkan kursor ke atasnya dan kemudian klik sekali. .

Penggunaan centralize resource value akan memudahkan Anda sewaktu mengembangkan aplikasi Android. Cara tersebut digunakan agar Anda tidak menulis nilai yang sama berulang-ulang. 

 

Apa itu ‘@+id/’ ? 

Salah satu contoh penerapan penggunaan @+id/ sebagai berikut:

1.  <Button

2.      android:id="@+id/btn_calculate"

3.      android:layout_width="match_parent"

4.      android:layout_height="wrap_content"

5.      android:text="@string/calculate"/>

Penjelasannya sebagai berikut:

1.  android:id="@+id/btn_calculate"

Jika kita memberikan id pada sebuah view maka kita telah memberikan identifier untuk view tersebut. Pemberian id ini dimaksudkan agar kita bisa melakukan manipulasi/pengendalian pada level logic di komponen seperti activity atau fragment.

Id di atas akan diciptakan di berkas R dan disimpan dalam bentuk hexa bertipe data integer public static final int btn_calculate=0x7f0b0057.

 

Acuan untuk menyusun tampilan pada relativelayout akan dibahas pada modul selanjutnya.

 

Pembahasan tentang Logika Kode

Kode logika dituliskan ke dalam kelas Java atau Koltin. Di sinilah semua aktifitas dari suatu aplikasi berjalan.

Activity

• Java
• Kotlin

1.  public class MainActivity extends AppCompatActivity 

Menandakan bahwa kelas Java / Kotlin di atas merupakan sebuah activity karena inherit ke superclass bernama AppCompatActivity.

 

OnClickListener

• Java
• Kotlin

1.  implements View.OnClickListener 

Ini adalah listener yang kita implementasikan untuk memantau kejadian klik pada komponen tombol (button).

 

Views

• Java
• Kotlin

1.  private EditText edtWidth; 

2.  private EditText edtHeight;

3.  private EditText edtLength;

4.  private Button btnCalculate;

5.  private TextView tvResult;

Kode di atas mendeklarasikan semua komponen view yang akan dimanipulasi. Kita deklarasikan secara global agar bisa dikenal di keseluruhan bagian kelas.

 

OnCreate

• Java
• Kotlin

1.  @Override

2.  protected void onCreate(Bundle savedInstanceState) {

3.      super.onCreate(savedInstanceState);

4.      setContentView(R.layout.activity_main);

5.      edtWidth = findViewById(R.id.edt_width);

6.      edtHeight = findViewById(R.id.edt_height);

7.      edtLength = findViewById(R.id.edt_length);

8.      btnCalculate = findViewById(R.id.btn_calculate);

9.      tvResult = findViewById(R.id.tv_result);

10.  

11.     btnCalculate.setOnClickListener(this);

12. }

Metode onCreate() merupakan metode utama pada activity. Di sinilah kita dapat mengatur layout xml. Semua proses inisialisasi komponen yang digunakan akan dijalankan di sini. Pada metode ini kita casting semua komponen view yang kita telah deklarasikan sebelumnya, agar dapat kita manipulasi.

 

SetContentView

• Java
• Kotlin

1.  setContentView(R.layout.activity_main);

Maksud baris di atas adalah kelas MainActivity akan menampilkan tampilan yang berasal dari layout activity_main.xml.

 

Casting View

• Java
• Kotlin

1.  edtWidth = findViewById(R.id.edt_width);

Maksud dari baris di atas adalah obyek EditTextedtWidth disesuaikan (cast) dengan komponen EditText ber-ID edt_width di layout activity_main.xml melalui metode findViewById().

 

SetOnClickListener

• Java
• Kotlin

1.  btnCalculate.setOnClickListener(this); 

Kita memasang event click listener untuk obyek btnCalculate sehingga sebuah aksi dapat dijalankan ketika obyek tersebut diklik. Keyword this merujuk pada obyek Activity saat ini yang telah mengimplementasikan listener OnClickListener sebelumnya.  Sehingga ketika btnCalculate diklik, maka fungsi onClick akan dipanggil dan melukakan proses yang ada di dalamnya.

 

Mengambil value dari EditText

• Java
• Kotlin

1.  String inputLength = edtLength.getText().toString().trim();

2.  String inputWidth = edtWidth.getText().toString().trim();

3.  String inputHeight = edtHeight.getText().toString().trim();

Sintaks .text.toString() di atas berfungsi untuk mengambil isi dari sebuah EditText kemudian menyimpannya dalam sebuah variabel. Tambahan .trim() berfungsi untuk menghiraukan spasi jika ada, sehingga nilai yang didapat hanya berupa angka.

 

Cek inputan yang kosong

• Java
• Kotlin

1.  boolean isEmptyFields = false;

2.  boolean isInvalidDouble = false;

3.   

4.  if (TextUtils.isEmpty(inputLength)) {

5.      isEmptyFields = true;

6.      edtLength.setError("Field ini tidak boleh kosong");

7.  }

8.   

9.  if (TextUtils.isEmpty(inputWidth)) {

10.     isEmptyFields = true;

11.     edtWidth.setError("Field ini tidak boleh kosong");

12. }

13.  

14. if (TextUtils.isEmpty(inputHeight)) {

15.     isEmptyFields = true;

16.     edtHeight.setError("Field ini tidak boleh kosong");

17. }

Sintaks .isEmpty() berfungsi untuk mengecek apakah inputan dari Editext itu masih kosong. Jika iya, maka kita akan menampilkan pesan error dengan menggunakan .setError("Field ini tidak boleh kosong") dan mengganti variabel Boolean isEmptyField menjadi true supaya bisa lanjut ke proses selanjutnya.

 

Validasi input yang bukan angka

• Java
• Kotlin

1.  Double length = toDouble(inputLength);

2.  Double width = toDouble(inputWidth);

3.  Double height = toDouble(inputHeight);

4.   

5.  if (length == null) {

6.      isInvalidDouble = true;

7.      edtLength.setError("Field ini harus berupa nomer yang valid");

8.  }

9.   

10. if (width == null) {

11.     isInvalidDouble = true;

12.     edtWidth.setError("Field ini harus berupa nomer yang valid");

13. }

14.  

15. if (height == null) {

16.     isInvalidDouble = true;

17.     edtHeight.setError("Field ini harus berupa nomer yang valid");

18. }

19.  

20. ...

21.  

22. private Double toDouble(String str) {

23.     try {

24.         return Double.valueOf(str);

25.     } catch (NumberFormatException e) {

26.         return null;

27.     }

28. }

toDouble() adalah sebuah fungsi yang kita buat sendiri di luar onCreate untuk merubah data inputan yang sebelumnya berupa String menjadi Double, hal ini karena secara default input di EditText tipe datanya berupa String, padahal kita perlu dalam bentuk Double supaya bisa dilakukan proses perhitungan. Fungsi ini juga sekaligus mengecek apakah inputan yang dimasukkan berupa angka atau bukan, jika bukan maka ditaampilkan pesan error.

 

Menampilkan data ke EditText

• Java
• Kotlin

1.  if (!isEmptyFields && !isInvalidDouble) {

2.      double volume = length * width * height;

3.      tvResult.setText(String.valueOf(volume));

4.  }

Sintaks !isEmptyFields memiliki arti "jika semua inputan tidak kosong", dan !isInvalidDouble memiliki arti "jika semua inputan berisi angka". Jika kedua kondisi tersebut terpenuhi, maka langkah selanjutnya yaitu melakukan proses perhitungan dan kemudian kita tampilkan pada TextView tvResult dengan menggunakan .setText(). Di sini dapat kita lihat bahwa kita perlu merubah datanya yang sebelumnya Double menjadi String, karena untuk menampilkan data dengan setText() harus berupa String.

Pembahasan saveInstanceState 

• Java
• Kotlin

1.  @Override

2.  protected void onSaveInstanceState(Bundle outState) {

3.      super.onSaveInstanceState(outState);

4.      outState.putString(STATE_RESULT, tvResult.getText().toString());

5.  }

Perhatikan metode onSaveInstanceState. Di dalam metode tersebut, hasil perhitungan yang ditampilkan pada tvResult dimasukkan pada bundle kemudian disimpan isinya. Untuk menyimpan data disini menggunakan konsep Key-Value, dengan STATE_RESULT sebagai key dan isi dari tvResult sebagai value. Fungsi onSaveInstanceState akan dipanggil secara otomatis sebelum sebuah Activity hancur. Di sini kita perlu menambahkan onSaveInstanceState karena ketika orientasi berubah, Activity tersebut akan di-destroy dan memanggil fungsi onCreate lagi, sehingga kita perlu menyimpan nilai hasil perhitungan tersebut supaya data tetap terjaga dan tidak hilang ketika orientasi berubah.

 

• Java
• Kotlin

1.  if (savedInstanceState != null){

2.      String hasil = savedInstanceState.getString(STATE_RESULT);

3.      tvResult.setText(hasil);

4.  }

Pada onCreate inilah kita menggunakan nilai bundle yang telah kita simpan sebelumnya pada onSaveInstanceState. Nilai tersebut kita dapatkan dengan menggunakan Key yang sama dengan saat menyimpan, yaitu STATE_RESULT. Kemudian kita isikan kembali pada tvResult.

 

Selamat! Anda telah berhasil membuat dan menjalankan latihan Android pertama di peranti atau emulator. Silakan lanjut ke codelab berikutnya.

 

Anda dapat mengunduh source code materi ini di tautan berikut: 

• Source Code Barvolume (Java)
• Source Code Barvolume (Kotlin)

Teori

Intent adalah mekanisme untuk melakukan sebuah action dan komunikasi antar komponen aplikasi misal activity, services, dan broadcast receiver. Ada tiga penggunaan umum intent dalam aplikasi Android yaitu:

• Memindahkan satu activity ke activity lain dengan atau tidak membawa data.
• Menjalankan background service, misalnya melakukan sinkronisasi ke server dan menjalankan proses berulang (periodic/scheduler task).
• Mengirimkan obyek broadcast ke aplikasi yang membutuhkan. Misal, ketika aplikasi membutuhkan proses menjalankan sebuah background service setiap kali aplikasi selesai melakukan booting. Aplikasi harus bisa menerima obyek broadcast yang dikirimkan oleh sistem Android untuk event booting tersebut.

 

Intent memiliki dua bentuk yaitu:

1. Explicit Intent 
   Adalah tipe Intent yang digunakan untuk menjalankan komponen dari dalam sebuah aplikasi. Explicit intent bekerja dengan menggunakan nama kelas yang dituju misal : com.dicoding.activity.DetailActivity. Umumnya intent ini digunakan untuk mengaktifkan komponen pada satu aplikasi.
2. Implicit Intent 
   Adalah tipe intent yang tidak memerlukan detail nama kelas yang ingin diaktifkan. Model ini memungkinkan komponen dari aplikasi lain bisa merespon request intent yang dijalankan.
   Penggunaan tipe intent ini umumnya diperuntukkan untuk menjalankan fitur/fungsi dari komponen aplikasi lain. Contohnya ketika kita membutuhkan fitur untuk mengambil foto. Daripada membuat sendiri fungsi kamera, lebih baik kita menyerahkan proses tersebut pada aplikasi kamera bawaan dari peranti atau aplikasi kamera lain yang telah terinstal sebelumnya di peranti.
   Hal yang sama misalnya ketika kita membutuhkan fungsi berbagi konten. Kita bisa memanfaatkan intent untuk menampilkan aplikasi mana saja yang bisa menangani fitur tersebut.
   Implementasi implicit intent ini akan sangat memudahkan bagi pengembang agar tetap fokus pada proses bisnis inti dari aplikasi yang dikembangkan.

Tujuan

Codelab ini menitikberatkan pada implementasi intent untuk melakukan perpindahan dari activity ke activity lain, dengan atau tidak membawa data. Beberapa bagian dari codelab ini akan menjawab beberapa pertanyaan umum dalam pengembangan aplikasi Android sebagai berikut:

• Bagaimana berpindah dari satu activity ke activity lain?
• Bagaimana berpindah dari satu activity ke activity lain dengan membawa data?
• Single value dari suatu variabel.
• Obyek model Plain Old Java Object (POJO).
• Menjalankan komponen di aplikasi lain untuk keperluan membuka browser atau melakukan pemanggilan melalui aplikasi telepon bawaan?
• Mengirimkan hasil nilai balik melalui Intent.

Codelab selanjutnya adalah dengan membuat aplikasi yang dapat menerapakan kegunaan intent. Seperti ini tampilannya.

Logika Dasar

Berpindah dari satu Activity ke Activity lain dengan membawa data. Activity asal akan mengirimkan data melalui Intent dan Activity tujuan akan menerima data yang dikirimkan.

 

Codelab Intent Sederhana

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

Nama Project	MyIntentApp
Target & Minimum Target SDK	Phone and Tablet, Api level 21
Tipe Activity	Empty Activity
Activity Name	MainActivity
Use AndroidX artifacts	True
Language	Java / Kotlin

2. Selanjutnya kita akan membangun antarmuka (interface) seperti ini:
   
3. Kondisikan activity_main.xml menjadi seperti ini :
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:orientation="vertical"

7.      android:padding="16dp">

8.   

9.      <Button

10.         android:id="@+id/btn_move_activity"

11.         android:layout_width="match_parent"

12.         android:layout_height="wrap_content"

13.         android:layout_marginBottom="16dp"

14.         android:text="@string/move_activity" />

15. </LinearLayout>

4. Tambahkan juga resource string-nya. Tambahkan semua string yang akan digunakan di project ini. Buka berkas strings.xml dan tambahkan kode berikut ini.
   
   

1.  <resources>

2.       <string name="app_name">MyIntentApp</string>

3.       <string name="move_activity">Pindah Activity</string>

4.       <string name="move_with_data">Pindah Activity dengan Data</string>

5.       <string name="dial_number">Dial a Number</string>

6.       <string name="data_received">Data Diterima</string>

7.       <string name="this_is_moveactivity">Ini MoveActivity</string>

8.  </resources>

5. Kemudian untuk MainActivity.java tambahkan beberapa baris yang berfungsi untuk meperkenalkan button yang sudah ditambahkan di layout activity_main.xml seperti ini:

• Java
• Kotlin

3.  @Override

4.  protected void onCreate(Bundle savedInstanceState) {

5.      super.onCreate(savedInstanceState);

6.      setContentView(R.layout.activity_main);

7.   

8.      Button btnMoveActivity = findViewById(R.id.btn_move_activity);

9.  }

 

6. Lalu tambahkan beberapa baris yang berfungsi untuk menambahkan event onClick pada button btnMoveActivity seperti ini.

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity implements View.OnClickListener {

3.   

4.      @Override

5.      protected void onCreate(Bundle savedInstanceState) {

6.          super.onCreate(savedInstanceState);

7.          setContentView(R.layout.activity_main);

8.   

9.          Button btnMoveActivity = findViewById(R.id.btn_move_activity);

10.         btnMoveActivity.setOnClickListener(this);

11.     }

12.  

13.     @Override

14.     public void onClick(View v) {

15.         switch (v.getId()) {

16.             case R.id.btn_move_activity:

17.                 break;

18.         }

19.     }

20. }

 

7. Button btnMoveActivity akan memiliki fungsi untuk berpindah Activity ke Activity lain. Sekarang kita buat Activity baru dengan cara sebagai berikut: Klik kanan di package utama aplikasi package name → New → Activity → Empty Activity.
   
   
   Lalu isikan MoveActivity pada dialog. Ketika sudah klik Finish.
   
8. Untuk menandakan bahwa perpindahan activity berhasil, silakan tambahkan satu TextView dan kondisikan activity_move.xml menjadi seperti berikut.
   
   

0.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

1.      xmlns:tools="http://schemas.android.com/tools"

2.      android:layout_width="match_parent"

3.      android:layout_height="match_parent"

4.      android:padding="16dp">

5.   

6.      <TextView

7.          android:layout_width="match_parent"

8.          android:layout_height="wrap_content"

9.          android:text="@string/this_is_moveactivity" />

10. </RelativeLayout>

9. Setelah Activity tujuan sudah berhasil diciptakan, sekarang saatnya menambahkan suatu Intent pada method onClick() di MainActivity.java menjadi sebagai berikut.

• Java
• Kotlin

2.  @Override

3.  public void onClick(View v) {

4.     switch (v.getId()){

5.         case R.id.btn_move_activity:

6.              Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

7.              startActivity(moveIntent);

8.              break;

9.     }

10. }

 

10. Selesai! Langkah pertama untuk memindahkan satu Activity ke Activity lain sudah selesai, sekarang silakan jalankan aplikasi Anda dengan mengklik tombol pada menu bar. Seharusnya sekarang anda sudah bisa memindahkan Activity dengan mengklik tombol ‘Pindah Activity’.

Bedah Kode

Register Activity

Kita telah belajar bagaimana membuat suatu activity baru. Di materi sebelumnya, syarat suatu activity haruslah terdaftar pada berkas AndroidManifest.xml. Karena menggunakan Android Studio, proses pendaftaran tersebut dilakukan secara otomatis.

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3.      package="com.dicoding.picodiploma.myintentapp">

4.   

5.      <application

6.          android:allowBackup="true"

7.          android:icon="@mipmap/ic_launcher"

8.          android:label="@string/app_name"

9.          android:supportsRtl="true"

10.         android:theme="@style/AppTheme">

11.         <activity android:name=".MainActivity">

12.             <intent-filter>

13.                 <action android:name="android.intent.action.MAIN" />

14.  

15.                 <category android:name="android.intent.category.LAUNCHER" />

16.             </intent-filter>

17.         </activity>

18.         <activity android:name=".MoveActivity" />

19.     </application>

20.  

21. </manifest>

Perhatikan bahwa MoveActivity sudah teregistrasi di AndroidManifest.xml. Sekarang sudah aman jika kita melakukan perpindahan activity dari MainActivity ke MoveActivity.

Jika kita lupa meregistrasikan Activity baru ke dalam berkas AndroidManifest.xml, maka akan terjadi  eror seperti ini "android.content.ActivityNotFoundException:Unable to find explicit activity class."

 

Intent Filter

Berikutnya, perhatikan pada kode dengan tag intent-filter yang ada di dalam MainActivity.

1.  <intent-filter>

2.      <action android:name="android.intent.action.MAIN" />

3.      <category android:name="android.intent.category.LAUNCHER" />

4.  </intent-filter>

Intent-filter merupakan mekanisme untuk menentukan bagaimana suatu activity dijalankan oleh Android Runtime (ART) atau Dalvik Virtual Machine (DVM).

1.  <action android:name="android.intent.action.MAIN" />

Baris di atas bermakna bahwa MainActivity menjadi entry point ke aplikasi.

1.  <category android:name="android.intent.category.LAUNCHER" />

Kode di atas menandakan bahwa MainActivity akan dikategorikan sebagai activity launcher. Ini menandakan bahwa activity ini akan muncul di halaman home screen dalam bentuk launcher.

 

Pindah Activity

Selanjutnya, perhatikan kode berikut.

• Java
• Kotlin

1.  Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

2.  startActivity(moveIntent);

Kita membuat suatu obyek Intent dengan cara seperti di atas dengan memberikan kelas Activity asal (MainActivity.this) dan kelas Activity tujuan (MoveActivity.class) pada konstruktor kelas Intent.

Kelas asal selalu menggunakan .this yang menandakan obyek kelas saat ini. Kelas tujuan selalu menggunakan .class.

Jika kita menggunakan code assistant (tekan ctrl + spasi) dari Android Studio, maka akan tampil rekomendasi (code hint) sebagai berikut:

Pada konteks di atas kita memilih Context packageContext, Class cls sebagai inputan untuk nilai constructor intent.

 

Kemudian perhatikan baris kode berikutnya.

• Java
• Kotlin

1.  Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

2.  startActivity(moveIntent);

startActivity(moveIntent) metode ini akan menjalankan activity baru tanpa membawa data. Obyek intent yang diinputkan adalah obyek moveIntent yang akan ketika kode ini dijalankan maka akan membuka MoveActivity.

 

Pada modul ini kita telah berhasil memindahkan satu Activity ke Activity lain dengan tidak membawa data. Pada bagian selanjutnya kita akan membuat suatu Intent yang di dalamnya akan membawa data ke Activity tujuan.

Codelab Intent Explicit

Selanjutnya kita akan membuat sebuah Intent yang di dalamnya akan membawa data ke Activity tujuan. Siap? 

1. Buka activity_main.xml, kemudian tambahkan satu tombol lagi di bawah tombol sebelumnya. Kode activity_main.xml kita pun, jadi seperti ini.
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:orientation="vertical"

7.      android:padding="16dp">

8.   

9.      ...

10.  

11.     <Button

12.         android:id="@+id/btn_move_activity_data"

13.         android:layout_width="match_parent"

14.         android:layout_height="wrap_content"

15.         android:layout_marginBottom="16dp"

16.         android:text="@string/move_with_data" />

17. </LinearLayout>

 

2. Setelah selesai dengan penambahan pada berkas activity_main.xml, maka lanjutkan dengan menambahkan beberapa baris berikut di MainActivity.java.

• Java
• Kotlin

3.  public class MainActivity extends AppCompatActivity implements View.OnClickListener{

4.   

5.     @Override

6.     protected void onCreate(Bundle savedInstanceState) {

7.         super.onCreate(savedInstanceState);

8.         setContentView(R.layout.activity_main);

9.   

10.        ....

11.  

12.        Button btnMoveWithDataActivity = findViewById(R.id.btn_move_activity_data);

13.        btnMoveWithDataActivity.setOnClickListener(this);

14.    }

15.  

16.    @Override

17.    public void onClick(View v) {

18.        switch (v.getId()){

19.            case R.id.btn_move_activity:

20.                Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

21.                startActivity(moveIntent);

22.                break;

23.            case R.id.btn_move_activity_data:

24.                break;

25.        }

26.    }

27. }

 

3. Selanjutnya, buat Activity baru lagi seperti cara sebelumnya dan beri nama MoveWithDataActivity. 
   
4. Lalu pada layout activity_move_with_data.xml kita tambahkan sebuah TextView ber-ID untuk menampilkan data yang dikirimkan dari Activity asal.
   
   

0.  <?xml version="1.0" encoding="utf-8"?>

1.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2.      xmlns:tools="http://schemas.android.com/tools"

3.      android:layout_width="match_parent"

4.      android:layout_height="match_parent"

5.      android:padding="16dp">

6.   

7.      <TextView

8.          android:id="@+id/tv_data_received"

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:text="@string/data_received" />

12. </RelativeLayout>

 

5. Selanjutnya pada MoveWithDataActivity.java kita kondisikan TextView seperti berikut ini :

• Java
• Kotlin

2.  public class MoveWithDataActivity extends AppCompatActivity {

3.   

4.      @Override

5.      protected void onCreate(Bundle savedInstanceState) {

6.          super.onCreate(savedInstanceState);

7.          setContentView(R.layout.activity_move_with_data);

8.   

9.          TextView tvDataReceived = findViewById(R.id.tv_data_received);

10.  

11.     }

12. }

 

6. Selanjutnya untuk menerima data dari Activity asal, kondisikan MoveWithDataActivity seperti berikut :

• Java
• Kotlin

2.  public class MoveWithDataActivity extends AppCompatActivity {

3.      public static final String EXTRA_AGE = "extra_age";

4.      public static final String EXTRA_NAME = "extra_name";

5.   

6.      @Override

7.      protected void onCreate(Bundle savedInstanceState) {

8.          super.onCreate(savedInstanceState);

9.          setContentView(R.layout.activity_move_with_data);

10.  

11.         TextView tvDataReceived = findViewById(R.id.tv_data_received);

12.  

13.         String name = getIntent().getStringExtra(EXTRA_NAME);

14.         int age = getIntent().getIntExtra(EXTRA_AGE, 0);

15.  

16.         String text = "Name : " + name + ",\nYour Age : " + age;

17.         tvDataReceived.setText(text);

18.     }

19. }

 

7. Dan sekarang saatnya kita menambahkan obyek Intent pada MainActivity.java seperti baris yang ditebalkan.

• Java
• Kotlin

2.  @Override

3.  public void onClick(View v) {

4.      switch (v.getId()){

5.          case R.id.btn_move_activity:

6.              Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

7.              startActivity(moveIntent);

8.              break;

9.          case R.id.btn_move_activity_data:

10.             Intent moveWithDataIntent = new Intent(MainActivity.this, MoveWithDataActivity.class);

11.             moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

12.             moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5);

13.             startActivity(moveWithDataIntent);

14.             break;

15.     }

16. }

 

8. Maka MainActivity.java akan jadi seperti ini:

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity implements View.OnClickListener{

3.   

4.      @Override

5.      protected void onCreate(Bundle savedInstanceState) {

6.          super.onCreate(savedInstanceState);

7.          setContentView(R.layout.activity_main);

8.   

9.          Button btnMoveActivity = findViewById(R.id.btn_move_activity);

10.         btnMoveActivity.setOnClickListener(this);

11.  

12.         Button btnMoveWithDataActivity = findViewById(R.id.btn_move_activity_data);

13.         btnMoveWithDataActivity.setOnClickListener(this);

14.     }

15.  

16.     @Override

17.     public void onClick(View v) {

18.         switch (v.getId()) {

19.             case R.id.btn_move_activity:

20.                 Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

21.                 startActivity(moveIntent);

22.                 break;

23.  

24.             case R.id.btn_move_activity_data:

25.                 Intent moveWithDataIntent = new Intent(MainActivity.this, MoveWithDataActivity.class);

26.                 moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

27.                 moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5);

28.                 startActivity(moveWithDataIntent);

29.                 break;

30.         }

31.     }

32. }

 

9. Silakan jalankan aplikasi Anda, kemudian coba klik pada tombol Pindah Activity dengan Data. Seharusnya Anda sudah bisa memindahkan satu Activity ke Activity lain dengan membawa data.
   

Bedah Kode

Pada bagian sebelumnya Anda sudah mempelajari bagaimana memindahkan satu Activity ke Activity lain dengan membawa data. Dan itu sangat penting karena ketika kita mengembangkan suatu aplikasi Android yang kompleks, akan ada banyak Activity yang terlibat. Untuk memberikan pengalaman yang baik kepada pengguna, perpindahan Activity dengan data, sangat krusial.  

 

Konstanta

Konstanta yaitu sebuah variabel yang nilainya tetap, biasanya digunakan sebagai key(kunci) yang dipakai untuk mengirim dan menerima data.

• Java
• Kotlin

1.  public class MoveWithDataActivity extends AppCompatActivity {

2.      public static final String EXTRA_AGE = "extra_age";

3.      public static final String EXTRA_NAME = "extra_name";

4.   

5.      ...

6.  }

Untuk membuat Konstanta di Java, kita bisa menggunakan kode public static final, yang artinya kode tersebut public (biasa diakses dari luar kelas), static (nilainya tidak berubah/dinamis), dan final (nilai terakhir, tidak ada perubahan lagi). 

Dengan begitu, saat di MainActivity kita bisa memanggil variabel tersebut dengan cara menulis kelasnya dulu, yaitu seperti ini MoveWithDataActivity.EXTRA_NAME.

 

Put Extra

Perhatikan kode di bawah ini.

• Java
• Kotlin

1.  Intent moveWithDataIntent = new Intent(MainActivity.this, MoveWithDataActivity.class);

2.  moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

3.  moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5);

4.  startActivity(moveWithDataIntent);

Perbedaan mendasar antara memindahkan Activity dengan membawa data atau tidak, adalah dengan menempatkan data ke obyek Intent pada baris ini.

• Java
• Kotlin

1.  moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

2.  moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5);

Kita memanfaatkan metode putExtra() untuk mengirimkan data bersamaan dengan obyek Intent. Sedangkan metode putExtra() itu sendiri merupakan metode yang menampung pasangan key-value dan memiliki beberapa pilihan tipe input seperti berikut:

Hampir semua tipe data untuk input value didukung oleh metode putExtra().

• Java
• Kotlin

1.  moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

 

Name	MoveWithDataActivity.EXTRA_NAME dimana EXTRA_NAME adalah variabel static bertipe data string dan bernilai “extra_name” pada MoveWithDataActivity.java. Penentuan nilai untuk key parameter untuk intent adalah bebas, di sini kami merekomendasikan format terbaik yang biasa diimplementasikan.
Value	DicodingAcademy Boy dengan tipe data string.

 

Get Data

Setelah data dikirimkan, selanjutnya adalah mengambil data tersebut. 

Di sini kita akan mengirimkan data bertipe string ke MoveWithDataActivity. Di dalam MoveWithdataActivity kita akan mengambil nilai data berdasarkan key yang dikirimkan dengan menggunakan metode getIntent().getStringExtra(key). Implementasinya sebagai berikut:

• Java
• Kotlin

1.  String name = getIntent().getStringExtra(EXTRA_NAME);

Catatan : Key yang dikirimkan melalui putExtra() harus sama dengan key sewaktu mengambil nilai dari data yang dikirimkan melalui getStringExtra().

Dalam konteks di atas, key yang digunakan untuk mengirim dan mengambil nilai data adalah sama, yaitu EXTRA_NAME (yang bernilai “extra_name”). Nilai dari data yang dikirimkan melalui intent disimpan ke dalam variabel name bertipe data string.

 

Fungsi dari EXTRA_NAME sendiri yaitu sebagai Key. Seperti yang dijelaskan pada modul, untuk mengirim data dengan intent kita perlu mengirimnya dalam format putExtra(Key,Value). Dengan Key bertindak sebagai kunci yang dipakai untuk mengambil data di activity tujuannya, dan value adalah data yang akan dikirimkan. Jadi kalau dalam bahasa gampangnya dalam bentuk dialog seperti ini:

kode : "Aku mau ambil data nih?"
sistem : "data yang mana? data kan banyak?"
kode : "yang key-nya 'EXTRA_NAME ' sis (red: sistem)"
sistem : "ohh oke de', ini data value-nya"

 

Begitu juga dengan variable age.

• Java
• Kotlin

1.  int age = getIntent().getIntExtra(EXTRA_AGE, 0);

Nilai dari variabel age yang bertipe data integer berasal dari getIntent().getIntExtra(Key, nilai default). Key yang digunakan untuk mengirimkan dan mengambil data adalah EXTRA_AGE (yang bernilai “extra_age”). Nilai default di sini merupakan nilai yang akan digunakan jika ternyata datanya kosong. Data kosong atau nilainya null bisa terjadi ketika datanya memang tidak ada, atau key-nya tidak sama.  

 

Selamat! Anda telah mempelajari dua intent explicit dengan atau tidak membawa data. 

 

Sebelumnya, mengirimkan data bernilai tunggal dari satu Activity ke Activity lain adalah hal yang mudah. Bernilai tunggal karena data yang dikirimkan berasal dari satu tipe data. 

Misalnya pada contoh di atas, pengiriman nilai data name dan age dilakukan secara individu. Yang satu bertipe data string dan yang lainnya bertipe data integer. 

Sekarang pertanyaanya bagaimana Anda bisa mengirimkan data dalam bentuk Plain Old Java Object (POJO) dari satu Activity ke Activity lain melalui intent? Caranya adalah dengan mengubah obyek POJO yang Anda miliki ke dalam bentuk obyek parcelable. Di Android Studio sudah ada fasilitas plugin bernama Android Parcelable Generator untuk memudahkan proses tersebut.

Codelab Intent Implicit

Anda sudah belajar bagaimana menggunakan intent dengan tipe eksplisit. Sekarang saatnya Anda melanjutkan ke intent dengan tipe implisit.

1. Buka kembali activity_main.xml tambahkan satu tombol lagi sebagai berikut:
   
   

1.  <Button

2.      android:id="@+id/btn_dial_number"

3.      android:layout_width="match_parent"

4.      android:layout_height="wrap_content"

5.      android:layout_marginBottom="16dp"

6.      android:text="@string/dial_number" />

Sehingga file activity_main.xml kita sekarang menjadi:

7.  <?xml version="1.0" encoding="utf-8"?>

8.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

9.      xmlns:tools="http://schemas.android.com/tools"

10.     android:layout_width="match_parent"

11.     android:layout_height="match_parent"

12.     android:orientation="vertical"

13.     android:padding="16dp">

14.  

15.     <Button

16.         android:id="@+id/btn_move_activity"

17.         android:layout_width="match_parent"

18.         android:layout_height="wrap_content"

19.         android:layout_marginBottom="16dp"

20.         android:text="@string/move_activity" />

21.  

22.     <Button

23.         android:id="@+id/btn_move_activity_data"

24.         android:layout_width="match_parent"

25.         android:layout_height="wrap_content"

26.         android:layout_marginBottom="16dp"

27.         android:text="@string/move_with_data" />

28.  

29.     <Button

30.         android:id="@+id/btn_dial_number"

31.         android:layout_width="match_parent"

32.         android:layout_height="wrap_content"

33.         android:layout_marginBottom="16dp"

34.         android:text="@string/dial_number" />

35. </LinearLayout>

 

2. Sekarang, buka kembali MainActivity.java dan lanjutkan menginisialisasi button yang sudah ditambahkan:

• Java
• Kotlin

3.  @Override

4.  protected void onCreate(Bundle savedInstanceState) {

5.      super.onCreate(savedInstanceState);

6.      setContentView(R.layout.activity_main);

7.   

8.      ...

9.   

10.     Button btnDialPhone = findViewById(R.id.btn_dial_number);

11.     btnDialPhone.setOnClickListener(this);

12. }

 

3. Kemudian dengan melakukan casting tombol Dial Number, set listener dan menambahkan action ketika tombol diklik.

• Java
• Kotlin

2.     @Override

3.     public void onClick(View v) {

4.         switch (v.getId()){

5.   

6.             ...

7.   

8.             case R.id.btn_dial_number:

9.                 String phoneNumber = "081210841382";

10.                Intent dialPhoneIntent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:"+phoneNumber));

11.                startActivity(dialPhoneIntent);

12.                break;

13.        }

14.    }

 

4. Sehingga kode keseluruhan untuk kelas MainActivity.java saat ini adalah.

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity implements View.OnClickListener{

3.   

4.      @Override

5.      protected void onCreate(Bundle savedInstanceState) {

6.          super.onCreate(savedInstanceState);

7.          setContentView(R.layout.activity_main);

8.   

9.          Button btnMoveActivity = findViewById(R.id.btn_move_activity);

10.         btnMoveActivity.setOnClickListener(this);

11.  

12.         Button btnMoveWithDataActivity = findViewById(R.id.btn_move_activity_data);

13.         btnMoveWithDataActivity.setOnClickListener(this);

14.  

15.         Button btnDialPhone = findViewById(R.id.btn_dial_number);

16.         btnDialPhone.setOnClickListener(this);

17.     }

18.  

19.     @Override

20.     public void onClick(View v) {

21.         switch (v.getId()){

22.             case R.id.btn_move_activity:

23.                 Intent moveIntent = new Intent(MainActivity.this, MoveActivity.class);

24.                 startActivity(moveIntent);

25.                 break;

26.  

27.             case R.id.btn_move_activity_data:

28.                 Intent moveWithDataIntent = new Intent(MainActivity.this, MoveWithDataActivity.class);

29.                 moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME, "DicodingAcademy Boy");

30.                 moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5);

31.                 startActivity(moveWithDataIntent);

32.                 break;

33.  

34.             case R.id.btn_dial_number:

35.                 String phoneNumber = "081210841382";

36.                 Intent dialPhoneIntent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:"+phoneNumber));

37.                 startActivity(dialPhoneIntent);

38.                 break;

39.         }

40.     }

41. }

 

5. Setelah selesai, silakan jalankan lagi aplikasi Anda. Yeay, Anda sudah bisa men-dial sebuah nomor telepon melalui aplikasi bawaan dari peranti anda. Selamat!
   

 

Bedah Kode

Intent Implicit

• Java
• Kotlin

1.  String phoneNumber = "081210841382";

2.  Intent dialPhoneIntent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + phoneNumber));

3.  startActivity(dialPhoneIntent);

Baru saja kita mengimplementasikan penggunaan intent secara implicit untuk melakukan proses dial sebuah nomor telepon. Pada bagian new Intent(Intent.ACTION_DIAL, Uri.parse("tel:"+phoneNumber)); kita menggunakan inputan new Intent(ACTION, Uri); pada konstruktor sewaktu menciptakan obyek Intent di mana:

Action           : Intent.ACTION_DIAL

Uri                  : Uri.parse("tel:"+phoneNumber)

Variabel ACTION_DIAL menentukan intent filter dari aplikasi-aplikasi yang bisa menangani action tersebut. Di sini aplikasi yang memiliki kemampuan untuk komunikasi akan muncul pada opsi pilihan, sebagaimana ditampilkan ke pengguna. 

Selain ACTION_DIAL, di Android sudah tersedia berbagai action yang tinggal didefinisikan sewaktu menciptakan obyek Intent untuk mengakomodir berbagai tujuan. 

Silakan cek link berikut untuk detailnya:

• Intent

 

Apa itu URI (Uniform Resource Identifier)

Buat yang belum tau apa itu Uri, berikut penjelasan singkatnya:

Uri adalah sebuah untaian karakter yang digunakan untuk mengidentifikasi nama, sumber, atau layanan di internet sesuai dengan RFC 2396. Pada Uri.parse("tel:"+phoneNumber) kita melakukan parsing Uri dari bentuk teks string menjadi sebuah obyek uri dengan menggunakan metode static parse(String). Secara struktur, dibagi menjadi:

Dimana “tel” adalah sebuah skema yang disepakati untuk sumber daya telepon dan phoneNumber adalah variabel string yang bernilai “081210841382”. Skema lain dari Uri seperti “geo” untuk peta, “http” untuk browser sisanya bisa dilihat di halaman ini:

• Common Intents

 

Proses Intent Implicit

Pada prosesnya, pemanggilan intent secara implicit akan berjalan sesuai dengan diagram di bawah ini.

 

1. Aplikasi kita menjalankan intent untuk ACTION_DIAL melalui startActivity().
2. Sistem Android akan melakukan seleksi terhadap semua aplikasi yang memiliki kemampuan untuk menangani action tersebut. Sistem Android akan menentukan aplikasi mana saja yang bisa memproses action berdasarkan intent filter yang telah ditentukan di berkas AndroidManifest.xml pada masing-masing aplikasi.
   Sistem Android akan menampilkan opsi aplikasi-aplikasi mana saja yang bisa menangani action tersebut ke pengguna.
   Pengguna memilih salah satu opsi aplikasi dan kemudian sistem Android akan me-routing ke activity pada aplikasi yang dipilih yang memiliki intent-filter untuk aksi ACTION_DIAL.
3. Aplikasi yang dipilih pun muncul di layar dengan nomor telepon yang sudah diatur.

 

Anda sudah mempelajari 3 buah intent secara eksplisit dan 1 buah intent secara implisit. Selamat!

 

Masih ada satu lagi  yang belum dibahas yaitu Intent ResultActivity, akan tetapi materi tersebut tidak akan dibahas di dalam kelas ini. Untuk materi yang lebih lengkap dan komprehensif mengenai Intent ResultActivity bisa langsung daftar kelas Belajar Fundamental Aplikasi Android.

 

Untuk source code materi , silakan unduh di tautan berikut ini:

• Source Code MyIntentApp (Java)
• Source Code MyIntentApp (Kotlin) 

Teori

Pada modul ini, Anda akan mempelajari komponen View dan ViewGroup. Kedua komponen ini dapat berkolaborasi sehingga membentuk antar muka dengan contoh seperti pada gambar di bawah ini:

Keren bukan? Baik, kita mulai saja pembahasannya.

 

Pada dasarnya semua elemen antar pengguna di aplikasi Android dibangun menggunakan dua buah komponen inti, yaitu view dan viewgroup.

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

Sedangkan viewgroup adalah sebuah obyek yang mewadahi obyek-obyek view dan viewgroup itu sendiri sehingga membentuk satu kesatuan tampilan aplikasi yang utuh. Contoh komponen viewgroup adalah:

·         LinearLayout

·         FrameLayout

·         RelativeLayout

·         TableLayout

 

Hierarki komponen view dan viewgroup dapat digambarkan dengan diagram berikut:

 

 

Jika diterjemahkan di dalam sebuah viewgroup akan ditampung dua buah komponen view dan satu komponen viewgroup yang terdiri dari 3 buah komponen view.

Anda dapat membaca tautan berikut untuk membaca lebih lanjut mengenai materi di atas:

• User Interface Overview

 

Salah satu contoh dari tampilan dalam file layout xml untuk merepresentasikan kolaborasi view dan viewgroup seperti ini :

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.                android:layout_width="match_parent"

4.                android:layout_height="match_parent"

5.                android:orientation="vertical" >

6.      <TextView android:id="@+id/text"

7.                android:layout_width="wrap_content"

8.                android:layout_height="wrap_content"

9.                android:text="I am a TextView" />

10.     <Button android:id="@+id/button"

11.             android:layout_width="wrap_content"

12.             android:layout_height="wrap_content"

13.             android:text="I am a Button" />

14. </LinearLayout>

Obyek turunan viewgroup LinearLayout menjadi kontainer untuk obyek turunan view, button, dan textview. Beberapa komponen viewgroup seperti linearlayout, relativelayout, framelayout, dan tablelayout merupakan komponen yang paling banyak digunakan untuk menjadi parent/root dari komponen-komponen view.

Berikut adalah definisi singkat dan inti dari komponen-komponen di atas terhadap penempatan komponen view (child) di dalamnya:

 

LinearLayout

Akan menempatkan komponen-komponen di dalamnya secara horizontal atau vertikal. Linearlayout memiliki atribut weight untuk masing-masing child view yang berguna untuk menentukan porsi ukuran view dalam sebuah  ruang (space) yang tersedia.

           android:orientation=”vertical”                      android:orientation=”horizontal”

Anda dapat membaca lebih lanjut mengenai linearlayout pada tautan berikut:

• Linear Layout

 

RelativeLayout

Layout yang paling fleksible dikarenakan posisi dari masing-masing komponen di dalamnya dapat mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar.

Anda dapat membaca lebih lanjut mengenai relativelayout pada tautan berikut:

• Relative Layout

 

FrameLayout

Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada di dalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya.
Komponen yang paling pertama pada layout ini akan menjadi alas bagi komponen-komponen di atasnya. Pada materi penggunaan fragment di materi sebelumnya, framelayout memiliki kemampuan untuk menjadi kontainer untuk fragment-fragment di dalam sebuah activity. Berikut ilustrasi penggunaan framelayout terhadap child view yang dimilikinya:

Anda dapat membaca lebih lanjut mengenai framelayout pada tautan berikut:

• Frame Layout

 

TableLayout

Susunan komponen di dalam tablelayout akan berada dalam baris dan kolom. Namun layout jenis ini tidak akan menampilkan garis pembatas untuk baris, kolom atau cell-nya.

Anda dapat membaca lebih lanjut mengenai tablelayout pada tautan berikut:

• TableLayout

 

Salah satu perbedaan mendasar dari keempat jenis layout di atas adalah bagaimana komponen view di dalamnya tersusun.

Kapan saatnya menggunakan linearlayout, relativelayout, framelayout dan tablelayout? Jawabannya tergantung pada kebutuhan dan performa.

Salah satu tips performa untuk aplikasi Android adalah dengan menyusun hierarki layout dalam sebuah file layout xml secara sederhana dan flat. Artinya, kita tidak membuat layout dengan jumlah kedalaman yang tinggi. Selain itu, penting juga bagi kita untuk memahami dasar pembangunan antar muka, pengalaman pengguna ketika menggunakannya, dan selalu mencari pendekatan terbaik dalam penggunaan komponen antar muka.

Semua tergantung latihan dan seberapa sering kita mengubah mockup menjadi tampilan sebenarnya, terutama dengan memaksimalkan penulisan kode antara muka di berkas xml.

Untuk memahami lebih lanjut mengenai layout, Anda dapat membacanya pada tautan berikut:

• Declaring Layout

Ketika aplikasi Anda memuat informasi yang banyak dan melebihi ukuran layar, maka Anda membutuhkan tampilan yang memungkinkan pengguna untuk membaca informasi dengan lengkap. Kita membutuhkan komponen scrollview untuk mengatasi masalah ini.

 

ScrollView

Adalah layout yang memungkinkan komponen di dalamnya digeser (scroll) secara vertikal dan horizontal. Komponen di dalam scrollview hanya diperbolehkan memiliki 1 parent utama dari linearlayout, relativelayout, framelayout, atau tablelayout.

• ScrollView

 

Satuan Dimensi di Android

Platform Android dikenal karena keberagamannya. Mulai ukuran perangkatnya, layar, spesifikasi, hingga level operating system-nya. Karena keberagaman tersebut, tak heran jika dibutuhkan tampilan yang konsisten agar aplikasi kita bisa berjalan dan tampil maksimal.

Android sendiri memiliki satuan unit dimensi untuk ukuran tinggi dan lebar sebuah komponen view atau viewgroup. Berikut adalah esensi dari satuan dimensi unit di android. 

1.    Ekosistem Android dikenal dengan fragmentasi spesifikasi perangkat yang sangat bervariasi. Beragam perangkat Android memiliki perbedaan dimensi layar dan kerapatan pixel (density).

2.    Untuk tampilan yang konsisten di perangkat Android, terdapat 2 jenis satuan, yaitu dip/dp (density-independent pixel) dan sp (scale-independent pixels).

3.    Satuan dp/dip digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width) dan height (attribut : layout_height) dari sebuah komponen view atau viewgroup.

4.    Satuan sp digunakan untuk ukuran teks. Perbedaannya dengan dp/dip adalah satuan sp android akan men-scale ukuran teks sesuai dengan setting ukuran teks di peranti (yang biasa dapat diakses melalui menu settings)

 

Contoh 1 :

Misalkan ada dua tablet 7-inch (ukuran diagonal layar). Tablet pertama (A) memiliki resolusi layar 1200x1920px 320dpi. Tablet kedua (B) memiliki resolusi 2048x1536px 326dpi.

Sebuah tombol berukuran 300x300px akan tampak normal pada tablet A. Tapi tombol tersebut akan terlihat terlalu kecil pada tablet B.

Tapi akan berbeda jika kita tentukan ukuran button-nya dengan ukuran yang bergantung pada density layar. Bila kita menggunakan ukuran 300x300dp, maka tombol tersebut akan terlihat baik pada beragam perangkat dengan ukuran yang berbeda.

Contoh 2 :

Pada gambar di atas ukuran 200dp akan dikonversi pada device mdpi (device dengan density 160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam peranti dengan ukuran layar yang berbeda.

Beberapa tautan berikut akan membantu Anda untuk lebih memahami bagaimana aplikasi Anda dapat mendukung beragam ukuran perangkat Android:

• Multiple Screen Support
• Screen Density
• DPI Screen
• DP/PX Converter
• Video Density-independent Pixels
• Density Pixal dan Scale Pixel

 

Pada modul berikutnya, kita akan menerapkan teori di atas. Sehingga Anda dapat memiliki pemahaman yang lebih baik mengenai teori tersebut.

Tujuan

Pada latihan kali ini Anda akan mengembangkan sebuah halaman detail yang di dalamnya terdiri dari beberapa komponen View dan Viewgroup layout. Tampilan akhir aplikasi akan seperti ini:

 

Logika

Menjalankan Aplikasi menampilkan tampilan (tampilan akan sesuai dengan apa yang dibuat di layout editor).

Codelab Views and ViewGroup

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

Nama Project	MyViewAndViews
Target & Minimum Target SDK	Phone and Tablet, Api level 21
Tipe Activity	Empty Activity
Activity Name	MainActivity
Use AndroidX artifacts	True
Language	Java / Kotlin

2. Lalu buka berkas build.gradle (Module: app) dan tambahkan satu baris ini di bagian dependecies:
   
   

1.  implementation 'de.hdodenhof:circleimageview:3.0.0'

Sehingga berkas build.gradle(Module: app) kita sekarang menjadi seperti ini: 

2.  apply plugin: 'com.android.application'

3.   

4.  android {

5.      compileSdkVersion 29

6.      defaultConfig {

7.          applicationId "com.dicoding.myviewandviews"

8.          minSdkVersion 21

9.          targetSdkVersion 29

10.         versionCode 1

11.         versionName "1.0"

12.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

13.     }

14.     buildTypes {

15.         release {

16.             minifyEnabled false

17.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

18.         }

19.     }

20. }

21.  

22. dependencies {

23.     implementation fileTree(dir: 'libs', include: ['*.jar'])

24.     implementation 'androidx.appcompat:appcompat:1.0.2'

25.     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

26.     testImplementation 'junit:junit:4.12'

27.     androidTestImplementation 'androidx.test:runner:1.2.0'

28.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

29.     implementation 'de.hdodenhof:circleimageview:3.0.0'

30. }

Tekanlah Sync Now untuk men-download library dari CircleImageView ke dalam proyek Android Studio Anda. Pastikan ketika melakukan proses tersebut, PC atau laptop terhubung dengan Internet.

3.    Lalu buka berkas strings.xml di res → values. Sesuaikan isinya dengan seperti ini:

1.  <resources>

2.      <string name="app_name">MyViewAndViews</string>

3.      <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>

4.      <string name="content_specs_display">5.0 inches\n

5.      FHD AMOLED at 441ppi\n

6.      2.5D Corning® Gorilla® Glass 4</string>

7.      <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>

8.      <string name="content_specs_battery">2,770 mAh battery\n

9.      Standby time (LTE): up to 19 days\n

10.     Talk time (3g/WCDMA): up to 26 hours\n

11.     Internet use time (Wi-Fi): up to 13 hours\n

12.     Internet use time (LTE): up to 13 hours\n

13.     Video playback: up to 13 hours\n

14.     Audio playback (via headset): up to 110 hours\n

15.     Fast charging: up to 7 hours of use from only 15 minutes of charging</string>

16. </resources>

 

4.    Selanjutnya, unduh asetnya di sini. Bila telah selesai, salin semua aset yang dibutuhkan ke dalam direktori res → drawable.

5.    Buka berkas activity_main.xml dan ubah layout utama menjadi seperti ini:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.     

8.  </ScrollView>

 

6. Kemudian tambahkan layout utama di dalam ScrollView.
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.         

13.     </LinearLayout>

14. </ScrollView>

 

7. Kemudian kita masukkan komponen di dalam LinearLayout yang sudah ditambahkan sebelumnya.
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.         <FrameLayout

13.             android:layout_width="match_parent"

14.             android:layout_height="wrap_content">

15.             <ImageView

16.                 android:layout_width="match_parent"

17.                 android:layout_height="wrap_content"

18.                 android:adjustViewBounds="true"

19.                 android:scaleType="fitXY"

20.                 android:src="@drawable/pixel_google" />

21.  

22.             <TextView

23.                 android:layout_width="wrap_content"

24.                 android:layout_height="wrap_content"

25.                 android:layout_gravity="bottom"

26.                 android:layout_marginLeft="16dp"

27.                 android:layout_marginBottom="16dp"

28.                 android:background="#4D000000"

29.                 android:drawableLeft="@drawable/ic_collections_white_18dp"

30.                 android:drawablePadding="4dp"

31.                 android:gravity="center_vertical"

32.                 android:padding="8dp"

33.                 android:text="6 Photos"

34.                 android:textAppearance="@style/TextAppearance.AppCompat.Small"

35.                 android:textColor="@android:color/white" />

36.         </FrameLayout>

37.     </LinearLayout>

38. </ScrollView>

Tampilan saat ini adalah seperti ini:

8. Selanjutnya, tambahkan TextView di bawah FrameLayout, menjadi seperti ini:
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.         <FrameLayout ...>

13.           

14.         <TextView

15.             android:layout_width="match_parent"

16.             android:layout_height="wrap_content"

17.             android:textSize="32sp"

18.             android:text="$735"

19.             android:layout_marginLeft="16dp"

20.             android:layout_marginRight="16dp"

21.             android:layout_marginTop="16dp"

22.             android:layout_marginBottom="8dp"

23.             android:textColor="@android:color/black"/>

24.  

25.         <TextView

26.             android:layout_width="match_parent"

27.             android:layout_height="wrap_content"

28.             android:text="Stock hanya 5 buah"

29.             android:textSize="12sp"

30.             android:layout_marginLeft="16dp"

31.             android:layout_marginRight="16dp"

32.             android:layout_marginBottom="16dp"/>

33.  

34.         <TextView

35.             android:layout_width="match_parent"

36.             android:layout_height="wrap_content"

37.             android:text="@string/content_text"

38.             android:layout_marginLeft="16dp"

39.             android:layout_marginRight="16dp"

40.             android:layout_marginBottom="16dp"

41.             android:lineSpacingMultiplier="1"

42.             android:textColor="@android:color/black"/>

43.     </LinearLayout>

44. </ScrollView>

Tampilan saat ini adalah:

9. Setelah menambahkan beberapa TextView, selanjutnya kita akan menambahkan TableLayout.
   
   

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.  

13.         <FrameLayout ...>

14.         <TextView ...>

15.         <TextView ...>

16.         <TextView ...>

17.  

18.         <TextView

19.             android:layout_width="match_parent"

20.             android:layout_height="wrap_content"

21.             android:text="Spesifikasi"

22.             android:textSize="12sp"

23.             android:layout_marginLeft="16dp"

24.             android:layout_marginRight="16dp"

25.             android:layout_marginBottom="8dp"/>

26.  

27.         <TableLayout

28.             android:layout_width="match_parent"

29.             android:layout_height="wrap_content"

30.             android:layout_marginLeft="16dp"

31.             android:layout_marginRight="16dp"

32.             android:layout_marginBottom="16dp">

33.  

34.             <TableRow

35.                 android:layout_width="match_parent"

36.                 android:layout_height="wrap_content"

37.                 android:layout_marginBottom="8dp">

38.  

39.                 <TextView

40.                     android:layout_width="wrap_content"

41.                     android:layout_height="wrap_content"

42.                     android:textSize="14sp"

43.                     android:layout_marginRight="16dp"

44.                     android:text="Display"/>

45.  

46.                 <TextView

47.                     android:layout_width="match_parent"

48.                     android:layout_height="wrap_content"

49.                     android:textSize="14sp"

50.                     android:layout_weight="1"

51.                     android:text="@string/content_specs_display"

52.                     android:textColor="@android:color/black"/>

53.             </TableRow>

54.  

55.             <TableRow

56.                 android:layout_width="match_parent"

57.                 android:layout_height="wrap_content"

58.                 android:layout_marginBottom="8dp">

59.  

60.                 <TextView

61.                     android:layout_width="wrap_content"

62.                     android:layout_height="wrap_content"

63.                     android:textSize="14sp"

64.                     android:layout_marginRight="16dp"

65.                     android:text="Size"/>

66.  

67.                 <TextView

68.                     android:layout_width="match_parent"

69.                     android:layout_height="wrap_content"

70.                     android:textSize="14sp"

71.                     android:layout_weight="1"

72.                     android:text="@string/content_specs_size"

73.                     android:textColor="@android:color/black"/>

74.             </TableRow>

75.  

76.             <TableRow

77.                 android:layout_width="match_parent"

78.                 android:layout_height="wrap_content"

79.                 android:layout_marginBottom="8dp">

80.  

81.                 <TextView

82.                     android:layout_width="wrap_content"

83.                     android:layout_height="wrap_content"

84.                     android:textSize="14sp"

85.                     android:layout_marginRight="16dp"

86.                     android:text="Battery"/>

87.  

88.                 <TextView

89.                     android:layout_width="match_parent"

90.                     android:layout_height="wrap_content"

91.                     android:textSize="14sp"

92.                     android:layout_weight="1"

93.                     android:text="@string/content_specs_battery"

94.                     android:textColor="@android:color/black"/>

95.             </TableRow>

96.         </TableLayout>

97.     </LinearLayout>

98. </ScrollView>

Tampilan saat ini adalah seperti berikut:

10. Kemudian setelah menambahkan TableLayout, kita masukkan ViewGroup lagi. Tambahkan RelativeLayout dan Button di bawah TableLayout menjadi seperti ini.
    
    

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.  

13.         <FrameLayout ...>

14.         <TextView ...>

15.         <TextView ...>

16.         <TextView ...>

17.         <TextView ...>

18.         <TableLayout ...>

19.  

20.         <TextView

21.             android:layout_width="match_parent"

22.             android:layout_height="wrap_content"

23.             android:text="Dijual oleh"

24.             android:textSize="12sp"

25.             android:layout_marginLeft="16dp"

26.             android:layout_marginRight="16dp"

27.             android:layout_marginBottom="8dp"/>

28.  

29.         <RelativeLayout

30.             android:layout_width="match_parent"

31.             android:layout_height="wrap_content"

32.             android:layout_marginLeft="16dp"

33.             android:layout_marginRight="16dp"

34.             android:layout_marginBottom="16dp">

35.  

36.             <de.hdodenhof.circleimageview.CircleImageView

37.                 android:layout_width="56dp"

38.                 android:layout_height="56dp"

39.                 android:src="@drawable/photo_2"

40.                 android:layout_centerVertical="true"

41.                 android:id="@+id/profile_image"

42.                 android:layout_marginRight="16dp"/>

43.  

44.             <TextView

45.                 android:layout_width="match_parent"

46.                 android:layout_height="wrap_content"

47.                 android:layout_toRightOf="@id/profile_image"

48.                 android:text="Narenda Wicaksono"

49.                 android:textColor="@android:color/black"

50.                 android:layout_centerVertical="true"/>

51.         </RelativeLayout>

52.  

53.         <Button

54.             android:layout_width="match_parent"

55.             android:layout_height="wrap_content"

56.             android:text="Beli"

57.             android:layout_marginLeft="16dp"

58.             android:layout_marginRight="16dp"

59.             android:layout_marginBottom="16dp"/>

60.  

61.     </LinearLayout>

62. </ScrollView>

 

11. Pada properties android:text akan ada warning yang berbunyi seperti di bawah ini.
    Ini terjadi ketika kita hardcode (menuliskan teks string langsung pada view) pada android:text. Solusinya adalah tekan Alt+Enter pada isi dari android:text, dan akan muncul dialog seperti ini.
    Kemudian pilihlah Extract string resource. Akan muncul dialog baru yang tampilannya seperti ini:
    Kemudian tekan OK. Dialog tersebut secara otomatis akan menambahkan teks yang kita hardcode ke dalam res → values → strings.xml secara otomatis.
    
    
12. Lakukan hal yang sama untuk semua warning di android:text pada seluruh view yang ada di activity_main.xml. Kemudian buka res → values → strings.xml, maka isi dari xml-nya akan menjadi seperti berikut:
    
    

1.  <resources>

2.      <string name="app_name">MyViewAndViews</string>

3.      <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>

4.      <string name="content_specs_display">5.0 inches\n

5.          FHD AMOLED at 441ppi\n

6.          2.5D Corning® Gorilla® Glass 4</string>

7.      <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>

8.      <string name="content_specs_battery">2,770 mAh battery\n

9.          Standby time (LTE): up to 19 days\n

10.         Talk time (3g/WCDMA): up to 26 hours\n

11.         Internet use time (Wi-Fi): up to 13 hours\n

12.         Internet use time (LTE): up to 13 hours\n

13.         Video playback: up to 13 hours\n

14.         Audio playback (via headset): up to 110 hours\n

15.         Fast charging: up to 7 hours of use from only 15 minutes of charging</string>

16.     <string name="stock">Stock hanya 5 buah</string>

17.     <string name="specification">Spesifikasi</string>

18.     <string name="display">Display</string>

19.     <string name="size">Size</string>

20.     <string name="battery">Battery</string>

21.     <string name="seller">Dijual oleh</string>

22.     <string name="my_name">Narenda Wicaksono</string>

23.     <string name="buy">Beli</string>

24.     <string name="dummy_value">$735</string>

25.     <string name="dummy_photos">6 photos</string>

26. </resources>

 

13. Maka setelah setiap teks yang dipindahkan ke string.xml, activity_main.xml menjadi sepert ini:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.         <FrameLayout

13.             android:layout_width="match_parent"

14.             android:layout_height="wrap_content">

15.             <ImageView

16.                 android:layout_width="match_parent"

17.                 android:layout_height="wrap_content"

18.                 android:adjustViewBounds="true"

19.                 android:scaleType="fitXY"

20.                 android:src="@drawable/pixel_google" />

21.  

22.             <TextView

23.                 android:layout_width="wrap_content"

24.                 android:layout_height="wrap_content"

25.                 android:layout_gravity="bottom"

26.                 android:layout_marginLeft="16dp"

27.                 android:layout_marginBottom="16dp"

28.                 android:layout_marginStart="16dp"

29.                 android:background="#4D000000"

30.                 android:drawableLeft="@drawable/ic_collections_white_18dp"

31.                 android:drawablePadding="4dp"

32.                 android:drawableStart="@drawable/ic_collections_white_18dp"

33.                 android:gravity="center_vertical"

34.                 android:padding="8dp"

35.                 android:text="@string/dummy_photos"

36.                 android:textAppearance="@style/TextAppearance.AppCompat.Small"

37.                 android:textColor="@android:color/white" />

38.         </FrameLayout>

39.  

40.         <TextView

41.             android:layout_width="match_parent"

42.             android:layout_height="wrap_content"

43.             android:layout_marginBottom="8dp"

44.             android:layout_marginLeft="16dp"

45.             android:layout_marginRight="16dp"

46.             android:layout_marginTop="16dp"

47.             android:text="@string/dummy_value"

48.             android:textColor="@android:color/black"

49.             android:textSize="32sp" />

50.  

51.         <TextView

52.             android:layout_width="match_parent"

53.             android:layout_height="wrap_content"

54.             android:layout_marginBottom="16dp"

55.             android:layout_marginLeft="16dp"

56.             android:layout_marginRight="16dp"

57.             android:text="@string/stock"

58.             android:textSize="12sp" />

59.  

60.         <TextView

61.             android:layout_width="match_parent"

62.             android:layout_height="wrap_content"

63.             android:layout_marginBottom="16dp"

64.             android:layout_marginLeft="16dp"

65.             android:layout_marginRight="16dp"

66.             android:lineSpacingMultiplier="1"

67.             android:text="@string/content_text"

68.             android:textColor="@android:color/black" />

69.  

70.         <TextView

71.             android:layout_width="match_parent"

72.             android:layout_height="wrap_content"

73.             android:layout_marginBottom="8dp"

74.             android:layout_marginLeft="16dp"

75.             android:layout_marginRight="16dp"

76.             android:text="@string/specification"

77.             android:textSize="12sp" />

78.  

79.         <TableLayout

80.             android:layout_width="match_parent"

81.             android:layout_height="wrap_content"

82.             android:layout_marginBottom="16dp"

83.             android:layout_marginLeft="16dp"

84.             android:layout_marginRight="16dp">

85.  

86.             <TableRow

87.                 android:layout_width="match_parent"

88.                 android:layout_height="wrap_content"

89.                 android:layout_marginBottom="8dp">

90.  

91.                 <TextView

92.                     android:layout_width="wrap_content"

93.                     android:layout_height="wrap_content"

94.                     android:layout_marginEnd="16dp"

95.                     android:layout_marginRight="16dp"

96.                     android:text="@string/display"

97.                     android:textSize="14sp" />

98.  

99.                 <TextView

100.                         android:layout_width="match_parent"

101.                         android:layout_height="wrap_content"

102.                         android:layout_weight="1"

103.                         android:text="@string/content_specs_display"

104.                         android:textColor="@android:color/black"

105.                         android:textSize="14sp" />

106.                 </TableRow>

107.      

108.                 <TableRow

109.                     android:layout_width="match_parent"

110.                     android:layout_height="wrap_content"

111.                     android:layout_marginBottom="8dp">

112.      

113.                     <TextView

114.                         android:layout_width="wrap_content"

115.                         android:layout_height="wrap_content"

116.                         android:layout_marginEnd="16dp"

117.                         android:layout_marginRight="16dp"

118.                         android:text="@string/size"

119.                         android:textSize="14sp" />

120.      

121.                     <TextView

122.                         android:layout_width="match_parent"

123.                         android:layout_height="wrap_content"

124.                         android:layout_weight="1"

125.                         android:text="@string/content_specs_size"

126.                         android:textColor="@android:color/black"

127.                         android:textSize="14sp" />

128.                 </TableRow>

129.      

130.                 <TableRow

131.                     android:layout_width="match_parent"

132.                     android:layout_height="wrap_content"

133.                     android:layout_marginBottom="8dp">

134.      

135.                     <TextView

136.                         android:layout_width="wrap_content"

137.                         android:layout_height="wrap_content"

138.                         android:layout_marginEnd="16dp"

139.                         android:layout_marginRight="16dp"

140.                         android:text="@string/battery"

141.                         android:textSize="14sp" />

142.      

143.                     <TextView

144.                         android:layout_width="match_parent"

145.                         android:layout_height="wrap_content"

146.                         android:layout_weight="1"

147.                         android:text="@string/content_specs_battery"

148.                         android:textColor="@android:color/black"

149.                         android:textSize="14sp" />

150.                 </TableRow>

151.             </TableLayout>

152.      

153.             <TextView

154.                 android:layout_width="match_parent"

155.                 android:layout_height="wrap_content"

156.                 android:layout_marginBottom="8dp"

157.                 android:layout_marginLeft="16dp"

158.                 android:layout_marginRight="16dp"

159.                 android:text="@string/seller"

160.                 android:textSize="12sp" />

161.      

162.             <RelativeLayout

163.                 android:layout_width="match_parent"

164.                 android:layout_height="wrap_content"

165.                 android:layout_marginBottom="16dp"

166.                 android:layout_marginLeft="16dp"

167.                 android:layout_marginRight="16dp">

168.      

169.                 <de.hdodenhof.circleimageview.CircleImageView

170.                     android:id="@+id/profile_image"

171.                     android:layout_width="56dp"

172.                     android:layout_height="56dp"

173.                     android:layout_centerVertical="true"

174.                     android:layout_marginEnd="16dp"

175.                     android:layout_marginRight="16dp"

176.                     android:src="@drawable/photo_2" />

177.      

178.                 <TextView

179.                     android:layout_width="match_parent"

180.                     android:layout_height="wrap_content"

181.                     android:layout_centerVertical="true"

182.                     android:layout_toEndOf="@+id/profile_image"

183.                     android:layout_toRightOf="@id/profile_image"

184.                     android:text="@string/my_name"

185.                     android:textColor="@android:color/black" />

186.             </RelativeLayout>

187.      

188.             <Button

189.                 android:layout_width="match_parent"

190.                 android:layout_height="wrap_content"

191.                 android:layout_marginBottom="16dp"

192.                 android:layout_marginLeft="16dp"

193.                 android:layout_marginRight="16dp"

194.                 android:text="@string/buy" />

195.         </LinearLayout>

196.     </ScrollView>

 

14. Terakhir, pada MainActivity tambahkan beberapa baris kode berikut:

• Java
• Kotlin

3.  if (getSupportActionBar() != null) {

4.      getSupportActionBar().setTitle("Google Pixel");

5.  }

Sehingga kode yang ada di MainActivity menjadi seperti berikut:

• Java
• Kotlin

8.  public class MainActivity extends AppCompatActivity {

9.   

10.     @Override

11.     protected void onCreate(Bundle savedInstanceState) {

12.         super.onCreate(savedInstanceState);

13.         setContentView(R.layout.activity_main);

14.  

15.         if (getSupportActionBar() != null) {

16.             getSupportActionBar().setTitle("Google Pixel");

17.         }

18.     }

19. }

 

15. Sekarang silakan jalankan aplikasinya. Seharusnya hasilnya seperti ini:

Bedah Kode

Tidak ada yang rumit di bagian ini karena Anda hanya berhadapan dengan cara membentuk sebuah tampilan aplikasi Android yang bagus di berkas layout xml.

 

CircleImageView

Di awal kita melakukan penambahan dependensi untuk menampilkan sebuah custom ImageView dalam bentuk lingkaran. Library yang digunakan adalah CircleImageView yang dibuat oleh Henning Dodenhoff. Library ini cukup populer dan selalu dikelola dengan baik.

1.  implementation 'de.hdodenhof:circleimageview:3.0.0'

 

Strings.xml

Selanjutnya, kita akan menambahkan variabel-variabel konstan yang ditulis di dalam berkas strings.xml. Tujuannya agar teks yang sama tidak ditulis dua kali, baik itu di berkas Activity maupun berkas xml.

1.  <resources>

2.      <string name="app_name">MyViewAndViews</string>

3.      <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>

4.      <string name="content_specs_display">5.0 inches\n

5.          FHD AMOLED at 441ppi\n

6.          2.5D Corning® Gorilla® Glass 4</string>

7.      <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>

8.      <string name="content_specs_battery">2,770 mAh battery\n

9.          Standby time (LTE): up to 19 days\n

10.         Talk time (3g/WCDMA): up to 26 hours\n

11.         Internet use time (Wi-Fi): up to 13 hours\n

12.         Internet use time (LTE): up to 13 hours\n

13.         Video playback: up to 13 hours\n

14.         Audio playback (via headset): up to 110 hours\n

15.         Fast charging: up to 7 hours of use from only 15 minutes of charging</string>

16.     <string name="stock">Stock hanya 5 buah</string>

17.     <string name="specification">Spesifikasi</string>

18.     <string name="display">Display</string>

19.     <string name="size">Size</string>

20.     <string name="battery">Battery</string>

21.     <string name="seller">Dijual oleh</string>

22.     <string name="my_name">Narenda Wicaksono</string>

23.     <string name="buy">Beli</string>

24.     <string name="dummy_value">$735</string>

25.     <string name="dummy_photos">6 photos</string>

26. </resources>

Bila diperhatikan, jika kita ingin menampilkan teks ‘content_specs_size’, kita hanya perlu menuliskan nama atribut di dalam obyek TextView yang diinginkan. 

1.  <TextView

2.      android:layout_width="match_parent"

3.      android:layout_height="wrap_content"

4.      android:textSize="14sp"

5.      android:layout_weight="1"

6.      android:text="@string/content_specs_size"

7.      android:textColor="@android:color/black"/>

Dengan memanfaatkan strings.xml, Anda akan lebih mudah membuat aplikasi yang mendukung lebih dari satu bahasa.

 

View dan ViewGroup

Pembahasan mengenai Activity sebelumnya akan memudahkan Anda untuk memahami atribut dan namespace yang digunakan pada berkas layout xml. Anda dapat membaca kembali topik activity bila ada bagian yang Anda lupa.

1.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

2.      android:id="@+id/activity_main"

3.      android:layout_width="match_parent"

4.      android:layout_height="match_parent"

5.      android:background="@android:color/white">

6.   

7.      ...

8.  </ScrollView>

Ingat, semua komponen view dan viewgroup memiliki dua buah atribut penting yang harus selalu diberikan nilai untuk mengatur posisi dirinya di dalam sebuat layout, yaitu:

• layout_width
• layout_height

Kita akan menggunakan sebuah obyek ScrollView yang akan menjadi root untuk tampilan halaman aplikasi. Kita menggunakan ScrollView sebagai root karena kita ingin halaman aplikasi bisa di-scroll ke bawah dan ke atas. Hal ini akan memudahkan pengguna untuk melihat tampilan secara menyeluruh.

1.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

2.      android:id="@+id/activity_main"

3.      android:layout_width="match_parent"

4.      android:layout_height="match_parent"

5.      android:background="@android:color/white">

6.   

7.      <LinearLayout

8.          android:layout_width="match_parent"

9.          android:layout_height="wrap_content"

10.         android:orientation="vertical">

11.  

12.         ...

13.  

14.     </LinearLayout>

15. </ScrollView>

Seperti telah dijelaskan sebelumnya, ScrollView hanya dapat memiliki satu layout Viewgroup sebagai root untuk obyek View di dalamnya. Di sini susunan komponen View akan berorientasi vertikal.

1.  <FrameLayout

2.      android:layout_width="match_parent"

3.      android:layout_height="wrap_content">

4.   

5.      <ImageView

6.          android:layout_width="match_parent"

7.          android:layout_height="wrap_content"

8.          android:adjustViewBounds="true"

9.          android:scaleType="fitXY"

10.         android:src="@drawable/pixel_google" />

11.  

12.     <TextView

13.         android:layout_width="wrap_content"

14.         android:layout_height="wrap_content"

15.         android:layout_gravity="bottom"

16.         android:layout_marginStart="16dp"

17.         android:layout_marginLeft="16dp"

18.         android:layout_marginBottom="16dp"

19.         android:background="#4D000000"

20.         android:drawableStart="@drawable/ic_collections_white_18dp"

21.         android:drawableLeft="@drawable/ic_collections_white_18dp"

22.         android:drawablePadding="4dp"

23.         android:gravity="center_vertical"

24.         android:padding="16dp"

25.         android:text="@string/dummy_photos"

26.         android:textAppearance="@style/TextAppearance.AppCompat.Small"

27.         android:textColor="@android:color/white" />

28. </FrameLayout>

Gambar pixel_google yang tampil akan menjadi alas bagi obyek TextView yang berada di atasnya. Ini seperti sifat dari komponen FrameLayout itu sendiri.

1.  <TableLayout

2.      android:layout_width="match_parent"

3.      android:layout_height="wrap_content"

4.      android:layout_marginLeft="16dp"

5.      android:layout_marginRight="16dp"

6.      android:layout_marginBottom="16dp">

7.   

8.      <TableRow

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:layout_marginBottom="8dp">

12.  

13.         <TextView

14.             android:layout_width="wrap_content"

15.             android:layout_height="wrap_content"

16.             android:layout_marginEnd="16dp"

17.             android:layout_marginRight="16dp"

18.             android:text="@string/display"

19.             android:textSize="14sp" />

20.  

21.         <TextView

22.             android:layout_width="match_parent"

23.             android:layout_height="wrap_content"

24.             android:layout_weight="1"

25.             android:text="@string/content_specs_display"

26.             android:textColor="@android:color/black"

27.             android:textSize="14sp" />

28.     </TableRow>

29.  

30.     <TableRow

31.         android:layout_width="match_parent"

32.         android:layout_height="wrap_content"

33.         android:layout_marginBottom="8dp">

34.  

35.         <TextView

36.             android:layout_width="wrap_content"

37.             android:layout_height="wrap_content"

38.             android:layout_marginEnd="16dp"

39.             android:layout_marginRight="16dp"

40.             android:text="@string/size"

41.             android:textSize="14sp" />

42.  

43.         <TextView

44.             android:layout_width="match_parent"

45.             android:layout_height="wrap_content"

46.             android:layout_weight="1"

47.             android:text="@string/content_specs_size"

48.             android:textColor="@android:color/black"

49.             android:textSize="14sp" />

50.     </TableRow>

51.  

52.     <TableRow

53.         android:layout_width="match_parent"

54.         android:layout_height="wrap_content"

55.         android:layout_marginBottom="8dp">

56.  

57.         <TextView

58.             android:layout_width="wrap_content"

59.             android:layout_height="wrap_content"

60.             android:layout_marginEnd="16dp"

61.             android:layout_marginRight="16dp"

62.             android:text="@string/battery"

63.             android:textSize="14sp" />

64.  

65.         <TextView

66.             android:layout_width="match_parent"

67.             android:layout_height="wrap_content"

68.             android:layout_weight="1"

69.             android:text="@string/content_specs_battery"

70.             android:textColor="@android:color/black"

71.             android:textSize="14sp" />

72.     </TableRow>

73. </TableLayout>

Kita menggunakan TableLayout untuk menampilkan informasi spesifikasi dari perangkat Google Pixel. TableLayout yang kita gunakan sangatlah sederhana. Tidak ada garis pembatas untuk kolom dan baris bahkan cell-nya.
Hanya dengan menggunakan TableRow kita bisa menambahkan sebuah baris baru di dalam sebuah TableLayout. 

1.  <RelativeLayout

2.      android:layout_width="match_parent"

3.      android:layout_height="wrap_content"

4.      android:layout_marginLeft="16dp"

5.      android:layout_marginRight="16dp"

6.      android:layout_marginBottom="16dp">

7.   

8.      <de.hdodenhof.circleimageview.CircleImageView

9.          android:id="@+id/profile_image"

10.         android:layout_width="56dp"

11.         android:layout_height="56dp"

12.         android:layout_centerVertical="true"

13.         android:layout_marginEnd="16dp"

14.         android:layout_marginRight="16dp"

15.         android:src="@drawable/photo_2" />

16.  

17.     <TextView

18.         android:layout_width="match_parent"

19.         android:layout_height="wrap_content"

20.         android:layout_centerVertical="true"

21.         android:layout_toEndOf="@+id/profile_image"

22.         android:layout_toRightOf="@id/profile_image"

23.         android:text="@string/my_name"

24.         android:textColor="@android:color/black" />

25. </RelativeLayout>

Selanjutnya, kita menggunakan sebuah RelativeLayout untuk menampilkan sebuah gambar dan teks. Posisi dari teks mengacu ke sebelah kanan dari image dan posisi keduanya disesuaikan untuk berada di tengah secara vertikal.

• Java
• Kotlin

1.  if (getSupportActionBar() != null) {

2.      getSupportActionBar().setTitle("Google Pixel");

3.  }

Baris di atas akan mengganti nilai dari judul halaman pada ActionBar di dalam MainActivity. Kita menggunakan getSupportActionBar() karena kelas MainActivity inherit kepada AppCompatActivity, yang merupakan kelas turunan Activity. Kelas tersebut sudah menyediakan fasilitas komponen ActionBar dan mendukung semua versi OS Android.

Selamat! Anda sudah mempelajari Layout, View, dan Viewgroup. Semakin sering Anda berlatih untuk mentransformasikan sebuah desain menjadi sebuah berkas layout xml, kemampuan Anda akan semakin meningkat.

Anda dapat mengunjungi tautan berikut untuk mendalami topik antar muka pada Android:

• Resource UI dari Uplabs
• Material Design Uplabs

Source code bisa Anda dapatkan pada tautan berikut:

• Source Code MyViewAndViewGroup (Java)
• Source Code MyViewAndViewGroup (Kotlin)

Teori

Pada bagian ini, Anda akan mempelajari prinsip desain yang ada di Android. Anda juga akan mempelajari bagaimana menerapkan struktur dan tampilan view dalam sebuah berkas style. 

Prinsip dasar dalam merancang antarmuka aplikasi Android harus mematuhi kaidah yang ditetapkan oleh Design Guideline. Guideline ini dibuat oleh tim Android di Google. Beberapa prinsipnya adalah:

1. Menampilkan informasi yang hanya dibutuhkan.
2. Jika aplikasi meminta izin pengguna untuk melakukan sebuah aksi, maka pengembang harus menyediakan mekanisme untuk membatalkan izin tersebut.
3. Lakukan interupsi jika diperlukan.
4. Menggunakan teks secara singkat. Gunakan gambar untuk menjelaskan informasi secara lebih deskriptif.
5. Jaga data pengguna.
6. Permudah pengguna untuk melakukan sesuatu yang penting secara cepat.
7. Jika terlihat sama, maka perilaku haruslah sama.
8. Bantu pengguna untuk membuat keputusan tapi tetap biarkan pengguna menentukan keputusannya.

 

Best Practice

Terdapat beberapa langkah terbaik (best practice) yang harus diperhatikan ketika mengembangkan sebuah aplikasi Android, di antaranya:

1.    Desain yang baik untuk performa aplikasi
Aplikasi yang dirancang dengan baik harus dapat dijalankan dengan cepat dan jika terdapat proses yang memakan waktu, maka jalankan di background dan asynchronous.

2.    Desain yang baik agar aplikasi dapat bersifat responsif
Berikan feedback ke pengguna terhadap aksi yang dilakukannya. Contohnya, jika pengguna menekan sebuah tombol, maka aplikasi harus menampilkan efek tekan.

3. Desain yang mengakomodasi kebutuhan informasi pengguna
   Aplikasi Anda harus menampilkan informasi yang dibutuhkan pengguna. Bila diperlukan, aplikasi perlu menampilkan informasi terakhir yang diperoleh, sehingga pengguna tidak perlu lagi menunggu aplikasi memuat data dari server.
4. Desain untuk optimasi pengunaan baterai
   Usahakan agar aplikasi menggunakan daya baterai yang kecil. Minimalisir penggunaan background service yang tidak perlu. Berhentikan semua listener jika aplikasi tidak sedang dijalankan. Manfaatkan alarmmanager dan jobscheduler jika memang terdapat task yang harus dilakukan secara berkala.
5. Desain untuk efisiensi pengunaan koneksi jaringan
   Aplikasi yang baik adalah yang efisien dalam memanfaatkan koneksi ke jaringan internet. Ia memilah-milah task mana yang perlu dijalankan saat perangkat pengguna terhubung ke wifi (unmetered network) atau pun network lain. Penggunaan koneksi jaringan yang baik akan menjadi hal wajib jika aplikasi Anda ingin tetap digunakan oleh pengguna.

Nilai yang bagus pada poin tampilan akan mendukung kualitas fungsi aplikasi yang dibuat. Pengguna akan mempertahankan aplikasi Anda dan tetap menggunakannya selama aplikasi dibutuhkan dan memenuhi poin-poin di atas.

Kembali pada topik style dan theme. Jika Anda pernah mengembangkan sebuah aplikasi berbasis web, maka sudah pasti tidak asing lagi dengan CSS (Cascading Style Sheet). Ia mengatur tampilan dari sebuah halaman website. Pendekatan yang serupa juga berlaku di Android. Inilah yang dinamakan style.

Style merupakan sebuah kumpulan properti yang dibutuhkan untuk mendefinisikan bagaimana sebuah komponen view dan layar jendela (bisa activity maupun fragment) ditampilkan. Contoh properti ini adalah height, width, background_color.

Style terdefinisi dalam file xml sendiri. Anda bisa menemukannya di res →  values  →  styles.xml.

Sebagai contoh, Anda memiliki sebuah textview yang berisi berbagai atribut seperti contoh kode di bawah ini. Textview ini berguna untuk menampilkan konten dari detail informasi yang terdapat di keseluruhan aplikasi.

1.  <TextView

2.  android:layout_width="match_parent"

3.  android:layout_height="wrap_content"

4.  android:textColor="#00FF00"

5.  android:typeface="monospace"

6.  android:text="@string/hello" />

Sangat tidak efektif jika kita melakukan copy paste dari satu layout xml ke layout xml lainnya. Kita dapat menyederhanakan hal tersebut menjadi:

1.  <TextView

2.  style="@style/CodeFont"

3.  android:text="@string/hello" />

Attribute layout_width, layout_height, textcolor, dan typeface bisa kita pindahkan menjadi sebuah style sendiri untuk textview tersebut dan dapat digunakan kembali untuk semua obyek textview sejenis.

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <resources>

3.  <style name="CodeFont" parent="@android:style/TextAppearance.Medium">

4.      <item name="android:layout_width">match_parent</item>

5.      <item name="android:layout_height">wrap_content</item>

6.      <item name="android:textcolor">#00FF00</item>

7.      <item name="android:typeface">monospace</item>

8.  </style>

9.  </resources>

Beberapa aturan yang harus diperhatikan ketika kita menggunakan styles yaitu:

1. Semua style yang dibuat harus berada dalam tag resources.
2. Semua style yang ingin didefinisikan harus berada dalam tag style.
   
   

1.  <style name="CodeFont" parent="@android:style/TextAppearance.Medium">

Name      :    Nama dari style yang Anda buat.

Parent    :     Nilai style yang akan mewarisi style (termasuk attribute di dalamnya) yang telah ada, umumnya bawaan dari sdk ataupun platform.
Style yang diwarisi akan dapat diubah dan ditambahkan atributnya dalam style baru yang Anda buat. Android sudah menyediakan beragam style yang bisa Anda gunakan untuk beragam tampilan.

3. Semua atribut yang didefinisikan dalam sebuah style harus berada dalam tag item.
   
   

1.  <item name="android:layout_width">match_parent</item>

Name                  :    Nama atribut yang ingin didefinisikan.

Match_parent :    Nilai dari atribut tersebut.

 

Andaikan dalam satu kasus Anda ingin membuat turunan dari style yang telah Anda buat. Misalnya Anda ingin membuat style CodeFont berwarna merah, Anda dapat melakukannya dengan cara berikut ini:

1.  <style name="CodeFont.Red">

2.  <item name="android:textColor">#FF0000</item>

3.  </style>

atau berwarna merah dan juga dengan ukuran yang besar menjadi seperti ini :

1.  <style name="CodeFont.Red">

2.  <item name="android:textColor">#FF0000</item>

3.  <item name="android:textSize">30sp</item>

4.  </style>

 

Mudah bukan? Anda baru saja belajar tentang bagaimana sebuah style dibuat dan diimplementasikan. Selanjutnya Anda akan mempelajari theme.

Theme atau tema itu sendiri merupakan sebuah style yang diterapkan khusus untuk activity dan application pada berkas AndroidManifest.xml. Pada proyek sebelumnya, kita mendefinisikannya dengan cara berikut ini:

1.  android:theme="@style/AppTheme"

Di mana AppTheme pada styles.xml berisi :

1.  <resources>

2.  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

3.      <!-- Customize your theme here. -->

4.      <item name="colorPrimary">@color/colorPrimary</item>

5.      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

6.      <item name="colorAccent">@color/colorAccent</item>

7.  </style>

8.  </resources>

Sebuah styles yang inherit ke tema AppCompat untuk varian light dan memiliki DarkActionBar. Semua nilai pada atribut terdapat pada berkas colors.xml yang berisi.

1.  <resources>

2.      <color name="colorPrimary">#3F51B5</color>

3.      <color name="colorPrimaryDark">#303F9F</color>

4.      <color name="colorAccent">#FF4081</color>

5.  </resources>

Saat ini, pengembangan aplikasi Android mengacu pada implementasi prinsip material design untuk merancang user interface dan user experience. Anda bisa mempelajari lebih lanjut tentang material design pada tautan berikut:

• Material Design

Semenjak material design ditetapkan sebagai acuan utama untuk pengembangan user interface dan user experience, terdapat penyederhanaan komponen inti yang digunakan. Pada gambar di atas, terlihat titik-titik mana saja yang hanya kita gunakan untuk menjadi fondasi dasar style aplikasi yang dibuat.

Bila Anda tertarik untuk mengetahui prinsip sebelum material design, Anda dapat melihat video berikut ini:

• Video From Holo to Material

 

Pada modul berikutnya, Anda akan menerapkan teori yang telah kita pelajari pada modul ini.

Tujuan

Pada codelab kali kita akan menerapkan style dan theme pada contoh aplikasi yang telah kita buat sebelumnya pada modul Views dan Viewgroup. Beberapa poin yang didapatkan pada materi ini adalah:

1. Bagaimana memanfaatkan style pada aplikasi?
2. Bagaimana memanfaatkan theme pada aplikasi?

 Hasil dari aplikasi yang dibuat akan jadi seperti ini.

Codelab Style dan Theme

1.    Buka kembali proyek sebelumnya (MyViewAndViews) atau unduh di sini :

• Source Code MyViewAndViews (Java)
• Source Code MyViewAndViews (Kotlin)
  
  

2.    Buka berkas colors.xml di res → values → colors.xml. Ubah setiap nilai yang ada saat ini dengan nilai-nilai berikut :

1.          <?xml version="1.0" encoding="utf-8"?>

2.  <resources>

3.      <color name="colorPrimary">#607D8B</color>

4.      <color name="colorPrimaryDark">#455A64</color>

5.      <color name="colorAccent">#FF5722</color>

6.      <color name="colorSubTitle">#757575</color>

7.  </resources>

 

3.    Selanjutnya, buka berkas styles.xml di res → values → styles.xml dan tambahkan beberapa style seperti di bawah ini:

0.          <resources>

1.   

2.      <!-- Base application theme. -->

3.      <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

4.          <!-- Customize your theme here. -->

5.          <item name="colorPrimary">@color/colorPrimary</item>

6.          <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

7.          <item name="colorAccent">@color/colorAccent</item>

8.      </style>

9.   

10.     <style name="TextContent" parent="@style/TextAppearance.AppCompat">

11.         <item name="android:layout_width">wrap_content</item>

12.         <item name="android:layout_height">wrap_content</item>

13.         <item name="android:layout_marginLeft">16dp</item>

14.         <item name="android:layout_marginRight">16dp</item>

15.     </style>

16.  

17.     <style name="TextContent.Small">

18.         <item name="android:textAppearance">@style/TextAppearance.AppCompat.Small</item>

19.     </style>

20.  

21.     <style name="TextContent.Small.White">

22.         <item name="android:textColor">@android:color/white</item>

23.     </style>

24.  

25.     <style name="TextContent.Subtitle">

26.         <item name="android:textColor">@color/colorSubTitle</item>

27.         <item name="android:textSize">12sp</item>

28.     </style>

29.  

30.     <style name="TextContent.Black">

31.         <item name="android:textColor">@android:color/black</item>

32.     </style>

33.  

34.     <style name="TextSpec">

35.         <item name="android:textSize">14sp</item>

36.     </style>

37.  

38.     <style name="TextSpec.Field">

39.         <item name="android:layout_width">wrap_content</item>

40.         <item name="android:layout_height">wrap_content</item>

41.         <item name="android:layout_marginRight">16dp</item>

42.         <item name="android:textColor">@color/colorSubTitle</item>

43.  

44.     </style>

45.  

46.     <style name="TextSpec.Value">

47.         <item name="android:layout_width">match_parent</item>

48.         <item name="android:layout_height">wrap_content</item>

49.         <item name="android:layout_weight">1</item>

50.         <item name="android:textColor">@android:color/black</item>

51.     </style>

52.  

53. </resources>

 

3.    Jika selesai, kita akan implementasikan beberapa style yang baru saja dibuat ke dalam berkas activity_main.xml dan kondisikan seperti ini:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

3.      android:id="@+id/activity_main"

4.      android:layout_width="match_parent"

5.      android:layout_height="match_parent"

6.      android:background="@android:color/white">

7.   

8.      <LinearLayout

9.          android:layout_width="match_parent"

10.         android:layout_height="wrap_content"

11.         android:orientation="vertical">

12.  

13.         <FrameLayout

14.             android:layout_width="match_parent"

15.             android:layout_height="wrap_content">

16.  

17.             <ImageView

18.                 android:layout_width="match_parent"

19.                 android:layout_height="wrap_content"

20.                 android:adjustViewBounds="true"

21.                 android:scaleType="fitXY"

22.                 android:src="@drawable/pixel_google" />

23.  

24.             <TextView

25.                 style="@style/TextContent.Small.White"

26.                 android:layout_gravity="bottom"

27.                 android:layout_marginStart="16dp"

28.                 android:layout_marginBottom="16dp"

29.                 android:background="#4D000000"

30.                 android:drawableStart="@drawable/ic_collections_white_18dp"

31.                 android:drawablePadding="4dp"

32.                 android:gravity="center_vertical"

33.                 android:padding="8dp"

34.                 android:text="@string/dummy_photos"

35.                 android:textColor="@android:color/white" />

36.         </FrameLayout>

37.  

38.         <TextView

39.             style="@style/TextContent.Black"

40.             android:layout_marginTop="16dp"

41.             android:layout_marginBottom="8dp"

42.             android:text="@string/dummy_value"

43.             android:textSize="32sp" />

44.  

45.         <TextView

46.             style="@style/TextContent.Subtitle"

47.             android:layout_marginBottom="16dp"

48.             android:text="@string/stock" />

49.  

50.         <TextView

51.             style="@style/TextContent"

52.             android:layout_marginBottom="16dp"

53.             android:lineSpacingMultiplier="1"

54.             android:text="@string/content_text"

55.             android:textColor="@android:color/black" />

56.  

57.         <TextView

58.             style="@style/TextContent.Subtitle"

59.             android:layout_marginBottom="8dp"

60.             android:text="@string/specification" />

61.  

62.         <TableLayout

63.             android:layout_width="match_parent"

64.             android:layout_height="wrap_content"

65.             android:layout_marginLeft="16dp"

66.             android:layout_marginRight="16dp"

67.             android:layout_marginBottom="16dp">

68.  

69.             <TableRow

70.                 android:layout_width="match_parent"

71.                 android:layout_height="wrap_content"

72.                 android:layout_marginBottom="8dp">

73.  

74.                 <TextView

75.                     style="@style/TextSpec.Field"

76.                     android:text="@string/display" />

77.  

78.                 <TextView

79.                     style="@style/TextSpec.Value"

80.                     android:text="@string/content_specs_display" />

81.             </TableRow>

82.  

83.             <TableRow

84.                 android:layout_width="match_parent"

85.                 android:layout_height="wrap_content"

86.                 android:layout_marginBottom="8dp">

87.  

88.                 <TextView

89.                     style="@style/TextSpec.Field"

90.                     android:text="@string/size" />

91.  

92.                 <TextView

93.                     style="@style/TextSpec.Value"

94.                     android:text="@string/content_specs_size" />

95.             </TableRow>

96.  

97.             <TableRow

98.                 android:layout_width="match_parent"

99.                 android:layout_height="wrap_content"

100.                     android:layout_marginBottom="8dp">

101.      

102.                     <TextView

103.                         style="@style/TextSpec.Field"

104.                         android:text="@string/battery" />

105.      

106.                     <TextView

107.                         style="@style/TextSpec.Value"

108.                         android:text="@string/content_specs_battery" />

109.                 </TableRow>

110.             </TableLayout>

111.      

112.             <TextView

113.                 style="@style/TextContent.Subtitle"

114.                 android:layout_marginBottom="8dp"

115.                 android:text="@string/seller" />

116.      

117.             <RelativeLayout

118.                 android:layout_width="match_parent"

119.                 android:layout_height="wrap_content"

120.                 android:layout_marginLeft="16dp"

121.                 android:layout_marginRight="16dp"

122.                 android:layout_marginBottom="16dp">

123.      

124.                 <de.hdodenhof.circleimageview.CircleImageView

125.                     android:id="@+id/profile_image"

126.                     android:layout_width="56dp"

127.                     android:layout_height="56dp"

128.                     android:layout_centerVertical="true"

129.                     android:layout_marginEnd="16dp"

130.                     android:layout_marginRight="16dp"

131.                     android:src="@drawable/photo_2" />

132.      

133.                 <TextView

134.                     style="@style/TextContent"

135.                     android:layout_toEndOf="@+id/profile_image"

136.                     android:layout_toRightOf="@id/profile_image"

137.                     android:text="@string/my_name"

138.                     android:textColor="@android:color/black" />

139.             </RelativeLayout>

140.      

141.             <Button

142.                 android:layout_width="match_parent"

143.                 android:layout_height="wrap_content"

144.                 android:layout_marginLeft="16dp"

145.                 android:layout_marginRight="16dp"

146.                 android:layout_marginBottom="16dp"

147.                 android:text="@string/buy" />

148.         </LinearLayout>

149.     </ScrollView>

 

4. Jika selesai coba jalankan aplikasi Anda. Seharusnya hasilnya seperti ini:
   
   Perhatikan bagaimana penulisan di setiap obyek TextView menjadi lebih sederhana:
   
   

1.  <TextView

2.      style="@style/TextContent.Subtitle"

3.      android:layout_marginBottom="8dp"

4.      android:text="@string/seller" />

 

5.    Masih ada yang perlu kita perbaiki. Tombol masih berada dalam kondisi default.
Yuk coba ubah agar lebih menyatu dengan tema aplikasi. Buka kembali styles.xml dan tambahkan kode berikut di atas tag </resources>.

1.  <style name="ButtonGeneral" parent="@style/Widget.AppCompat.Button.Colored">

2.      <item name="android:layout_width">match_parent</item>

3.      <item name="android:layout_height">wrap_content</item>

4.      <item name="android:layout_marginRight">16dp</item>

5.      <item name="android:layout_marginLeft">16dp</item>

6.      <item name="android:layout_marginBottom">16dp</item>

7.  </style>

 

6.    Pada activity_main.xml kondisikan bagian obyek Button menjadi seperti ini:

1.  <Button

2.      android:text="@string/buy"

3.      style="@style/ButtonGeneral"/>

 

7.    Jalankan aplikasi Anda. Seharusnya tampilannya akan menjadi seperti ini:

Sekarang coba Anda klik dan tahan tombolnya. Bila perangkat Android Anda berada di bawah Lollipop (API  level 21), seharusnya tombol akan berwarna lebih gelap. Sedangkan jika di atas Lollipop, akan ada efek air (ripple) ketika tombol Anda tekan. 

Sistem akan secara otomatis mengambil nilai accentColor sebagai nilai warna indikator aktif untuk Button dan nilai pada atribut colorButtonNormal sebagai nilai gelap ketika obyek Button ditekan.

 

Bedah Kode

Style

Selesai! Saat ini Anda sudah memahami bagaimana Theme dan Style diterapkan dalam membangun sebuah aplikasi di Android. Pengelompokan atribut untuk view yang sama akan lebih memudahkan Anda dalam menentukan dan menyeragamkan format view yang akan ditampilkan ke dalam layar.

Contohnya lihat kode berikut:

1.  <TextView

2.      style="@style/TextContent.Subtitle"

3.      android:layout_marginBottom="8dp"

4.      android:text="@string/seller" />

Anda bisa menyusun View menjadi lebih rapi dan cepat, ketika Anda memiliki komponen yang sama. Anda bisa memanggil style tersebut setiap halaman yang Anda butuhkan. 

 

Anda dapat mendalami lebih lanjut materi modul ini dengan membaca tautan berikut:

• Ui Theme
• Material Design

 

Source code dapat diunduh pada tautan berikut:

• Source Code Style and Theme (Java)
• Source Code Style and Theme (Kotlin)

Selamat! Satu langkah besar sudah anda lalui, sekarang ayo kita lanjut ke materi yang lebih seru!

Teori

Pada materi sebelumnya kita telah belajar bagaimana menampilkan kumpulan data dalam bentuk sebuah list. Kita menggunakan obyek listview untuk menampilkan data-data yang berasal dari kontak di peranti pengguna ke layar.

Sangat sederhana tapi sangat berarti. Mengapa? Pada dasarnya interaksi umum antara pengguna dengan aplikasi dalam menampilkan data dengan jumlah yang banyak adalah dengan menggunakan list yang bisa di-scroll ke atas dan ke bawah.

Listview menjadi komponen pertama yang mengakomodasi hal tersebut. Namun semenjak Google meluncurkan pendekatan material design, recyclerview menjadi pilihan pertama yang harus digunakan. Anda masih bisa menggunakan kedua komponen tersebut secara berdampingan dalam satu aplikasi.

 

RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang pendahulunya listview. Ia bersifat lebih fleksibel. RecyclerView memiliki kemampuan untuk menampilkan data secara efisien dalam jumlah yang besar. Terlebih jika Anda memiliki koleksi data dengan elemen yang mampu berubah-ubah sewaktu dijalankan (runtime).

 

Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum menggunakan recyclerview.

1. RecyclerView dan LayoutManager: Komponen antarmuka yang bertugas untuk menampilkan data set yang dimiliki di dalamnya. Layoutmanager akan mengatur posisi tampilan data baik itu secara list (vertikal), grid (baris dan kolom) atau staggered grid (grid yang memiliki susunan tak seragam / tak beraturan).
2. Adapter: Komponen yang akan mengatur bagaimana menampilkan data set ke dalam RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari file layout xml untuk tiap elemen dari data yang sebelumnya terpasang (bind) ke dalam RecyclerView.
3. Dataset: Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list maupun obyek map.
4. Item Animator: Ini yang spesial. Kita bisa pasang animasi untuk tiap item di dalamnya. Contoh animasi yang umum seperti penambahan (add) dan penghapusan (removal) item. Kita akan mempelajari hal ini pada materi terpisah.

 

Langkah-langkah mengimplementasikan recyclerview sebagai berikut :

1.    Tambahkan dependencies komponen recyclerview pada file build.gradle  level modul.

2.    Tambahkan obyek RecyclerView di berkas layout xml dari activity / fragment.

3.    Definisikan model kelas (POJO) yang akan digunakan sebagai data source.

4.    Buat berkas layout xml untuk baris item di RecyclerView.

5.    Buat sebuah kelas adapter yang inherit ke RecyclerView.Adapter dan ViewHolder untuk menampilkan tiap elemen data.

6. Definisikan obyek RecyclerView berikut dengan bentuk yang diinginkan (bisa dalam bentuk list, grid, atau staggered) dan selanjutnya pasang obyek adapter (binding) agar bisa menampilkan koleksi data ke dalam RecyclerView.

 

Anda dapat memahami lebih dalam materi recyclerview dengan membaca tautan berikut ini:

• List Cards
• Recycler View

Tujuan

Pada codelab kali ini kalian akan mempelajari cara menampilkan data Pahlawan ke dalam sebuah RecyclerView. Beberapa poin yang akan diulas dalam materi ini adalah :

1. Bagaimana menggunakan Recyclerview?
2. Berbagai macam Recyclerview seperti list, grid, dan card.
3. Membuat onClick pada Recyclerview.
4. Menambahkan menu pada Action Bar.

 

Contoh dari RecyclerView yang akan kita buat dalam dalam bentuk list, grid dan list dengan bentuk kartu menggunakan cardview di mana semuanya berada dalam satu halaman saja.

Logika Dasar

Melakukan klik ke button → memanggil fragment atau activity dengan atau tanpa data → menampilkan activity atau fragment yang dituju.

 

Codelab RecyclerView Mode List

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

Nama Project	MyRecyclerView
Target & Minimum Target SDK	Phone and Tablet, Api level 21
Tipe Activity	Empty Activity
Activity Name	MainActivity
Use AndroidX artifacts	True
Language	Java / Kotlin

2.     

3.    Setelah terbentuk, tambahkan beberapa dependensi yang akan kita gunakan pada berkas build.gradle (module: app) di bagian dependencies seperti berikut:

1.  implementation 'androidx.recyclerview:recyclerview:1.0.0'

2.  implementation 'androidx.cardview:cardview:1.0.0'

3.  implementation 'de.hdodenhof:circleimageview:3.0.0'

4.  implementation 'com.github.bumptech.glide:glide:4.9.0'

Sehingga secara keseluruhan berkas build.gradle(module: app) Anda akan seperti ini:

5.  apply plugin: 'com.android.application'

6.   

7.  android {

8.      compileSdkVersion 29

9.      defaultConfig {

10.         applicationId "com.dicoding.myrecyclerview"

11.         minSdkVersion 15

12.         targetSdkVersion 29

13.         versionCode 1

14.         versionName "1.0"

15.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

16.     }

17.     buildTypes {

18.         release {

19.             minifyEnabled false

20.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

21.         }

22.     }

23. }

24. dependencies {

25.     implementation fileTree(dir: 'libs', include: ['*.jar'])

26.     implementation 'androidx.appcompat:appcompat:1.0.2'

27.     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

28.     testImplementation 'junit:junit:4.12'

29.     androidTestImplementation 'androidx.test:runner:1.2.0'

30.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

31.  

32.     implementation 'androidx.recyclerview:recyclerview:1.0.0'

33.     implementation 'androidx.cardview:cardview:1.0.0'

34.     implementation 'de.hdodenhof:circleimageview:3.0.0'

35.     implementation 'com.github.bumptech.glide:glide:4.9.0'

36. }

 

2.    Selanjutnya pada activity_main.xml lengkapi kodenya menjadi seperti berikut:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:id="@+id/activity_main"

5.      android:layout_width="match_parent"

6.      android:layout_height="match_parent">

7.   

8.      <androidx.recyclerview.widget.RecyclerView

9.          android:id="@+id/rv_heroes"

10.         android:layout_width="match_parent"

11.         android:layout_height="match_parent"

12.         tools:listitem="@layout/item_row_hero" />

13. </RelativeLayout>

Akan ada tanda merah di @layout/item_row_hero. Ini karena layout item_row_hero belum ditambahkan.

3.    Saatnya kita membuat sebuah item tampilan dalam bentuk berkas layout xml yang akan ditampilkan di RecyclerView. Karena data pertama kali akan ditampilkan dalam bentuk list, maka kita buat layout dengan cara klik kanan pada direktori layout → new → layout resource file dan kemudian beri nama item_row_hero.

 

4.    Setelah terbentuk kita lengkapi tampilan tersebut menjadi seperti ini:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="wrap_content"

6.      android:orientation="horizontal"

7.      android:padding="16dp">

8.   

9.      <de.hdodenhof.circleimageview.CircleImageView

10.         android:id="@+id/img_item_photo"

11.         android:layout_width="55dp"

12.         android:layout_height="55dp"

13.         android:layout_marginEnd="16dp"

14.         android:layout_marginRight="16dp"

15.         tools:src="@android:color/darker_gray" />

16.  

17.     <LinearLayout

18.         android:layout_width="match_parent"

19.         android:layout_height="wrap_content"

20.         android:layout_centerVertical="true"

21.         android:layout_toEndOf="@id/img_item_photo"

22.         android:layout_toRightOf="@id/img_item_photo"

23.         android:orientation="vertical">

24.  

25.         <TextView

26.             android:id="@+id/tv_item_name"

27.             android:layout_width="match_parent"

28.             android:layout_height="wrap_content"

29.             android:layout_marginBottom="8dp"

30.             android:textSize="16sp"

31.             android:textStyle="bold"

32.             tools:text="@string/heroes_name" />

33.  

34.         <TextView

35.             android:id="@+id/tv_item_detail"

36.             android:layout_width="match_parent"

37.             android:layout_height="wrap_content"

38.             android:ellipsize="end"

39.             android:maxLines="2"

40.             tools:text="@string/detail" />

41.     </LinearLayout>

42. </RelativeLayout>

tools:text bisa kita gunakan untuk placeholder di dalam editor layout. Atribut ini tidak akan terbawa saat run-time dan hanya akan nampak di dalam preview editor saja.

Catatan:
Pastikan untuk ukuran android:layout_height menggunakan wrap_content semua, supaya ketika dijalankan tidak ada layout kosong / space lebar karena menggunakan match_parent, hal ini karena 1 item nya dihitung 1 layar.

Akan ada yang eror pada bagian @string/heroes_name dan @string/from. Seperti pada modul sebelumnya, Anda perlu menambahkan data String pada bagian res → values → strings.xml.

43. <resources>

44.     <string name="app_name">My Application</string>

45.     <string name="heroes_name">Nama Pahlawan</string>

46.     <string name="detail">Detail</string>

47. </resources>

 

5.    Kemudian buat sebuah kelas model data bernama Hero.
Setelah itu kita bisa menambahkan kode menjadi seperti berikut:

• Java
• Kotlin

3.  public class Hero {

4.      private String name;

5.      private String detail;

6.      private int photo;

7.  }

Setelah itu, kita akan buat setter getter, seperti sebelumnya. Bisa kita lakukan dengan Alt+Insert atau Klik Kanan Generate → Getter and Setter.

Kemudian pilih semua variabel yang sudah dibuat.
Maka kode Hero akan menjadi seperti ini:

• Java
• Kotlin

10. public class Hero {

11.     private String name;

12.     private String detail;

13.     private int photo;

14.  

15.     public String getName() {

16.         return name;

17.     }

18.  

19.     public void setName(String name) {

20.         this.name = name;

21.     }

22.  

23.     public String getDetail() {

24.         return detail;

25.     }

26.  

27.     public void setDetail(String detail) {

28.         this.detail = detail;

29.     }

30.  

31.     public int getPhoto() {

32.         return photo;

33.     }

34.  

35.     public void setPhoto(int photo) {

36.         this.photo = photo;

37.     }

38. }

Catatan: Untuk bahasa Kotlin, Anda sudah bisa memanfaatkan constructor, getter, dan setter dari data classes Hero.

 

6.    Setelah selesai kita akan membuat beberapa kelas terkait koleksi data yang ingin ditampilkan. Buat kelas baru dengan nama HeroesData .
Sebelum Anda mengubah kelas tersebut, silakan unduh berkas drawable-nya di sini. Setelah itu kita bisa menambahkan kode menjadi seperti berikut:

• Java
• Kotlin

2.  public class HeroesData {

3.      private static String[] heroNames = {

4.              "Ahmad Dahlan",

5.              "Ahmad Yani",

6.              "Sutomo",

7.              "Gatot Soebroto",

8.              "Ki Hadjar Dewantarai",

9.              "Mohammad Hatta",

10.             "Soedirman",

11.             "Soekarno",

12.             "Soepomo",

13.             "Tan Malaka"

14.     };

15.  

16.     private static String[] heroDetails = {

17.             "Salah seorang ulama dan khatib terkemuka di Masjid Besar Kasultanan Yogyakarta pada masa itu, dan ibu dari K.H. Ahmad Dahlan adalah puteri dari H. Ibrahim yang juga menjabat penghulu Kesultanan Ngayogyakarta Hadiningrat pada masa itu. KH. Ahmad Dahlan telah mempelopori kebangkitan ummat Islam untuk menyadari nasibnya sebagai bangsa terjajah yang masih harus belajar dan berbuat.",

18.             "Jenderal TNI Anumerta Ahmad Yani (juga dieja Achmad Yani; lahir di Purworejo, Jawa Tengah, 19 Juni 1922 – meninggal di Lubang Buaya, Jakarta, 1 Oktober 1965 pada umur 43 tahun) adalah komandan Tentara Nasional Indonesia Angkatan Darat, dan dibunuh oleh anggota Gerakan 30 September saat mencoba untuk menculik dia dari rumahnya.",

19.             "Sutomo (lahir di Surabaya, Jawa Timur, 3 Oktober 1920 – meninggal di Padang Arafah, Arab Saudi, 7 Oktober 1981 pada umur 61 tahun) lebih dikenal dengan sapaan akrab oleh rakyat sebagai Bung Tomo, adalah pahlawan yang terkenal karena peranannya dalam membangkitkan semangat rakyat untuk melawan kembalinya penjajah Belanda melalui tentara NICA, yang berakhir dengan pertempuran 10 November 1945 yang hingga kini diperingati sebagai Hari Pahlawan.",

20.             "Jenderal TNI (Purn.) Gatot Soebroto (lahir di Sumpiuh, Banyumas, Jawa Tengah, 10 Oktober 1907 – meninggal di Jakarta, 11 Juni 1962 pada umur 54 tahun) adalah tokoh perjuangan militer Indonesia dalam merebut kemerdekaan dan juga pahlawan nasional Indonesia. Ia dimakamkan di Ungaran, kabupaten Semarang.",

21.             "Raden Mas Soewardi Soerjaningrat (EBI: Suwardi Suryaningrat, sejak 1922 menjadi Ki Hadjar Dewantara, EBI: Ki Hajar Dewantara, beberapa menuliskan bunyi bahasa Jawanya dengan Ki Hajar Dewantoro; lahir di Pakualaman, 2 Mei 1889 – meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun; selanjutnya disingkat sebagai \"Soewardi\" atau \"KHD\") adalah aktivis pergerakan kemerdekaan Indonesia, kolumnis, politisi, dan pelopor pendidikan bagi kaum pribumi Indonesia dari zaman penjajahan Belanda. Ia adalah pendiri Perguruan Taman Siswa, suatu lembaga pendidikan yang memberikan kesempatan bagi para pribumi untuk bisa memperoleh hak pendidikan seperti halnya para priyayi maupun orang-orang Belanda.",

22.             "Dr.(HC) Drs. H. Mohammad Hatta (lahir dengan nama Mohammad Athar, dikenal sebagai Bung Hatta; lahir di Fort de Kock (sekarang Bukittinggi, Sumatera Barat), Hindia Belanda, 12 Agustus 1902 – meninggal di Jakarta, 14 Maret 1980 pada umur 77 tahun) adalah tokoh pejuang, negarawan, ekonom, dan juga Wakil Presiden Indonesia yang pertama. Ia bersama Soekarno memainkan peranan penting untuk memerdekakan bangsa Indonesia dari penjajahan Belanda sekaligus memproklamirkannya pada 17 Agustus 1945. Ia juga pernah menjabat sebagai Perdana Menteri dalam Kabinet Hatta I, Hatta II, dan RIS. Ia mundur dari jabatan wakil presiden pada tahun 1956, karena berselisih dengan Presiden Soekarno. Hatta juga dikenal sebagai Bapak Koperasi Indonesia.",

23.             "Jenderal Besar Raden Soedirman (EYD: Sudirman; lahir 24 Januari 1916 – meninggal 29 Januari 1950 pada umur 34 tahun) adalah seorang perwira tinggi Indonesia pada masa Revolusi Nasional Indonesia. Menjadi panglima besar Tentara Nasional Indonesia pertama, ia secara luas terus dihormati di Indonesia. Terlahir dari pasangan rakyat biasa di Purbalingga, Hindia Belanda, Soedirman diadopsi oleh pamannya yang seorang priyayi. Setelah keluarganya pindah ke Cilacap pada tahun 1916, Soedirman tumbuh menjadi seorang siswa rajin; ia sangat aktif dalam kegiatan ekstrakurikuler, termasuk mengikuti program kepanduan yang dijalankan oleh organisasi Islam Muhammadiyah. Saat di sekolah menengah, Soedirman mulai menunjukkan kemampuannya dalam memimpin dan berorganisasi, dan dihormati oleh masyarakat karena ketaatannya pada Islam. Setelah berhenti kuliah keguruan, pada 1936 ia mulai bekerja sebagai seorang guru, dan kemudian menjadi kepala sekolah, di sekolah dasar Muhammadiyah; ia juga aktif dalam kegiatan Muhammadiyah lainnya dan menjadi pemimpin Kelompok Pemuda Muhammadiyah pada tahun 1937. Setelah Jepang menduduki Hindia Belanda pada 1942, Soedirman tetap mengajar. Pada tahun 1944, ia bergabung dengan tentara Pembela Tanah Air (PETA) yang disponsori Jepang, menjabat sebagai komandan batalion di Banyumas. Selama menjabat, Soedirman bersama rekannya sesama prajurit melakukan pemberontakan, namun kemudian diasingkan ke Bogor.",

24.             "Dr.(H.C.) Ir. H. Soekarno (ER, EYD: Sukarno, nama lahir: Koesno Sosrodihardjo) (lahir di Surabaya, Jawa Timur, 6 Juni 1901 – meninggal di Jakarta, 21 Juni 1970 pada umur 69 tahun) adalah Presiden pertama Republik Indonesia yang menjabat pada periode 1945–1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia (bersama dengan Mohammad Hatta) yang terjadi pada tanggal 17 Agustus 1945. Soekarno adalah yang pertama kali mencetuskan konsep mengenai Pancasila sebagai dasar negara Indonesia dan ia sendiri yang menamainya.",

25.             "Prof. Mr. Dr. Soepomo (Ejaan Soewandi: Supomo; lahir di Sukoharjo, Jawa Tengah, 22 Januari 1903 – meninggal di Jakarta, 12 September 1958 pada umur 55 tahun) adalah seorang pahlawan nasional Indonesia. Soepomo dikenal sebagai arsitek Undang-undang Dasar 1945, bersama dengan Muhammad Yamin dan Soekarno.",

26.             "Tan Malaka atau Ibrahim gelar Datuk Sutan Malaka (lahir di Nagari Pandam Gadang, Suliki, Lima Puluh Kota, Sumatera Barat, 2 Juni 1897 – meninggal di Desa Selopanggung, Kediri, Jawa Timur, 21 Februari 1949 pada umur 51 tahun) adalah seorang pembela kemerdekaan Indonesia, tokoh Partai Komunis Indonesia, juga pendiri Partai Murba, dan merupakan salah satu Pahlawan Nasional Indonesia."

27.     };

28.  

29.     private static int[] heroesImages = {

30.             R.drawable.ahmad_dahlan,

31.             R.drawable.ahmad_yani,

32.             R.drawable.bung_tomo,

33.             R.drawable.gatot_subroto,

34.             R.drawable.ki_hadjar_dewantara,

35.             R.drawable.mohammad_hatta,

36.             R.drawable.sudirman,

37.             R.drawable.sukarno,

38.             R.drawable.supomo,

39.             R.drawable.tan_malaka

40.     };

41.  

42.     static ArrayList<Hero> getListData() {

43.         ArrayList<Hero> list = new ArrayList<>();

44.         for (int position = 0; position < heroNames.length; position++) {

45.             Hero hero = new Hero();

46.             hero.setName(heroNames[position]);

47.             hero.setDetail(heroDetails[position]);

48.             hero.setPhoto(heroesImages[position]);

49.             list.add(hero);

50.         }

51.         return list;

52.     }

53. }

 

7.    Sekarang kita akan membuat sebuah adapter yang akan memformat bagaimana tiap elemen dari koleksi data ditampilkan. Buat kelas adapter secara manual dengan klik kanan pada package utama → new → Java Class dan beri nama ListHeroAdapter.

Setelah kelas adapter berhasil dibuat, lengkapi kodenya menjadi seperti berikut:

• Java
• Kotlin

2.  public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

3.      

4.  }

Maka akan ada garis merah dan ListViewHolder juga akan merah. Kita resolve satu-persatu. Pertama adalah kita tekan alt+enter/klik tombol merah pada ListViewHolder dan pilih Create class 'ListViewHolder':
Kemudian pilih ListHeroAdapter untuk membuat kelas tersebut di dalam ListHeroAdapter.
Maka kode saat ini menjadi seperti ini:

• Java
• Kotlin

7.  public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

8.      public class ListViewHolder {

9.      }

10. }

Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih implement methods.
Kemudian pilih ketiga metode dari RecyclerView.Adapter.

Maka kode saat ini menjadi seperti ini:

• Java
• Kotlin

13. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

14.  

15.     @NonNull

16.     @Override

17.     public ListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

18.         return null;

19.     }

20.  

21.     @Override

22.     public void onBindViewHolder(@NonNull ListViewHolder listViewHolder, int i) {

23.  

24.     }

25.  

26.     @Override

27.     public int getItemCount() {

28.         return 0;

29.     }

30.  

31.     public class ListViewHolder {

32.     }

33. }

Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih Make ListViewHolder extend RecyclerView.ViewHolder.

Maka kode saat ini menjadi seperti ini:

• Java
• Kotlin

36. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

37.     ...

38.  

39.     public class ListViewHolder extends RecyclerView.ViewHolder {

40.     }

41. }

Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih Create constructor matching super.
Maka kode saat ini menjadi seperti ini:

• Java
• Kotlin

44. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

45.     ...

46.  

47.     class ListViewHolder extends RecyclerView.ViewHolder {

48.         public ListViewHolder(@NonNull View itemView) {

49.             super(itemView);

50.         }

51.     }

52. }

Kemudian isi ListViewHolder dengan kode berikut untuk inisialisasi view yang ada di dalam layout item:

• Java
• Kotlin

55. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

56.     ...

57.  

58.     class ListViewHolder extends RecyclerView.ViewHolder {

59.         ImageView imgPhoto;

60.         TextView tvName, tvDetail;

61.  

62.         ListViewHolder(View itemView) {

63.             super(itemView);

64.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

65.             tvName = itemView.findViewById(R.id.tv_item_name);

66.             tvDetail = itemView.findViewById(R.id.tv_item_detail);

67.         }

68.     }

69. }

Kemudian buatlah dan constructor untuk list seperti ini:

• Java
• Kotlin

72. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

73.     private ArrayList<Hero> listHero;

74.  

75.     public ListHeroAdapter(ArrayList<Hero> list) {

76.         this.listHero = list;

77.     }

78.  

79.     ...

80. }

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas ListHeroAdapter sebagai berikut:

• Java
• Kotlin

83. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

84.     private ArrayList<Hero> listHero;

85.  

86.     public ListHeroAdapter(ArrayList<Hero> list) {

87.         this.listHero = list;

88.     }

89.  

90.  

91.     @NonNull

92.     @Override

93.     public ListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

94.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_row_hero, viewGroup, false);

95.         return new ListViewHolder(view);

96.     }

97.  

98.     @Override

99.     public void onBindViewHolder(@NonNull final ListViewHolder holder, int position) {

100.             Hero hero = listHero.get(position);

101.             Glide.with(holder.itemView.getContext())

102.                     .load(hero.getPhoto())

103.                     .apply(new RequestOptions().override(55, 55))

104.                     .into(holder.imgPhoto);

105.             holder.tvName.setText(hero.getName());

106.             holder.tvDetail.setText(hero.getDetail());

107.         }

108.      

109.         @Override

110.         public int getItemCount() {

111.             return listHero.size();

112.         }

113.      

114.         class ListViewHolder extends RecyclerView.ViewHolder {

115.             ImageView imgPhoto;

116.             TextView tvName, tvDetail;

117.      

118.             ListViewHolder(View itemView) {

119.                 super(itemView);

120.                 imgPhoto = itemView.findViewById(R.id.img_item_photo);

121.                 tvName = itemView.findViewById(R.id.tv_item_name);

122.                 tvDetail = itemView.findViewById(R.id.tv_item_detail);

123.             }

124.         }

125.     }

 

8.    Kemudian kita modifikasi berkas kelas MainActivity kita inisiasikan RecyclerView yang sudah dibuat di activity_main.

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity {

3.      private RecyclerView rvHeroes;

4.   

5.      @Override

6.      protected void onCreate(Bundle savedInstanceState) {

7.          super.onCreate(savedInstanceState);

8.          setContentView(R.layout.activity_main);

9.   

10.         rvHeroes = findViewById(R.id.rv_heroes);

11.         rvHeroes.setHasFixedSize(true);

12.     }

13. }

 

9.    Selanjutnya setelah diinisiasikan, kita akan panggil data yang sudah kita buat di kelas HeroesData.

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity {

3.      private RecyclerView rvHeroes;

4.      private ArrayList<Hero> list = new ArrayList<>();

5.   

6.      @Override

7.      protected void onCreate(Bundle savedInstanceState) {

8.          super.onCreate(savedInstanceState);

9.          setContentView(R.layout.activity_main);

10.  

11.         rvHeroes = findViewById(R.id.rv_heroes);

12.         rvHeroes.setHasFixedSize(true);

13.  

14.         list.addAll(HeroesData.getListData());

15.         showRecyclerList();

16.     }

17.  

18.     private void showRecyclerList(){

19.         rvHeroes.setLayoutManager(new LinearLayoutManager(this));

20.         ListHeroAdapter listHeroAdapter = new ListHeroAdapter(list);

21.         rvHeroes.setAdapter(listHeroAdapter);

22.     }

23. }

 

10. Jalankan aplikasi yang dibuat. Hasilnya kurang lebih akan seperti gambar di bawah ini:

Sekarang mari kita buat sebuah RecyclerView dengan memanfaatkan fasilitas menu.

11. Langkah pertama adalah dengan membuat resource directory terkait. Resource directory menu secara bawaan tidak disediakan. Kita harus membuatnya terlebih dahulu.
Klik kanan pada direktori res → new → android resource directory. Setelah muncul dialog box seperti di bawah ini, isikan menu pada field directory name. Klik OK untuk menyelesaikannya.
Sebuah RecyclerView untuk menampilkan data Pahlawan Republik Indonesia sudah tercipta.

12. Kemudian, klik kanan pada direktori tersebut → new → menu resource file. Beri nama menu_main pada field file name.

Setelah itu, lengkapi kodenya menjadi seperti berikut:

0.  <?xml version="1.0" encoding="utf-8"?>

1.  <menu xmlns:android="http://schemas.android.com/apk/res/android"

2.      xmlns:app="http://schemas.android.com/apk/res-auto">

3.      <item

4.          android:id="@+id/action_list"

5.          android:title="List"

6.          app:showAsAction="never"/>

7.      <item

8.          android:id="@+id/action_grid"

9.          android:title="Grid"

10.         app:showAsAction="never"/>

11.     <item

12.         android:id="@+id/action_cardview"

13.         android:title="with CardView"

14.         app:showAsAction="never"/>

15. </menu>

Jangan lupa untuk memindahkan text ke strings.xml. Caranya alt+enter → Extract string resource.

Maka menu_main menjadi seperti berikut:

16. <?xml version="1.0" encoding="utf-8"?>

17. <menu xmlns:android="http://schemas.android.com/apk/res/android"

18.     xmlns:app="http://schemas.android.com/apk/res-auto">

19.     <item

20.         android:id="@+id/action_list"

21.         android:title="@string/list"

22.         app:showAsAction="never" />

23.     <item

24.         android:id="@+id/action_grid"

25.         android:title="@string/grid"

26.         app:showAsAction="never" />

27.     <item

28.         android:id="@+id/action_cardview"

29.         android:title="@string/with_cardview"

30.         app:showAsAction="never" />

31. </menu>

Dan pada bagian res → values → strings.xml, tambahkan juga string berikut:

32. <resources>

33.     <string name="app_name">My Application</string>

34.     <string name="heroes_name">Nama Pahlawan</string>

35.     <string name="detail">Detail</string>

36.     <string name="list">List</string>

37.     <string name="grid">Grid</string>

38.     <string name="with_cardview">with CardView</string>

39.     <string name="favorite">Favorite</string>

40.     <string name="share">Share</string>

41. </resources>

 

13. Setelah selesai, saatnya kita pasang menu tersebut di MainActivity dengan menambahkan metode berikut:

• Java
• Kotlin

2.  public class MainActivity extends AppCompatActivity {

3.      ...

4.   

5.      @Override

6.      public boolean onCreateOptionsMenu(Menu menu) {

7.          getMenuInflater().inflate(R.menu.menu_main, menu);

8.          return super.onCreateOptionsMenu(menu);

9.      }

10.  

11.     @Override

12.     public boolean onOptionsItemSelected(MenuItem item) {

13.         setMode(item.getItemId());

14.         return super.onOptionsItemSelected(item);

15.     }

16.  

17.     public void setMode(int selectedMode) {

18.         switch (selectedMode) {

19.             case R.id.action_list:

20.                 break;

21.  

22.             case R.id.action_grid:

23.                 break;

24.  

25.             case R.id.action_cardview:

26.                 break;

27.         }

28.     }

29. }

Untuk metode di atas, Anda bisa menggunakan Ctrl (tahan) + Spasi untuk menampilkan code assistant pada Android Studio.

Kode di kelas MainActivity akan berubah menjadi seperti ini:

• Java
• Kotlin

32. public class MainActivity extends AppCompatActivity {

33.     private RecyclerView rvHeroes;

34.     private ArrayList<Hero> list = new ArrayList<>();

35.  

36.     @Override

37.     protected void onCreate(Bundle savedInstanceState) {

38.         super.onCreate(savedInstanceState);

39.         setContentView(R.layout.activity_main);

40.  

41.         rvHeroes = findViewById(R.id.rv_heroes);

42.         rvHeroes.setHasFixedSize(true);

43.  

44.         list.addAll(HeroesData.getListData());

45.         showRecyclerList();

46.     }

47.  

48.     private void showRecyclerList(){

49.         rvHeroes.setLayoutManager(new LinearLayoutManager(this));

50.         ListHeroAdapter listHeroAdapter = new ListHeroAdapter(list);

51.         rvHeroes.setAdapter(listHeroAdapter);

52.     }

53.  

54.     @Override

55.     public boolean onCreateOptionsMenu(Menu menu) {

56.         getMenuInflater().inflate(R.menu.menu_main, menu);

57.         return super.onCreateOptionsMenu(menu);

58.     }

59.  

60.     @Override

61.     public boolean onOptionsItemSelected(MenuItem item) {

62.         setMode(item.getItemId());

63.         return super.onOptionsItemSelected(item);

64.     }

65.  

66.     public void setMode(int selectedMode) {

67.         switch (selectedMode) {

68.             case R.id.action_list:

69.                 break;

70.  

71.             case R.id.action_grid:

72.                 break;

73.  

74.             case R.id.action_cardview:

75.                 break;

76.         }

77.     }

78. }

Jalankan kembali aplikasi Anda. Tampilannya kurang lebih akan menjadi seperti gambar di bawah ini:

Codelab RecyclerView Mode Grid

Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar Pahlawan yang sedang kita buat. Mari kita lanjutkan pembuatan bentuk dari RecyclerView dalam bentuk grid.

1. Buat sebuah berkas layout xml baru dengan nama item_grid_hero.
   Setelah itu lengkapi kodenya menjadi seperti berikut :

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:tools="http://schemas.android.com/tools"

4.      android:layout_width="match_parent"

5.      android:layout_height="wrap_content"

6.      android:orientation="vertical">

7.   

8.      <ImageView

9.          android:id="@+id/img_item_photo"

10.         android:layout_width="match_parent"

11.         android:layout_height="250dp"

12.         android:layout_margin="1dp"

13.         android:scaleType="centerCrop"

14.         tools:src="@color/colorAccent" />

15. </LinearLayout>

 

2.    Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout xml tersebut. Buat sebuah kelas baru dengan nama GridHeroAdapter.
Kemudian kita lakukan hal yang sama dengan pembuatan ListHeroAdapter, lengkapi kodenya menjadi seperti berikut:

• Java
• Kotlin

3.  public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

4.  }

Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu merahnya. Setelah memperbaiki maka akan menjadi seperi ini:

• Java
• Kotlin

7.  public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

8.      @NonNull

9.      @Override

10.     public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

11.         return null;

12.     }

13.  

14.     @Override

15.     public void onBindViewHolder(@NonNull GridViewHolder gridViewHolder, int i) {

16.     }

17.  

18.     @Override

19.     public int getItemCount() {

20.         return 0;

21.     }

22.  

23.     public class GridViewHolder extends RecyclerView.ViewHolder {

24.         public GridViewHolder(@NonNull View itemView) {

25.             super(itemView);

26.         }

27.     }

28. }

Kemudian buatlah constructor untuk list seperti ini:

• Java
• Kotlin

31. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

32.     private ArrayList<Hero> listHero;

33.  

34.     public GridHeroAdapter(ArrayList<Hero> list) {

35.         this.listHero = list;

36.     }

37.  

38.     ...

39. } 

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas GridHeroAdapter sebagai berikut:

• Java
• Kotlin

42. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

43.     private ArrayList<Hero> listHero;

44.  

45.     public GridHeroAdapter(ArrayList<Hero> list) {

46.         this.listHero = list;

47.     }

48.  

49.     @NonNull

50.     @Override

51.     public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

52.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_grid_hero, viewGroup, false);

53.         return new GridViewHolder(view);

54.     }

55.  

56.     @Override

57.     public void onBindViewHolder(@NonNull final GridViewHolder holder, int position) {

58.         Glide.with(holder.itemView.getContext())

59.                 .load(listHero.get(position).getPhoto())

60.                 .apply(new RequestOptions().override(350, 550))

61.                 .into(holder.imgPhoto);

62.     }

63.  

64.     @Override

65.     public int getItemCount() {

66.         return listHero.size();

67.     }

68.  

69.     class GridViewHolder extends RecyclerView.ViewHolder {

70.         ImageView imgPhoto;

71.  

72.         GridViewHolder(View itemView) {

73.             super(itemView);

74.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

75.         }

76.     }

77. }

 

3.    Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu metode berikut:

• Java
• Kotlin

2.  private void showRecyclerGrid(){

3.      rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

4.      GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);

5.      rvHeroes.setAdapter(gridHeroAdapter);

6.  }

Dan lengkapi metode onOptionItemSelected() menjadi seperti berikut:

• Java
• Kotlin

9.  public void setMode(int selectedMode) {

10.     switch (selectedMode) {

11.         case R.id.action_list:

12.             showRecyclerList();

13.             break;

14.  

15.         case R.id.action_grid:

16.             showRecyclerGrid();

17.             break;

18.  

19.         case R.id.action_cardview:

20.  

21.             break;

22.     }

23. }

4.    Ini akan mengubah tampilan ketika pengguna memilih salah satu bentuk layout. Sekarang jalankan kembali aplikasinya. Akan ada dua bentuk dari RecyclerView yaitu list dan grid.

Codelab RecyclerView dengan CardView

Pada modul ini kita akan membuat bentuk RecyclerView dengan komponen CardView. Komponen ini akan menampilkan data selayaknya sebuah kartu. Pendekatan ini hanya diperuntukkan bila item list memiliki lebih dari satu action.

1. Pertama, buat kembali berkas layout xml item_cardview_hero.
   Setelah itu lengkapi kodenya menjadi seperti berikut:

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

3.      xmlns:card_view="http://schemas.android.com/apk/res-auto"

4.      xmlns:tools="http://schemas.android.com/tools"

5.      android:id="@+id/card_view"

6.      android:layout_width="match_parent"

7.      android:layout_height="wrap_content"

8.      android:layout_gravity="center"

9.      android:layout_marginLeft="8dp"

10.     android:layout_marginTop="4dp"

11.     android:layout_marginRight="8dp"

12.     android:layout_marginBottom="4dp"

13.     card_view:cardCornerRadius="4dp">

14.  

15.     <RelativeLayout

16.         android:layout_width="match_parent"

17.         android:layout_height="200dp"

18.         android:padding="8dp">

19.  

20.         <ImageView

21.             android:id="@+id/img_item_photo"

22.             android:layout_width="150dp"

23.             android:layout_height="220dp"

24.             android:layout_marginBottom="4dp"

25.             android:scaleType="centerCrop"

26.             tools:src="@color/colorAccent" />

27.  

28.         <TextView

29.             android:id="@+id/tv_item_name"

30.             android:layout_width="match_parent"

31.             android:layout_height="wrap_content"

32.             android:layout_marginLeft="16dp"

33.             android:layout_marginTop="16dp"

34.             android:layout_marginRight="16dp"

35.             android:layout_marginBottom="8dp"

36.             android:layout_toEndOf="@id/img_item_photo"

37.             android:layout_toRightOf="@id/img_item_photo"

38.             android:textSize="16sp"

39.             android:textStyle="bold"

40.             tools:text="@string/heroes_name" />

41.  

42.         <TextView

43.             android:id="@+id/tv_item_detail"

44.             android:layout_width="match_parent"

45.             android:layout_height="match_parent"

46.             android:layout_above="@+id/layout_button"

47.             android:layout_below="@id/tv_item_name"

48.             android:layout_marginLeft="16dp"

49.             android:layout_marginRight="16dp"

50.             android:layout_toEndOf="@id/img_item_photo"

51.             android:layout_toRightOf="@id/img_item_photo"

52.             android:ellipsize="end"

53.             android:maxLines="5"

54.             tools:text="@string/detail" />

55.  

56.         <LinearLayout

57.             android:id="@+id/layout_button"

58.             android:layout_width="match_parent"

59.             android:layout_height="wrap_content"

60.             android:layout_alignParentBottom="true"

61.             android:layout_marginStart="16dp"

62.             android:layout_marginLeft="16dp"

63.             android:layout_toEndOf="@id/img_item_photo"

64.             android:layout_toRightOf="@id/img_item_photo"

65.             android:orientation="horizontal">

66.  

67.             <Button

68.                 android:id="@+id/btn_set_favorite"

69.                 style="@style/Widget.AppCompat.Button.Colored"

70.                 android:layout_width="match_parent"

71.                 android:layout_height="wrap_content"

72.                 android:layout_weight="1"

73.                 android:text="@string/favorite"

74.                 android:textSize="12sp" />

75.  

76.             <Button

77.                 android:id="@+id/btn_set_share"

78.                 style="@style/Widget.AppCompat.Button.Colored"

79.                 android:layout_width="match_parent"

80.                 android:layout_height="wrap_content"

81.                 android:layout_weight="1"

82.                 android:text="@string/share"

83.                 android:textSize="12sp" />

84.         </LinearLayout>

85.     </RelativeLayout>

86. </androidx.cardview.widget.CardView>

2.    Setelah selesai, buat kembali kelas Adapter dengan nama CardViewHeroAdapter.
Kemudian kita lakukan hal yang sama dengan pembuatan LisHeroAdapter. Lengkapi kodenya menjadi seperti berikut:

• Java
• Kotlin

3.  public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

4.  }

Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu merahnya.  Setelah memperbaiki maka akan menjadi seperi ini:

• Java
• Kotlin

7.  public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

8.      @NonNull

9.      @Override

10.     public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

11.         return null;

12.     }

13.  

14.     @Override

15.     public void onBindViewHolder(@NonNull CardViewViewHolder cardViewViewHolder, int i) {

16.  

17.     }

18.  

19.     @Override

20.     public int getItemCount() {

21.         return 0;

22.     }

23.  

24.     public class CardViewViewHolder extends RecyclerView.ViewHolder {

25.         public CardViewViewHolder(@NonNull View itemView) {

26.             super(itemView);

27.         }

28.     }

29. }

Kemudian buatlah dan constructor untuk list seperti ini:

• Java
• Kotlin

32. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

33.     private ArrayList<Hero> listHero;

34.  

35.     public CardViewHeroAdapter(ArrayList<Hero> list) {

36.         this.listHero = list;

37.     }

38.  

39.     ...

40. }

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas CardViewHeroAdapter sebagai berikut:

• Java
• Kotlin

43. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder> {

44.     private ArrayList<Hero> listHero;

45.  

46.     public CardViewHeroAdapter(ArrayList<Hero> list) {

47.         this.listHero = list;

48.     }

49.  

50.     @NonNull

51.     @Override

52.     public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

53.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_cardview_hero, viewGroup, false);

54.         return new CardViewViewHolder(view);

55.     }

56.  

57.     @Override

58.     public void onBindViewHolder(@NonNull final CardViewViewHolder holder, int position) {

59.  

60.         Hero hero = listHero.get(position);

61.  

62.         Glide.with(holder.itemView.getContext())

63.                 .load(hero.getPhoto())

64.                 .apply(new RequestOptions().override(350, 550))

65.                 .into(holder.imgPhoto);

66.  

67.         holder.tvName.setText(hero.getName());

68.         holder.tvDetail.setText(hero.getDetail());

69.  

70.         holder.btnFavorite.setOnClickListener(new View.OnClickListener() {

71.             @Override

72.             public void onClick(View v) {

73.                 Toast.makeText(holder.itemView.getContext(), "Favorite " +

74.                         listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

75.  

76.             }

77.         });

78.  

79.         holder.btnShare.setOnClickListener(new View.OnClickListener() {

80.             @Override

81.             public void onClick(View v) {

82.                 Toast.makeText(holder.itemView.getContext(), "Share " +

83.                         listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

84.             }

85.         });

86.     }

87.  

88.     @Override

89.     public int getItemCount() {

90.         return listHero.size();

91.     }

92.  

93.     class CardViewViewHolder extends RecyclerView.ViewHolder {

94.         ImageView imgPhoto;

95.         TextView tvName, tvDetail;

96.         Button btnFavorite, btnShare;

97.  

98.         CardViewViewHolder(View itemView) {

99.             super(itemView);

100.                 imgPhoto = itemView.findViewById(R.id.img_item_photo);

101.                 tvName = itemView.findViewById(R.id.tv_item_name);

102.                 tvDetail = itemView.findViewById(R.id.tv_item_detail);

103.                 btnFavorite = itemView.findViewById(R.id.btn_set_favorite);

104.                 btnShare = itemView.findViewById(R.id.btn_set_share);

105.             }

106.         }

107.     }

 

3.    Setelah selesai, kita perlu menambahkan satu metode lagi untuk menampilkan bentuk RecyclerView ini. Caranya lengkapi kode pada MainActivity menjadi seperti berikut:

• Java
• Kotlin

2.  private void showRecyclerCardView(){

3.      rvHeroes.setLayoutManager(new LinearLayoutManager(this));

4.      CardViewHeroAdapter cardViewHeroAdapter = new CardViewHeroAdapter(list);

5.      rvHeroes.setAdapter(cardViewHeroAdapter);

6.  }

Dan update metode onOptionsItemSelected() menjadi seperti berikut:

• Java
• Kotlin

9.  public void setMode(int selectedMode) {

10.     switch (selectedMode) {

11.         case R.id.action_list:

12.             showRecyclerList();

13.             break;

14.  

15.         case R.id.action_grid:

16.             showRecyclerGrid();

17.             break;

18.  

19.         case R.id.action_cardview:

20.             showRecyclerCardView();

21.             break;

22.     }

23. }

 

4.    Jalankan kembali aplikasinya. Seharusnya Anda sudah bisa menampilkan tiga bentuk RecyclerView yang telah kita rencanakan sebelumnya.

5.    Untuk mempercantik tampilan dan memenuhi target di awal, kita akan menambah metode untuk mengubah judul halaman setiap melakukan perubahan bentuk dari RecyclerView.

• Java
• Kotlin

2.  private void setActionBarTitle(String title) {

3.      if (getSupportActionBar() != null) {

4.          getSupportActionBar().setTitle(title);

5.      }

6.  }

Kemudian tambahkan variable baru diatas metode onCreate() seperti berikut:

• Java
• Kotlin

9.  private String title = "Mode List";

Dan kita update kembali metode setMode sehingga menjadi seperti berikut:

• Java
• Kotlin

12. public void setMode(int selectedMode) {

13.     switch (selectedMode) {

14.         case R.id.action_list:

15.             title = "Mode List";

16.             showRecyclerList();

17.             break;

18.  

19.         case R.id.action_grid:

20.             title = "Mode Grid";

21.             showRecyclerGrid();

22.             break;

23.  

24.         case R.id.action_cardview:

25.             title = "Mode CardView";

26.             showRecyclerCardView();

27.             break;

28.     }

29.     setActionBarTitle(title);

30. }

Dan pada metode onCreate() tambahkan baris ini setActionBarTitle("Mode List"); sebelum kita memanggil metode showRecyclerList(); untuk mengganti title sejak pertama kali aplikasi dijalankan.

• Java
• Kotlin

33. @Override

34. protected void onCreate(Bundle savedInstanceState) {

35.     super.onCreate(savedInstanceState);

36.     setContentView(R.layout.activity_main);

37.     setActionBarTitle(title);

38.  

39.     ...

40. }

6.    Jalankan kembali aplikasinya. Sekarang judul halaman akan berubah seiring perubahan bentuk RecyclerView.

Codelab ItemOnClickListener

Listview memiliki listener untuk melakukan sebuah aksi ketika salah satu item pada list dipilih. Sementara itu, pada RecyclerView kita harus membuatnya secara manual.
Pada modul ini, kita akan mengupas bagaimana caranya menangani kejadian ketika salah satu item pada list di RecyclerView dipilih.

1.    Bukalah kelas CardViewHeroAdapter dan perhatikan kode berikut:

• Java
• Kotlin

3.          holder.btnFavorite.setOnClickListener(new View.OnClickListener() {

4.      @Override

5.      public void onClick(View v) {

6.          Toast.makeText(holder.itemView.getContext(), "Favorite " +

7.                  listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

8.   

9.      }

10. });

11.  

12. holder.btnShare.setOnClickListener(new View.OnClickListener() {

13.     @Override

14.     public void onClick(View v) {

15.         Toast.makeText(holder.itemView.getContext(), "Share " +

16.                 listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

17.     }

18. });

Jika diperhatikan, kode di atas digunakan untuk menambahkan onClick untuk btnFavorite dan btnShare.
Lalu bagaimana mengimplementasikan untuk item di dalam RecyclerView?
Tambahkan kode berikut di dalam CardViewHeroAdapter.

• Java
• Kotlin

21. holder.itemView.setOnClickListener(new View.OnClickListener() {

22.     @Override

23.     public void onClick(View v) {

24.         Toast.makeText(holder.itemView.getContext(), "Kamu memilih " + listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

25.     }

26. });

Jika diperhatikan kembali metode setOnClickListener berada di dalam kelas Adapter, bagaimana cara menerapkan agar bisa kita tangani di kelas Activity?

2.    Bukalah kelas ListHeroAdapter, tambahkan interface berikut dan implementasikan onClick ke kelas interface berikut:

• Java
• Kotlin

2.  public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

3.      ...

4.   

5.      private OnItemClickCallback onItemClickCallback;

6.   

7.      public void setOnItemClickCallback(OnItemClickCallback onItemClickCallback) {

8.          this.onItemClickCallback = onItemClickCallback;

9.      }

10.  

11.     ...

12.  

13.     @Override

14.     public void onBindViewHolder(@NonNull final ListViewHolder holder, int position) {

15.         ...

16.  

17.         holder.itemView.setOnClickListener(new View.OnClickListener() {

18.             @Override

19.             public void onClick(View v) {

20.                 onItemClickCallback.onItemClicked(listHero.get(holder.getAdapterPosition()));

21.             }

22.         });

23.     }

24.  

25.     ...

26.  

27.     public interface OnItemClickCallback {

28.         void onItemClicked(Hero data);

29.     }

30. }

Kemudian bukalah MainActivity dan tambahkan satu metode ini untuk menandakan item mana yang dipilih.

• Java
• Koltin

33. private void showSelectedHero(Hero hero) {

34.     Toast.makeText(this, "Kamu memilih " + hero.getName(), Toast.LENGTH_SHORT).show();

35. }

Kemudian tambahkan pada masing-masing metode di list seperti berikut:

• Java
• Kotlin

38. private void showRecyclerList() {

39.     rvHeroes.setLayoutManager(new LinearLayoutManager(this));

40.     ListHeroAdapter listHeroAdapter = new ListHeroAdapter(list);

41.     rvHeroes.setAdapter(listHeroAdapter);

42.  

43.     listHeroAdapter.setOnItemClickCallback(new ListHeroAdapter.OnItemClickCallback() {

44.         @Override

45.         public void onItemClicked(Hero data) {

46.             showSelectedHero(data);

47.         }

48.     });

49. }

Lakukan juga untuk metode grid!

3. Bukalah GridHeroAdapter tambahkan kode berikut di dalamnya:

• Java
• Kotlin

2.  public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

3.      ...

4.   

5.      private OnItemClickCallback onItemClickCallback;

6.   

7.      public void setOnItemClickCallback(OnItemClickCallback onItemClickCallback) {

8.          this.onItemClickCallback = onItemClickCallback;

9.      }

10.  

11.     ...

12.  

13.     @Override

14.     public void onBindViewHolder(@NonNull final GridViewHolder holder, int position) {

15.         ...

16.  

17.         holder.itemView.setOnClickListener(new View.OnClickListener() {

18.             @Override

19.             public void onClick(View v) {

20.                 onItemClickCallback.onItemClicked(listHero.get(holder.getAdapterPosition()));

21.             }

22.         });

23.     }

24.  

25.     ...

26.  

27.     public interface OnItemClickCallback {

28.         void onItemClicked(Hero data);

29.     }

30. }

Kemudian bukalah MainActivity dan tambahkanlah metode grid seperti berikut:

• Java
• Kotlin

33. private void showRecyclerGrid() {

34.     rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

35.     GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);

36.     rvHeroes.setAdapter(gridHeroAdapter);

37.  

38.     gridHeroAdapter.setOnItemClickCallback(new GridHeroAdapter.OnItemClickCallback() {

39.         @Override

40.         public void onItemClicked(Hero data) {

41.             showSelectedHero(data);

42.         }

43.     });

44. }

 

4.    Sekarang jalankan kembali aplikasinya. Klik salah satu item pada RecyclerView bentuk list dan grid. Seharusnya sebuah obyek Toast akan tampil ketika salah satu item ditekan.

 

Selesai! Sejauh ini Anda telah berhasil menerapkan beragam bentuk dari RecyclerView. Pendekatan ini sangat berguna karena ke depannya Anda akan berhadapan dengan koleksi data yang harus ditampilkan ke dalam bentuk list.

Bedah Kode

RecyclerView

Pendekatan umum dalam mengembangkan aplikasi mobile terletak pada bentuk list-to-detail. Pendekatan ini menampilkan sejumlah informasi dalam bentuk list. Ketika pengguna menekan salah satu item untuk mendapatkan detail informasi, maka aplikasi akan menampilkannya secara detail.

Pendekatan tersebut sangat lumrah dikarenakan keterbatasan ukuran layar. Keterbatasan ini justru memudahkan penggunaan dua jempol sebagai pointer untuk melakukan sebuah aksi pada aplikasi.

Android sendiri memiliki beberapa mekanisme menampilkan data dalam jumlah yang banyak, yaitu dalam bentuk ListView, GridView, maupun RecyclerView. Namun semenjak adanya material design, para developer dituntut untuk memahami suksesor dari komponen ListView ini.

Kelebihan utama dari RecyclerView terletak pada performa dan fleksibilitasnya.

Dari sisi performa, secara default adapter dari RecyclerView haruslah mengimplementasikan ViewHolder pattern. Tujuan dari pendekatan ini adalah agar RecyclerView tetap responsif dengan mempertahankan peforma terbaik ketika menampilkan koleksi data dalam jumlah yang banyak.
Ini jelas berbeda dengan ListView yang tidak mewajibkan pattern tersebut secara default. Pada salah satu contoh adapter yang kita tuliskan di atas, pattern ViewHolder diimplementasikan pada bagian berikut:

• Java
• Kotlin

1.  public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

2.      private ArrayList<Hero> listHero;

3.      private OnItemClickCallback onItemClickCallback;

4.   

5.      public void setOnItemClickCallback(OnItemClickCallback onItemClickCallback) {

6.          this.onItemClickCallback = onItemClickCallback;

7.      }

8.      public ListHeroAdapter(ArrayList<Hero> list) {

9.          this.listHero = list;

10.     }

11.  

12.     @NonNull

13.     @Override

14.     public ListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

15.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_row_hero, viewGroup, false);

16.         return new ListViewHolder(view);

17.     }

18.  

19.     @Override

20.     public void onBindViewHolder(@NonNull final ListViewHolder holder, int position) {

21.         Hero hero = listHero.get(position);

22.  

23.         Glide.with(holder.itemView.getContext())

24.                 .load(hero.getPhoto())

25.                 .apply(new RequestOptions().override(55, 55))

26.                 .into(holder.imgPhoto);

27.  

28.         holder.tvName.setText(hero.getName());

29.         holder.tvDetail.setText(hero.getDetail());

30.  

31.         holder.itemView.setOnClickListener(new View.OnClickListener() {

32.             @Override

33.             public void onClick(View v) {

34.                 onItemClickCallback.onItemClicked(listHero.get(holder.getAdapterPosition()));

35.             }

36.         });

37.     }

38.  

39.     @Override

40.     public int getItemCount() {

41.         return listHero.size();

42.     }

43.  

44.     class ListViewHolder extends RecyclerView.ViewHolder {

45.         ImageView imgPhoto;

46.         TextView tvName, tvFrom;

47.  

48.         ListViewHolder(View itemView) {

49.             super(itemView);

50.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

51.             tvName = itemView.findViewById(R.id.tv_item_name);

52.             tvDetail = itemView.findViewById(R.id.tv_item_detail);

53.         }

54.     }

55.  

56.     public interface OnItemClickCallback {

57.         void onItemClicked(Hero data);

58.     }

59. }

Setiap kali kita melakukan scroll pada RecyclerView, ia akan memeriksa memori apakah item view yang hendak ditampilkan tertentu sudah berada di memori  atau belum. Jika belum, maka akan dijalankan sebuah proses yang cukup mahal dari segi memori, yaitu dijalankannya onCreateViewHolder(). Di dalam metode ini, terjadi sebuah casting view (findViewById) yang akan menampilkan koleksi data dalam format tampilan yang ditentukan, baris per baris jika pada bentuk list atau baris dan kolom pada bentuk grid.

Hubungan antara satu adapter dengan ViewHolder adalah satu ke banyak. Artinya, satu kelas adapter bisa memiliki lebih dari satu ViewHolder.

• Java
• Kotlin

1.  rvHeroes.setHasFixedSize(true);

Baris di atas menjelaskan bahwa bila fixed size bernilai true, maka RecyclerView dapat melakukan optimasi ukuran lebar dan tinggi secara otomatis. Nilai lebar dan tinggi RecyclerView menjadi konstan. Terlebih jika kita memiliki koleksi data yang dinamis untuk proses penambahan, perpindahan, dan pengurangan item dari koleksi data.

Pada contoh kode di atas, kita menggunakan library bernama Glide untuk menampilkan foto secara asynchronous dari URL yang diberikan.

Pada sisi fleksibilitas, RecyclerView memiliki beragam bentuk yang disesuaikan dengan design yang diinginkan. Kita hanya perlu menentukan nilai pada metode setLayoutManager() saja untuk menentukan bagaimana RecyclerView ditampilkan.

• Java
• Kolin

1.  rvHeroes.setLayoutManager(new LinearLayoutManager(this));

atau

• Java
• Kotlin

1.  rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

Terakhir, untuk membuat kamu lebih paham tentang RecyclerView beberapa link di bawah ini wajib kamu baca :

• RecylerView
• Using the RecyclerView
• Fundamentals for ListView
• RecyclerView Animator
  
  

Glide

Perhatikan kode berikut:

• Java
• Kotlin

1.  Glide.with(holder.itemView.getContext())

2.      .load(listHero.get(position).getPhoto())

3.      .apply(new RequestOptions().override(55, 55))

4.      .into(holder.imgPhoto);

Glide digunakan untuk memuat sebuah gambar, baik yang sudah Anda siapkan di drawable maupun berada di server. Glide terdiri dari banyak fungsi:

1. with: digunakan untuk memasukkan context. 
2. load: digunakan untuk memasukkan sumber gambar, contohnya menggunakan url atau asset dari Drawable.
3. apply: digunakan untuk melakukan memanipulasi gambar, contohnya menggunakan RequestOption untuk me-override ukuran gambar.
4. into: digunakan untuk memasukkan imageView sebagai obyek penampil gambar.

Contohnya dari kode di atas, kita bisa modifikasi untuk menampilkan gambar profil maka jadi seperti ini:

• Java
• Kotlin

1.  Glide.with(holder.itemView.getContext())

2.      .load(R.drawable.my_profile)

3.      .apply(new RequestOptions().override(55, 55))

4.      .into(holder.imgPhoto);

 

Anda bisa baca referensi tentang Glide di tautan berikut:

• https://github.com/bumptech/glide
• https://bumptech.github.io/glide/
• https://medium.com/@multidots/glide-vs-picasso-930eed42b81d
  
  

Source code materi ini dapat Anda unduh di:

• Source Code MyRecyclerView(Java) 
• Source Code MyRecyclerView(Kotlin)