KELOMPOK 2 PERTEMUAN 3 LAYOUT DESIGN ANGGOTA KELOMPOK

KELOMPOK 2 PERTEMUAN 3 LAYOUT DESIGN

ANGGOTA KELOMPOK 1. Rizky Crisna Wibowo (16. 11. 0034) 2. Novinda Nur. F (16. 11. 0035) 3. Fega Tri Subantara (16. 11. 0038) 4. Alfiansyah Arifudin. A (16. 11. 0049) 5. Nunik Dwi Hidayatun (16. 11. 0051) 6. Nurokta Fauzy Saputra (16. 11. 0052) 7. Fadhli Ardhiasalam (16. 11. 0053) 8. Mitra Yulianti (16. 11. 0054) 9. Ricci Dian Firmansyah (16. 11. 0067) 10. Muhammad Ali Hasani (16. 11. 0071) 11. Dimas Fuad. A (16. 11. 0075)

APA ITU LAYOUT DESIGN? Layout adalah suatu tampilan tata letak di android studio untuk mengatur penempatan text/gambar yang sudah terkonsep. Jadi ayout disini adalah bagian terpenting untuk memperindah tampilan pada aplikasi yang kita buat nyamman dilihat bagi pengguna Layout dibagi menjadi 2 yaitu: 1. Linier Layout Adalah design tampilan pada aplikasi kita dengan tata letak nsecara vertical dan horisontal dimana tata letak aplikasi hanya bsa memasukan media secara mendatar dan menurun 2. Relative Layout Design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai keinginan kita.

COMPONEN TYPES? 1. Label bidang teks menampilkan jenis masukan yang diperlukan suatu bidang. Setiap bidang teks harus memiliki label. Label sejajar dengan garis masukan dan selalu terlihat. Mereka dapat beristirahat (ketika lapangan tidak aktif dan kosong) atau mengambang. Input linebaris input menunjukkan di mana harus memasukkan teks, ditampilkan di bawah label. Saat suatu bidang aktif atau mengandung kesalahan, warna dan ketebalan garis bervariasi. Baris input menunjukkan Teks masukan dapat digunakan dengan pelengkapan otomatis untuk membantu pengguna yang memiliki keaksaraan terbatas atau yang menulis dalam bahasa asing. Misalnya, autocomplete dapat: Sarankan masukan saat diketik (saran yang menyegarkan dengan setiap keystroke), Isi bidang dengan teks input default , menekan tombol kembali menerima saran pelengkapan otomatis saat ini. 2. Placeholder text (Hint text) Teks placeholder terletak di bidang input sampai pengguna mulai memasukkan teks. Ini mungkin berisi tindakan atau contoh, seperti nomor telepon atau alamat email. 3. Helper text Teks pembantu memberikan konteks tentang masukan bidang, seperti bagaimana masukan akan digunakan. Ini harus terlihat baik secara terus-menerus atau hanya pada fokus.

Hyrarchy of screen elements? Menurut definisi pertama di dictionary. com, hierarki didefinisikan sebagai "sistem orang atau hal-hal peringkat satu di atas yang lain". Berdasarkan definisi itu, hirarki visual hanya akan menjadi sistem visual elemen peringkat, satu di atas yang lain - atau bagaimana elemen-elemen visual peringkat dan berhubungan satu sama lain. Beberapa elemen di halaman memiliki bobot visual yang lebih banyak daripada elemen lainnya, elemen ini menarik perhatian mata Anda dan menarik fokus pada mereka. Karena hierarki berarti "sistem hal-hal peringkat. . . " ini menunjukkan bahwa sistem elemen desain harus "peringkat" dalam urutan berat yang lebih berat untuk bobot yang lebih ringan yang mengisyaratkan bahwa desain hierarkis yang baik lebih dari sekadar hitam dan putih. Harus ada elemen lain yang berkembang dari satu ekstrem ke yang lain. Perkembangan visual ini dari berat ke cahaya, memandu pemirsa melalui desain dan jika dirancang dengan benar, Anda dapat memandu pemirsa tepat ke tempat yang Anda inginkan. Sayangnya, banyak aplikasi seluler baru tidak dirancang dengan hirarki visual. Meskipun aplikasi seluler (asli dan / atau berbasis browser) bereaksi berbeda dan terlihat berbeda dari aplikasi atau situs peramban penuh, masih perlu membuat desain yang teratur dan menarik secara visual untuk pengalaman pengguna yang nyaman dan menyenangkan. Tampaknya ada kurangnya dasar desain dalam aplikasi seluler saat ini, kemungkinan besar karena ukuran layar yang dibatasi. Namun prinsip desain dasar ini, seperti hierarki visual, masih sangat penting dan tidak boleh diabaikan.

