School of Information Systems

Android Pallete

Ketika kita ingin membuat UI dalam Android Studio, kita dapat memilih berbagai pilihan dalam palette tersebut. Dalam palette, kita dapat memilih dari Layout, Widgets, TextFields, Containers, dan lain-lain. Berikut adalah penjelasan singkat untuk beberapa pilihan dalam palette Android Studio:

  • Layout

Layout dapat mendifinisikan sebuah struktur untuk UI project kita. Semua element dalam tat letak dapat dibangun menggunakan object View dan ViewGroup. Sebuah View dapat menggambarkan sesuatu yang si pengguna dapat lihat dan interaksi dengan project. Untuk ViewGroup, ViewGroup dapat membuat penutup yang mendefinisikan struktur untuk View dan ViewGroup lainnya.

Berikut adalah sebuah ilustrasi dari developer.android.com untuk menggambarkan cara kerja View dan ViewGroup:

View memiliki beberapa subclass seperti Button dan TextView, sedangkan ViewGroup yang dapat dipanggil “layout”, dapat dibagi menjadi beberapa tipe bentuk layout seperti LinearLayout atau RelativeLayout. Kita dapat memanggil View tersebut melalui XML dalam project.

 

Mendeklarasikan UI Kita dalam XML memungkinkan Kita untuk memisahkan duisplay aplikasi Kita dari kode yang mengontrol perilakunya. Menggunakan file XML juga memudahkan untuk menyediakan tata letak yang berbeda untuk ukuran dan orientasi layar yang berbeda.

Contoh XML code untuk View

  • Text Fields

Text Fields memungkinkan pengguna mengetik teks ke dalam aplikasi kita. Selain mengetik, Text Fields memungkinkan berbagai aktivitas lain, seperti pemilihan teks (cut, copy, paste) dan pencarian data melalui Auto-Complete. Kita dapat mengimplementasikan Text Fields dengan mengetik dalam XML code kita.

Text Fields dapat memiliki beberapa tipe Input yang dapat dipilih seperti numbers, text, date, password, dll. Type menentukan jenis karakter yang diinginkan dalam field, dan dapat meminta Virtual Keyboard untuk mengoptimalkan layout untuk Input yang sering digunakan. Kita dapat menentukan jenis keyboard yang Kita inginkan untuk EditText dengan menggunakan attribute android:inputType. Berikut adalah contoh dari EditText menggunakan android:inputType :

  • Widgets

Widgets memungkinkan kita untuk berinteraksi dengan page-page Android Studio. Pengguna dapat memindahkan widget di seluruh panel layer page, dan, jika didukung, mengubah ukurannya untuk menyesuaikan jumlah informasi di dalam widget sesuai keinginan mereka. Widget dapat dibagi menjadi berbagai kategori:

    • Information Widgets
      Information Widgets biasanya menampilkan beberapa elemen informasi penting dan melacak bagaimana informasi itu berubah seiring waktu. Contoh yang bagus yaitu widget untuk mendisplay cuaca, jam, atau pelacak cardio.
    • Collection Widgets
      Collection Widgets mengkhususkan diri dalam menampilkan beberapa elemen dengan jenis yang sama, contohnya kumpulan gambar dari aplikasi galeri, kumpulan artikel dari aplikasi berita, atau kumpulan email/pesan dari aplikasi komunikasi.
    • Control Widgets
      Control widgets dapat digunakan untuk mendisplay functions, sehingga user dapat mentrigger fucntions tersebut di Home Screen tanpa memasuki appnya terelbih dahulu. Contoh untuk Control Widget ini yaitu seperti aplikasi smart home yang dapat menyalakan atau mematikan lampu secara remote.
    • Hybrid Widgets
      Mayoritas widget dalam Android Studio dapat melakukan functions atau elemen lebih dari 1 dan dapat mengabungkan tipe elemen berbeda mereka. Contohnya yaitu widget music player. Ketika kita ingin membuat Widget dalam project, kita harus terlebih dahulu menambahkan hal – hal berikut:

      • Object
        Object menjelaskan metadata untuk Widget yang akan digunakan dalam XML code.
      • Penerapan Class
        Menentukan metode dasar yang memungkinkan Kita berinteraksi secara ter program dengan widget aplikasi, berdasarkan broadcast. Melalui aplikasi ini, Kita akan menerima broadcast saat widget aplikasi update, diaktivasi, non aktif, dan ter delete.
      • Layout Tampilan
        Kita dapat menentukan tat letak tampilan melalui XML code.

 

Referensi:
https://medium.com/@uttam.cooch/introducing-android-common-palettes-9dd057c3f545
https://developer.android.com/guide/topics/ui/declaring-layout
https://stuff.mit.edu/afs/sipb/project/android/docs/guide/topics/ui/controls/text.html
https://developer.android.com/guide/topics/appwidgets/overview
https://developer.android.com/guide/topics/appwidgets?hl=id

Federico Linata Cahyadi, Ferdianto