Dalam pelajaran ini, Anda akan menggunakan Android Studio Layout Editor untuk membuat layout yang berisi sebuah kotak teks dan sebuah tombol. Pada pelajaran berikutnya, Anda akan membuat aplikasi tersebut merespons tap tombol dengan mengirim konten kotak teks ke activity lain.
Screenshot layout akhir Antarmuka pengguna untuk aplikasi Android dibuat menggunakan hierarki layout (objek ) dan widget (objek ). Layout adalah kontainer tak terlihat yang mengontrol bagaimana tampilan anak diposisikan pada layar. Widget adalah komponen UI seperti tombol dan kotak teks. Ilustrasi tentang cara objek ViewGroup membentuk cabang dalam layout dan memuat objek View.
Android menyediakan kosakata XML untuk kelas ViewGroup dan View, sehingga sebagian besar UI Anda didefinisikan dalam file XML. Namun, sebagai ganti mengajari Anda menulis beberapa XML, pelajaran ini menunjukkan kepada Anda cara membuat layout menggunakan Android Studio Layout Editor, yang memudahkan pembuatan layout dengan tampilan seret-dan-letakkan. Membuka Layout Editor Catatan: Pelajaran ini mengharapkan Anda untuk menggunakan dan telah mengikuti pelajaran sebelumnya untuk.
Untuk memulai, persiapkan ruang kerja Anda seperti berikut:. Di jendela Project Android Studio, buka app res layout activitymain.xml. Untuk memberi lebih banyak ruang bagi Layout Editor, sembunyikan jendela Project dengan memilih View Tool Windows Project (atau klik Project di sisi kiri Android Studio). Bila editor Anda menampilkan sumber XML, klik tab Design di bagian bawah jendela. Klik Select Design Surface dan pilih Blueprint.
Pengertian user interface: User interface adalah bagian yg paling penting dari sistem komputer manapun, kenapa? Karena ini adalah sistem pada kebanayakan user, ini dapat dilihat,dapat didengar, dan dapat disentuh. Berbaris-baris kode tidak akan terlihat,dan tersembunyi di balik layar, keyboards, dan mouse. Pengertian User Interface User interface adalah cara program dan user berkomunikasi. Istilah user interface atau interface kadang-kadang digunakan sebagai penggati istilah HCI (Human Computer Interaction). HCI (Human Computer Interface) adalah semua aspek dari interaksi pengguna dan computer, tidak hanya hardware.
Klik Show di toolbar dan pastikan Show Constraints telah dicentang. Pastikan Autoconnect tidak aktif. Tooltip pada toolbar akan tertulis Turn On Autoconnect (karena sekarang Autoconnect tidak aktif). Klik Default Margins di toolbar dan pilih 16 (Anda tetap bisa mengatur margin untuk setiap tampilan nanti). Klik Device in Editor di toolbar dan pilih Pixel XL. Editor Anda sekarang akan terlihat seperti yang ditunjukkan pada gambar 3.
Layout Editor menampilkan activitymain.xml Jendela Component Tree di sisi kiri bawah menunjukkan tampilan hierarki layout. Dalam kasus ini, tampilan root adalah ConstraintLayout, yang hanya berisi satu objek TextView.
ConstraintLayout adalah layout yang mendefinisikan posisi untuk setiap tampilan berdasarkan batas terhadap tampilan saudara dan layout induk. Dengan cara ini, Anda bisa membuat layout sederhana dan kompleks dengan hierarki tampilan datar. Artinya, ini menghindari perlunya layout tersarang (layout di dalam layout, seperti yang ditunjukkan pada gambar 2), yang bisa meningkatkan waktu yang dibutuhkan untuk menggambar UI.
Kotak teks dibatasi ke bagian atas dan kiri layout induk. Pertama-tama, Anda harus menghapus semua yang terdapat dalam layout.
Jadi klik TextView di jendela Component Tree, kemudian tekan Delete. Dari jendela Palette di sebelah kiri, klik Text di panel kiri, lalu seret Plain Text ke dalam editor desain dan letakkan di dekat bagian atas layout. Ini adalah widget yang menerima masukan teks biasa. Klik tampilan di editor desain. Anda sekarang bisa melihat tuas pengubah ukuran di setiap sudut (kotak), dan jangkar pembatas di setiap sisi (lingkaran). Untuk kontrol yang lebih baik, Anda mungkin perlu melakukan zoom in pada editor menggunakan tombol pada toolbar.
Klik-dan-tahan jangkar di sisi atas, lalu seret ke atas sampai terkunci ke bagian atas layout dan lepaskan. Itulah pembatas—ia menetapkan tampilan harus 16dp dari atas layout (karena Anda menyetel margin default ke 16dp). Demikian pula, buatlah pembatas dari sisi kiri tampilan ke sisi kiri layout. Hasilnya akan terlihat seperti screenshot di gambar 5. Menambahkan tombol. Tombol dibatasi ke sisi kanan kotak teks dan garis dasarnya.
Dari jendela Palette, klik Buttons di panel kiri, lalu seret Button ke dalam editor desain dan letakkan di dekat sisi kanan. Buat pembatas dari sisi kiri tombol ke sisi kanan kotak teks. Untuk membatasi tampilan dalam penjajaran horizontal, Anda perlu membuat pembatas antara garis dasar teks. Jadi klik tombolnya, lalu klik Edit Baseline, yang muncul di editor desain tepat di bawah tampilan yang dipilih. Jangkar garis dasar muncul di dalam tombol. Klik-dan-tahan jangkar ini lalu seret ke jangkar garis dasar yang muncul di kotak teks. Hasilnya akan terlihat seperti screenshot di gambar 6.
Catatan: Anda juga bisa membuat penjajaran horizontal dengan menggunakan tepi atas atau bawah, tetapi tombolnya memuat pengisi di sekitar gambarnya, sehingga penjajaran visual tidak akan akurat bila Anda menyejajarkan tampilan dengan cara ini. Mengubah string UI Untuk melihat pratinjau UI, klik Select Design Surface di toolbar dan pilih Design. Perhatikan bahwa masukan teks sudah terisi dengan 'Name' dan tombolnya diberi label 'Button.' Jadi sekarang Anda akan mengubah string ini.
Buka jendela Project lalu buka app res values strings.xml. Ini adalah file, di sini Anda harus menetapkan semua string UI Anda. Melakukan hal ini memungkinkan Anda untuk mengelola semua string UI di satu lokasi, yang mempermudah untuk menemukan, mengupdate, dan melakukan pelokalan (dibandingkan dengan string hard-coding dalam layout atau kode aplikasi).
Klik Open editor di bagian atas jendela editor. Ini akan membuka, yang menyediakan antarmuka sederhana untuk menambahkan dan mengedit string default Anda, serta membantu semua string terjemahan tetap teratur.
Dialog untuk menambahkan string baru Klik Add Key untuk membuat string baru sebagai 'hint text' untuk kotak teks. Masukkan 'editmessage' untuk nama kunci. Masukkan 'Enter a message' untuk nilainya. Tambahkan kunci lain bernama 'buttonsend' dengan nilai 'Send.' Sekarang Anda bisa menyetel string ini untuk setiap tampilan.
Jadi silakan kembali ke file layout dengan mengklik activitymain.xml di bilah tab, dan tambahkan string seperti berikut:. Klik kotak teks di layout dan, bila jendela Attributes belum terlihat di sebelah kanan, klik Attributes di sidebar kanan. Cari properti text (yang saat ini disetel ke 'Name') dan hapus nilainya. Cari properti hint lalu klik Pick a Resource di sebelah kanan kotak teks. Pada dialog yang muncul, klik dua kali editmessage dari daftar.
Sekarang klik tombol di layout, cari properti text, klik Pick a Resource, lalu pilih buttonsend. Membuat ukuran kotak teks yang fleksibel Untuk membuat layout yang responsif terhadap beragam ukuran layar, Anda sekarang akan merancang kotak teks agar bisa membentang untuk mengisi semua ruang horizontal yang ada (setelah memperhitungkan tombol dan margin).
Sebelum melanjutkan, klik Show di toolbar dan pilih Blueprint. Kotak teks sekarang membentang untuk mengisi ruang yang ada. Pilih kedua tampilan (klik satu tampilan, tahan Shift dan klik tampilan lain), lalu klik kanan salah satu tampilan dan pilih Chain Create Horizontal Chain. Adalah pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda untuk memasang tampilan yang diikat secara bersamaan.
Pilih tombol dan buka jendela Attributes. Dengan menggunakan pemeriksa tampilan di bagian atas jendela Attributes, atur margin kanan menjadi 16.
Sekarang klik kotak teks untuk melihat atributnya. Klik indikator lebar dua kali sehingga itu disetel ke Match Constraints, seperti yang ditunjukkan oleh keterangan 1 di gambar 9. 'Match constraints' berarti lebar akan meluas untuk memenuhi definisi batasan dan margin horisontal. Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal (setelah memperhitungkan tombol dan semua margin). Sekarang layout sudah selesai dan akan terlihat seperti gambar 10. Bila layout Anda tampaknya tidak berubah seperti yang diharapkan, klik di bawah ini untuk melihat seperti apa tampilan XML Anda yang seharusnya dan bandingkan dengan apa yang Anda lihat di tab Text. (Bila atribut Anda muncul dengan urutan berbeda, tidak apa-apa.) Lihat XML layout akhir Untuk informasi selengkapnya tentang rantai dan semua hal lain yang bisa Anda lakukan dengan ConstraintLayout, silakan baca.
Menjalankan aplikasi Bila aplikasi Anda sudah terinstal pada perangkat dari, cukup klik Apply Changes di toolbar untuk mengupdate aplikasi dengan layout baru. Atau klik Run untuk menginstal dan menjalankan aplikasi. Tombol ini tetap tidak melakukan apa pun. Untuk menjalankan activity lain saat tombol di-tap,.