Komponen Aplikasi? Komponen aplikasi adalah blok pembangun penting dari aplikasi Android. Setiap komponen merupakan titik berbeda yang digunakan sistem untuk memasuki aplikasi Anda. Tidak semua komponen merupakan titik masuk sebenarnya bagi pengguna dan sebagian saling bergantung, namun masing-masing komponen ada sebagai kesatuan sendiri dan memainkan peran tertentu—masing-masing merupakan blok pembangun unik yang mendefinisikan perilaku aplikasi secara keseluruhan. Komponen Aplikasi ada 4 tipe yaitu? 1. Aktivitas mewakili satu layar dengan satu antarmuka pengguna. Misalnya, aplikasi email mungkin memiliki satu aktivitas yang menampilkan daftar email baru, aktivitas lain untuk menulis email, dan aktivitas satunya lagi untuk membaca email. Walaupun semua aktivitas bekerja sama untuk membentuk pengalaman pengguna yang kohesif dalam aplikasi email, masing-masing tidak saling bergantung. Karenanya, aplikasi berbeda bisa memulai salah satu aktivitas ini (jika aplikasi email mengizinkannya). Misalnya, aplikasi kamera bisa memulai aktivitas dalam aplikasi email yang membuat email baru agar pengguna bisa berbagi gambar. Aktivitas diimplementasikan sebagai subkelas Activity 2. Layanan adalah komponen yang berjalan di latar belakang untuk melakukan operasi yang berjalan lama atau untuk melakukan pekerjaan bagi proses jauh. Layanan tidak menyediakan antarmuka pengguna. Misalnya, sebuah layanan bisa memutar musik di latar belakang sementara pengguna berada dalam aplikasi lain, atau layanan bisa menarik data lewat jaringan tanpa memblokir interaksi pengguna dengan aktivitas. Komponen lain, seperti aktivitas, bisa memulai layanan dan membiarkannya berjalan atau mengikat layanan untuk berinteraksi dengannya. Layanan diimplementasikan sebagai subkelas Service

3. Penyedia materi mengelola seperangkat data aplikasi bersama. Anda bisa menyimpan data dalam sistem file, database SQLite, di web, atau lokasi storage permanen lainnya yang bisa diakses aplikasi. Melalui penyedia materi, aplikasi lain bisa melakukan kueri atau bahkan memodifikasi data (jika penyedia materi mengizinkannya). Penyedia materi diimplementasikan sebagai subkelas Content. Provider dan harus mengimplementasikan seperangkat standar API yang memungkinkan aplikasi lain melakukan transaksi. 4. Penerima siaran adalah komponen yang merespons pengumuman siaran dalam lingkup sistem. Banyak siaran yang berasal dari sistem—misalnya, siaran yang mengumumkan bahwa layar telah dinonaktifkan, baterai lemah, atau gambar telah direkam. Aplikasi juga bisa memulai siaran—misalnya untuk menginformasikan ke aplikasi lain bahwa sebagian data telah diunduh ke perangkat dan bisa digunakan aplikasi lain tersebut. Penerima siaran diimplementasikan sebagai subkelas Broadcast. Receiver dan setiap siaran dikirim sebagai objek Intent.

service dan activity 1. Service adalah sebuah komponen aplikasi yang bisa melakukan operasi yang berjalan lama di latar belakang dan tidak menyediakan antarmuka pengguna. Komponen aplikasi lain bisa memulai layanan dan komponen aplikasi tersebut akan terus berjalan di latar belakang walaupun pengguna beralih ke aplikasi lain. Ada dua bentuk dasar layanan: • Dimulai Layanan "sudah dimulai" bila komponen aplikasi (misalnya aktivitas) memulainya dengan memanggil start. Service(). Sesudah dimulai, layanan bisa berjalan terus-menerus di latar belakang walaupun komponen yang memulainya telah dimusnahkan. Biasanya, layanan yang sudah dimulai akan melakukan operasi tunggal dan tidak mengembalikan hasil ke pemanggilnya. Misalnya, layanan bisa mengunduh atau mengunggah file melalui jaringan. Bila operasi selesai, layanan seharusnya berhenti sendiri. • Terikat Sebuah layanan akan "terikat" bila komponen aplikasi mengikatkan kepadanya dengan memanggil bind. Service(). Layanan terikat menawarkan antarmuka klien-server yang memungkinkan komponen berinteraksi dengan layanan tersebut, mengirim permintaan, mendapatkan hasil dan bahkan melakukannya pada sejumlah proses dengan komunikasi antarproses (IPC). Layanan terikat hanya berjalan selama ada komponen aplikasi lain yang terikat padanya. Sejumlah komponen bisa terikat pada layanan secara bersamaan, namun bila semuanya melepas ikatan, layanan tersebut akan dimusnahkan.

2. Activity adalah sebuah komponen aplikasi yang menyediakan layar yang digunakan pengguna untuk berinteraksi guna melakukan sesuatu, misalnya memilih nomor ponsel, mengambil foto, mengirim email, atau menampilkan peta. Tiap aktivitas diberi sebuah jendela untuk menggambar antarmuka penggunanya. Jendela ini biasanya mengisi layar, namun mungkin lebih kecil daripada layar dan mengambang di atas jendela lain Untuk membuat sebuah aktivitas, Anda harus membuat subkelas Activity (atau subkelasnya yang ada). Dalam subkelas itu, Anda perlu mengimplementasikan metode-metode callback yang dipanggil sistem saat aktivitas bertransisi di antara berbagai status daur hidupnya, misalnya saat aktivitas sedang dibuat, dihentikan, dilanjutkan, atau dimusnahkan. Dua metode callback terpenting adalah: • on. Create() Anda harus mengimplementasikan metode ini. Sistem memanggilnya saat membuat aktivitas Anda. Dalam implementasi, Anda harus melakukan inisialiasi komponen-komponen esensial aktivitas. Yang terpenting, inilah tempat Anda harus memanggil set. Content. View() untuk mendefinisikan layout untuk antarmuka pengguna aktivitas. • on. Pause() Sistem memanggil metode ini sebagai pertanda pertama bahwa pengguna sedang meninggalkan aktivitas Anda (walau itu tidak selalu berarti aktivitas sedang dimusnahkan). Inilah biasanya tempat Anda harus mengikat setiap perubahan yang harus dipertahankan selepas sesi pengguna saat ini (karena pengguna mungkin tidak kembali).

Package, project structure, manifest? 1. Package = mengelompokan beberapa file class actifity java pada aplikasi kalian. 2. Project Structure 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 file proyek Anda dalam tampilan proyek Android. Tampilan disusun berdasarkan modul untuk memberikan akses cepat ke file sumber utama proyek Anda. Semua file versi terlihat di bagian atas di bawah Gradle Scripts dan masing-masing modul aplikasi berisi folder berikut: – manifests: Berisi file Android. Manifest. xml. – java: Berisi file kode sumber Java, termasuk kode pengujian JUnit. – res: Berisi semua sumber daya bukan kode, seperti tata letak XML, string UI, dan gambar bitmap. Struktur proyek Android pada disk berbeda dari representasi rata ini. Untuk melihat struktur file sebenarnya dari proyek ini, pilih Project dari menu tarik turun Project (dalam gambar 1, struktur ditampilkan sebagai Android). 3. Manifest Yang dilakukan file manifes di antaranya: – Menamai paket Java untuk aplikasi. Nama paket berfungsi sebagai identifier unik untuk aplikasi. – Menjelaskan berbagai komponen aplikasi, yang menyertakan aktivitas, layanan, penerima siaran, dan penyedia materi yang membentuk aplikasi. Juga menamai kelas yang mengimplementasikan masing-masing komponen dan menerbitkan kemampuannya, seperti pesan Intent yang dapat mereka tangani. Deklarasi ini menginformasikan sistem Android mengenai komponen dan kondisi yang memungkinkan peluncurannya. – Menentukan proses yang menjadi host komponen aplikasi. – Mendeklarasikan izin aplikasi yang harus dimiliki aplikasi untuk mengakses bagian yang dilindungi pada API dan berinteraksi dengan aplikasi lain. Juga mendeklarasikan izin lain yang harus dimiliki untuk berinteraksi dengan komponen aplikasi. – Mencantumkan daftar kelas Instrumentation yang memberikan profil dan informasi lain saat aplikasi berjalan. Deklarasi ini hanya ada di manifes saat aplikasi dibuat dan dihapus

Struktur XML? Penjelasan : – Baris pertama merupakan deklarasi XML, Ini mendefinisikan versi XML (1. 0) dan pengkodean yang digunakan (ISO-8859 -1 = Latin-1/West European character set). – Baris berikutnya menggambarkan root element dari dokumen, seperti mengatakan, dokumen ini adalah tentang buku – Tiga baris berikutnya menggambarkan child element dari root (pengarang, judul, tahun) – Dan baris terakhir adalah penutup root Dari dokumen xml tersebut dapat digambarkan bahwa, buku tersebut dikarang oleh robert, judulnya mak lampir, dan diterbitkan tahun 1990. XML dokumen berbentuk struktur pohon (tree structure). Sebuah dokumen XML harus berisi element root, elemen ini merupakan parent dari element-element yang lain. Elemen dalam dokumen XML membentuk struktur pohon. Sebuah pohon dimulai dengan root dan memiliki cabang sampai level yang paling rendah. Semua elemen dapat mempunyai sub elemen(elemen child). Istilah parent, child, dan sibling yang digunakan untuk menggambarkan hubungan antar elemen. Elemen root memiliki children pada tingkat yang sama disebut sibling(saudara).

Mendesain Layout? Ada beberapa macam cara untuk membuat layout baru, bergantung pada tampilan jendela Project, namun prosedur berikut dapat diakses dari tampilan apa saja: – Di jendela Project, klik modul (misalnya app) yang ingin Anda tambahkan layout. – Di menu utama, pilih File > New > XML > Layout XML File. – Dalam dialog yang muncul, masukkan nama file, tag layout akar, dan set sumber yang memiliki layout tersebut. Kemudian klik Finish. 1. Membuat varian layout Jika Anda sudah memiliki layout dan ingin membuat versi alternatifnya untuk mengoptimalkan layout bagi orientasi atau ukuran layar yang berbeda, ikuti langkah ini: – Buka file layout asal dan pastikan Anda menampilkan editor Design (klik tab Design di bagian bawah jendela). – Klik Layout Variants di bilah alat. Dalam daftar tarik-turun, klik varian yang diusulkan misalnya Create Landscape Variant dan selesai, atau klik Create Other dan lanjutkan ke langkah berikutnya. – Dalam dialog yang muncul, Anda hanya perlu mendefinisikan qualifier sumber daya untuk nama direktori tersebut. Anda bisa mengetikkannya dalam Directory name atau pilih dari daftar Available qualifiers, satu per satu, dan klik Add. – Setelah Anda menambahkan semua qualifier, klik OK. – Bila Anda memiliki beberapa variasi layout yang sama, Anda bisa dengan mudah berpindah layout dari daftar yang muncul bila Anda mengeklik Layout Variants.

2. Mengonversikan layout ke Constraint. Layout adalah grup tampilan yang tersedia di pustaka Constraint Layout, yang telah disertakan bersama Android Studio 2. 2 dan yang lebih tinggi. Layout ini dibangun dari nol bersama Layout Editor, jadi apa saja dapat diakses dari Design editor dan Anda tidak perlu mengedit XML secara manual. Yang paling penting, sistem layout berbasis batasan ini memungkinkan Anda membangun hampir semua layout tanpa menyarangkan grup tampilan apa pun. Untuk meningkatkan kinerja layout, Anda harus mengonversi layout lama ke Constraint. Layout. Android Studio memiliki konverter bawaan untuk membantu Anda melakukan ini : – Buka layout yang ada di Android Studio dan klik tab Design di bagian bawah jendela editor. – Di jendela Component Tree, klik kanan layout kemudian klik Convert layout to Constraint. Layout. 3. Menambahkan Tampilan ke Layout Anda Membangun layout untuk aplikasi mengharuskan Anda memahami dasar-dasar layout, namun Android Studio menghilangkan kerumitan dalam mengerjakan langsung di file XML. Layout Editor membantu Anda menyelesaikan banyak pekerjaan dengan menyeret widget ke dalam editor Design dan memperbaiki atribut layout di jendela Properties. Untuk mulai membangun layout Anda, – seret saja tampilan dari panel Palette ke dalam editor Design. Saat Anda menempatkan sebuah tampilan di layout, editor akan menunjukkan hubungan tampilan itu dengan bagian layout selebihnya dengan cara semestinya menurut tipe layout di mana Anda menempatkannya. – Saat menyeret tampilan ke dalam layout selain Constraint. Layout, Layout Editor akan merespons berbeda, sesuai properti layout yang tersedia untuk layout itu. – Kesalahan yang terdeteksi di layout Anda akan dihitung di bilah alat. Untuk menampilkannya, klik Show Warnings and Errors. 4. Mengedit properti tampilan Sebagai ganti mengedit properti tampilan di XML, Anda bisa melakukannya dari jendela Properties (di sisi kanan Layout Editor). Jendela ini hanya tersedia bila editor Design terbuka, jadi pastikan Anda telah memilih tab Design di bagian bawah jendela. – Pilih tampilan di editor untuk melihat dan mengedit properti umum bagi tampilan itu. Jika Anda perlu mengakses properti lainnya untuk tampilan itu, klik View all properties. – Bila tampilan yang dipilih adalah anak dari Constraint. Layout, jendela Properties akan menyertakan pemeriksa tampilan di bagian atas sejumlah kontrol, seperti yang ditampilkan dalam gambar.

Pengenalan Widget View , Text View, Button 1. WIDGET Pada dasarnya widget memiliki fungsi sebagai antarmuka untuk berinteraksi dengan pengguna. Tujuannya yaitu untuk memberikan suatu proses pada aplikasi hasil dari aksi yang dilakukan pengguna seperti menekan tombol, memilih menu, dan sebagainya. Widget dalam android terdiri dari banyak jenis seperti Text. View, Edit. Text, Button, Radio. Button, dan sebagainya. Gambar dibawah ini merupakan komponen-komponen widget yang disediakan oleh android studio. 2. Text. View adalah satu widget yang berfungsi menampilkan dan mengkustomisasi sebuah text , baik itu kata atau kalimat , paragraf dll, yang digunakan untuk pengembangan Aplikasi Android. 3. Button Atau Tombol, juga salah satu komponen sebuah interface yang sudah biasa digunakan. Dengan sebuah Button pengguna dapat memerintahkan aplikasi untuk melakukan aksi yang telah ditentukan

Toast Pengertian Toast merupakan sebuah class yang digunakan untuk menampilkan pesan/peringatan pada Android dan muncul hanya sepersekian detik. Sering disebut juga sebagai notifikasi atau pemberitahuan yang berupa sebuah text singkat yang terlintas dan biasanya memiliki background warna hitam dan muncul hanya dalam beberapa detik saja dan biasanya juga muncu ketika pengguna telah melakukan sebuah aksi. Cara membuat TOAST : – Buat project/activity baru terlebih dahulu. – Beri event untuk menampilkan toastnya, disini menggunakan Button Click Listener untuk menampilkan toastnya. Penjelasan : – Toast = pemanggilan kelas Toast. – . make. Text() = method dari kelas Toast untuk membuat text dari Toast itu sendiri. – Main. Activity. this = Context yang saat ini digunakan. – "Toast Success" = teks yang akan ditampilkan di Toast. – Toast. LENGTH_SHORT = durasi penampilan Toast. – . show() = method untuk menampilkan Toastnya.

Cara lain membuat Toast Android Studio: – Untuk Toast sederhana seperti ini. Toast. make. Text(Main. Activity. this, "Ini Toast ", Toast. LENGTH_LONG). show(); – Ketika mengetikan kode diatas, pastikan juga kita mengimport android. widget. Toast (alt + Enter). – Maka akan muncul ini. Ada beberapa properti yang dapat diterapkan : – Toast. LENGTH_LONG : Durasi Toast agak lama – Toast. LENGTH_SHORT : Durasi Toast lebih cepat

Menjalankan Aplikasi di perangkat keras – Anda bisa menggunakan perangkat Android sebagai sebuah lingkungan untuk menjalankan, melakukan debug, dan menguji aplikasi. Alat yang disertakan dalam SDK memudahkan Anda untuk memasang dan menjalankan aplikasi pada perangkat setiap kali melakukan kompilasi. Anda bisa memasang aplikasi pada perangkat secara langsung dari Android Studio atau dari baris perintah dengan ADB. Jika Anda belum memiliki sebuah perangkat, tanyakan ke penyedia layanan di wilayah Anda untuk menentukan apa perangkat Android yang tersedia.

Mengaktifkan Opsi Pengembang Pada-Perangkat – Perangkat Android memiliki sejumlah opsi pengembang yang bisa Anda akses dari ponsel, yang memungkinkan Anda untuk: – Mengaktifkan debug melalui USB. – Dengan cepat merekam laporan bug ke perangkat. – Menampilkan penggunaan CPU di layar. – Mengambil informasi debug di layar seperti batas tata letak, pembaruan pada tampilan GPU dan perangkat keras, dan informasi lainnya. – Dan opsi yang lebih banyak lagi untuk menyimulasikan tekanan aplikasi atau mengaktifkan opsi debug.

Daftar Pustaka - https: //material. io/guidelines/components/text-fields. html#text-fields-layout - https: //tympanus. net/codrops/2012/06/11/visual-hierarchy-in-mobile-design/ - https: //developer. android. com/guide/components/fundamentals. html? hl=id#Components - https: //developer. android. com/guide/components/activities. html? hl=id#Creating - https: //developer. android. com/guide/components/services. html - https: //www. okedroid. com/2016/03/pengenalan-stuktur-folder-project-di-android-studio. html - https: //developer. android. com/guide/topics/manifest-intro. html? hl=id - https: //developer. android. com/studio/intro/index. html? hl=id - https: //fencode. blogspot. co. id/2016/02/cara-membuat-toast-android-studio. html

SEKIAN DAN TERIMAKASIH