Dasar-Dasar Android Kotlin 02.1: Tata letak linear menggunakan Layout Editor

Codelab ini adalah bagian dari kursus Dasar-Dasar Android Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan. Semua codelab kursus tercantum di halaman landing codelab Dasar-Dasar Android Kotlin.

Yang harus sudah Anda ketahui

• Membuat aplikasi Android dasar di Kotlin.
• Menjalankan aplikasi Android di emulator atau di perangkat.
• Dasar-dasar LinearLayout.
• Membuat aplikasi sederhana yang menggunakan LinearLayout dan TextView.

Yang akan Anda pelajari

• Cara menggunakan View dan ViewGroup.
• Cara mengatur tampilan di Activity, menggunakan LinearLayout.
• Cara menggunakan ScrollView untuk menampilkan konten yang dapat di-scroll.
• Cara mengubah visibilitas View.
• Cara membuat dan menggunakan resource string dan dimensi.
• Cara membuat tata letak linier menggunakan Layout Editor Android Studio.

Yang akan Anda lakukan

• Buat aplikasi AboutMe.
• Tambahkan TextView ke tata letak untuk menampilkan nama Anda.
• Menambahkan ImageView.
• Tambahkan ScrollView untuk menampilkan teks yang dapat di-scroll.

Di aplikasi AboutMe, Anda dapat menampilkan fakta menarik tentang diri Anda, atau menyesuaikan aplikasi untuk teman, anggota keluarga, atau hewan peliharaan. Aplikasi ini menampilkan nama, tombol SELESAI, gambar bintang, dan beberapa teks yang dapat di-scroll.

Dalam tugas ini, Anda akan membuat project Android Studio AboutMe.

1. Buka Android Studio, jika belum terbuka.
2. Jika project sudah terbuka di Android Studio, pilih File > New > New Project.
   
   
   
3. Jika project belum terbuka, pilih + Start a new Android Studio project dalam dialog Welcome to Android Studio.
   
   
   
4. Dalam dialog Create New Project, di tab Phone and Tablet, pilih template Empty Activity. Klik Berikutnya.
   
   
   
5. Pada dialog Create New Project berikutnya, tetapkan parameter berikut, lalu klik Finish.
   

Atribut	Nilai
Nama Aplikasi	AboutMe
Nama Perusahaan Android	com.android.example.AboutMe (atau domain Anda sendiri)
Simpan lokasi	Biarkan lokasi default, atau ubah ke direktori pilihan Anda.
Language	Kotlin
Level API minimum	API 19: Android 4.4 (KitKat)
Project ini akan mendukung aplikasi instan	Biarkan kotak centang ini tidak dicentang.
Menggunakan artefak AndroidX	Centang kotak ini.

Android Studio akan memerlukan waktu beberapa saat untuk membuat file project.

6. Jalankan aplikasi Anda. Anda akan melihat string "Hello World" di layar kosong.
   

Template Empty Activity membuat satu aktivitas kosong, Mainactivity.kt. Template ini juga membuat file tata letak bernama activity_main.xml. File tata letak memiliki ConstraintLayout sebagai ViewGroup root-nya, dan memiliki satu TextView sebagai kontennya.

Dalam tugas ini, Anda akan mengubah ViewGroup root yang dihasilkan menjadi LinearLayout. Anda juga mengatur elemen UI secara vertikal.

Lihat grup

ViewGroup adalah tampilan yang dapat berisi tampilan turunan, yang merupakan tampilan dan kelompok tampilan lain. Tampilan yang membentuk tata letak disusun sebagai hierarki tampilan dengan kelompok tampilan sebagai root.

Dalam kelompok tampilan LinearLayout, elemen UI disusun secara horizontal atau vertikal.

Ubah tata letak root sehingga menggunakan kelompok tampilan LinearLayout:

1. Pilih panel Project > Android. Di folder app/res/layout , buka file activity_main.xml.
2. Pilih tab Text dan ubah grup tampilan root dari ConstraintLayout menjadi LinearLayout.
3. Hapus TextView. Dalam elemen LinearLayout, tambahkan atribut android:orientation dan tetapkan ke vertical.

Sebelum:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Sesudah:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Layout Editor adalah alat desain visual di dalam Android Studio. Daripada menulis kode XML secara manual untuk membuat tata letak aplikasi, Anda dapat menggunakan Layout Editor untuk menarik elemen UI ke editor desain.

Untuk melihat Layout Editor, klik tab Design. Screenshot di bawah menunjukkan bagian-bagian Layout Editor.

Design editor: Menampilkan representasi visual tata letak layar Anda dalam tampilan desain, tampilan cetak biru, atau keduanya. Editor desain adalah bagian utama Editor Tata Letak.

Toolbar: Menyediakan tombol untuk mengonfigurasi tampilan tata letak Anda di editor desain, dan untuk mengubah beberapa atribut tata letak. Misalnya, untuk mengubah tampilan tata letak di editor desain, gunakan menu drop-down Pilih Permukaan Desain :

• Gunakan Desain untuk pratinjau tata letak Anda yang sebenarnya.
• Gunakan Blueprint untuk melihat hanya kerangka untuk setiap tampilan.
• Gunakan Design + Blueprint untuk melihat kedua tampilan secara berdampingan.

Palette: Menyediakan daftar tampilan dan grup tampilan yang dapat Anda tarik ke dalam tata letak atau ke panel Component Tree.

Attributes: Menampilkan atribut untuk tampilan atau grup tampilan yang saat ini dipilih. Untuk beralih antara daftar lengkap atribut dan atribut yang umum digunakan, gunakan ikon di bagian atas panel.

Component Tree: Menampilkan hierarki tata letak sebagai hierarki tampilan. Component Tree berguna saat Anda memiliki tampilan kecil, tersembunyi, atau tumpang-tindih yang tidak dapat Anda pilih di editor desain.

Langkah 1: Tambahkan TextView

1. Buka file res/layout/activity_main.xml, jika belum terbuka.
2. Beralih ke tab Text dan periksa kode. Kode memiliki LinearLayout sebagai grup tampilan root-nya. (Grup tampilan adalah tampilan yang berisi tampilan lain.)
   
   LinearLayout memiliki atribut yang diperlukan layout_height, layout_width, dan orientation, yang secara default adalah vertical.
3. Beralih ke tab Design untuk membuka Layout Editor.

Catatan: Tab Desain dan tab Teks menampilkan tata letak yang sama, hanya dengan cara yang berbeda. Perubahan yang Anda buat di satu tab akan ditampilkan di tab lainnya.

4. Tarik tampilan teks dari panel Palette ke editor desain.
   
   
   
5. Perhatikan panel Component Tree. Tampilan teks baru ditempatkan sebagai elemen turunan dari kelompok tampilan induk, yaitu LinearLayout.
   
   
6. Buka panel Attributes, jika belum terbuka. (Untuk membuka panel, klik dua kali TextView yang baru ditambahkan di editor desain.)
7. Tetapkan atribut berikut di panel Attributes:

Atribut	Nilai
ID	name_text
teks	Setel ke nama Anda. (Salah satu kolom text menampilkan ikon kunci pas untuk menunjukkan bahwa kolom tersebut ditujukan untuk namespace tools. Yang tanpa kunci pas adalah untuk namespace android—ini adalah kolom text yang Anda inginkan.)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Tengah

Langkah 2: Buat resource string

Di Component Tree, di sebelah TextView,, Anda akan melihat ikon peringatan . Untuk melihat teks peringatan, klik atau arahkan kursor ke ikon, seperti yang ditunjukkan pada screenshot di bawah.

Untuk mengatasi peringatan, buat resource string:

1. Di panel Atribut, klik tiga titik di samping atribut teks yang Anda tetapkan ke nama Anda. Editor resource akan terbuka.
   
   
   
2. Di dialog Resources, pilih Add new resource > New string Value.
3. Pada dialog New String Value Resource, tetapkan kolom Resource name ke name. Tetapkan kolom Nilai resource ke nama Anda sendiri. Klik Oke. Perhatikan bahwa peringatan telah hilang.
   
   
   
4. Buka file res/values/strings.xml dan cari resource string yang baru dibuat bernama name.

<string name="name">Aleks Haecky</string>

Langkah 3: Buat resource dimensi

Anda baru saja menambahkan resource menggunakan editor resource. Anda juga dapat mengekstrak resource di editor kode XML untuk membuat resource baru:

1. Di file activity_main.xml, beralihlah ke tab Teks.
2. Pada baris textSize, klik nomor (20sp) dan ketik Alt+Enter (Option+Enter di Mac). Pilih Ekstrak resource dimensi dari menu pop-up.
3. Pada dialog Extract Resource, masukkan text_size di kolom Resource name. Klik Oke.
   
   
   
4. Buka file res/values/dimens.xml untuk melihat kode berikut yang dihasilkan:

<dimen name="text_size">20sp</dimen>

Catatan: Jika file dimens.xml belum ada di dalam folder res/values, Android Studio akan membuatnya.

5. Buka file MainActivity.kt, dan cari kode berikut di akhir fungsi onCreate():

setContentView(R.layout.activity_main)

Fungsi setContentView() menghubungkan file tata letak dengan Activity. File resource tata letak yang ditentukan adalah R.layout.activity_main:

• R adalah referensi ke resource. Class ini dibuat secara otomatis dengan definisi untuk semua resource di aplikasi Anda.
• layout.activity_main menunjukkan bahwa resource adalah tata letak bernama activity_main.

6. Jalankan aplikasi Anda. TextView dengan nama Anda akan ditampilkan.
   
   

Saat Anda melihat layar aplikasi, nama Anda akan didorong ke bagian atas layar, jadi sekarang Anda menambahkan padding dan margin.

Padding versus margin

Padding adalah ruang di dalam batas tampilan atau elemen. Padding adalah ruang antara tepi tampilan dan konten tampilan, seperti yang ditunjukkan pada gambar di bawah.

Ukuran tampilan mencakup padding-nya. Berikut adalah atribut padding yang umum digunakan:

• android:padding menentukan padding untuk keempat tepi tampilan.
• android:paddingTop menentukan padding untuk tepi atas.
• android:paddingBottom menentukan padding untuk tepi bawah.
• android:paddingStart menentukan padding untuk tepi "awal" tampilan.
• android:paddingEnd menentukan padding untuk tepi "akhir" tampilan.
• android:paddingLeft menentukan padding untuk tepi kiri.
• android:paddingRight menentukan padding untuk tepi kanan.

Margin adalah ruang yang ditambahkan di luar batas tampilan. Ini adalah ruang dari tepi tampilan ke induknya, seperti yang ditunjukkan pada gambar di atas. Berikut adalah atribut margin yang umum digunakan:

• android:layout_margin menentukan margin untuk keempat sisi tampilan.
• android:layout_marginBottom menentukan ruang di luar sisi bawah tampilan ini.
• android:layout_marginStart menentukan ruang di luar sisi "awal" tampilan ini.
• android:layout_marginEnd menentukan ruang di sisi akhir tampilan ini.
• android:layout_marginLeft menentukan ruang di sisi kiri tampilan ini.
• android:layout_marginRight menentukan ruang di sisi kanan tampilan ini.

Kanan/kiri versus awal/akhir

"Kanan" dan "kiri" selalu merujuk ke sisi kanan dan kiri layar, baik aplikasi Anda menggunakan alur kiri-ke-kanan (LTR) atau alur kanan-ke-kiri (RTL). "Mulai" dan "akhir" selalu merujuk pada awal dan akhir alur:

• Untuk alur LTR, start = kiri dan end=kanan.
• Untuk alur RTL, start=right dan end=left.

Jika aplikasi Anda menargetkan level API 17 (Android 4.2) atau yang lebih tinggi:

• Gunakan "start" dan "end", bukan "left" dan "right".
• Misalnya, android:layout_marginLeft harus menjadi android:layout_marginStart untuk mendukung bahasa RTL.

Jika Anda ingin aplikasi Anda berfungsi dengan versi yang lebih rendah dari Android 4.2; yaitu, jika targetSdkVersion atau minSdkVersion aplikasi adalah 16 atau lebih rendah:

• Tambahkan "start" dan "end" selain "left" dan "right".
• Misalnya, gunakan android:paddingLeft dan android:paddingStart.

Langkah 1: Tambahkan padding

Untuk memberi ruang antara nama Anda dan tepi atas tampilan teks name, tambahkan padding atas.

1. Buka file activity_main.xml di tab Design.
2. Di Component Tree atau di editor desain, klik tampilan teks untuk membuka panel Attributes-nya.
3. Di bagian atas panel Atribut, klik ikon panah ganda untuk melihat semua atribut yang tersedia.
4. Telusuri Padding, luaskan, lalu klik tiga titik ... di samping atribut atas. Dialog Resources akan muncul.
5. Di dialog Resources, pilih Add new resource > New dimen Value.
6. Dalam dialog New Dimension Value Resource, buat resource dimen baru bernama small_padding dengan nilai 8dp.
   
   Singkatan dp adalah density-independent. Jika Anda ingin elemen UI terlihat berukuran sama pada layar dengan kepadatan berbeda, gunakan dp sebagai unit pengukuran Anda. Namun, saat menentukan ukuran teks, selalu gunakan sp (piksel skalabel).
7. Klik Oke.

Langkah 2: Tambahkan margin

Untuk memindahkan tampilan teks name dari tepi elemen induk, tambahkan margin atas.

1. Di panel Attributes, telusuri "margin" untuk menemukan Layout_Margin.
2. Perluas Layout_Margin, lalu klik tiga titik ... di samping atribut top.
3. Buat resource dimen baru bernama layout_margin dan jadikan 16dp. Klik OK.

Langkah 3: Tambahkan font

Untuk membuat tampilan teks name terlihat lebih baik, gunakan font Roboto Android. Font ini adalah bagian dari support library, dan Anda menambahkan font sebagai resource.

1. Di panel Attributes, telusuri "fontFamily".
2. Di kolom fontFamily, klik panah drop-down, scroll ke bagian bawah daftar, lalu pilih More Fonts.
3. Pada dialog Resources, telusuri rob, lalu pilih Roboto. Di daftar Pratinjau, pilih Reguler.
4. Pilih tombol pilihan Add font to project.
5. Klik Oke.
   
   

Folder res kini memiliki folder font yang berisi file font roboto.ttf. Atribut @font/roboto ditambahkan ke TextView Anda.

Langkah 4: Ekstrak gaya

Gaya adalah kumpulan atribut yang menentukan tampilan dan format untuk tampilan. Gaya dapat mencakup warna font, ukuran font, warna latar belakang, padding, margin, dan atribut umum lainnya.

Anda dapat mengekstrak format tampilan teks name ke dalam gaya dan menggunakan kembali gaya tersebut untuk sejumlah tampilan di aplikasi Anda. Penggunaan kembali gaya akan memberikan tampilan yang konsisten pada aplikasi Anda saat Anda memiliki beberapa tampilan. Dengan menggunakan gaya, Anda juga dapat menyimpan atribut umum ini di satu lokasi.

1. Klik kanan TextView di Pohon Komponen, lalu pilih Refactor > Extract Style.
2. Dalam dialog Extract Android Style, hapus centang pada kotak layout_width, layout_height, dan textAlignment. Atribut ini biasanya berbeda untuk setiap tampilan, jadi Anda tidak ingin atribut tersebut menjadi bagian dari gaya.
3. Di kolom Nama gaya, masukkan NameStyle.
4. Klik Oke.
   
   
   
5. Gaya juga merupakan resource, sehingga gaya disimpan di folder res/values/ dalam file styles.xml. Buka styles.xml dan periksa kode yang dihasilkan untuk gaya NameStyle, yang akan terlihat mirip dengan ini:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. Buka activity_main.xml dan beralih ke tab Text. Perhatikan bahwa gaya yang dihasilkan digunakan dalam tampilan teks sebagai style="@style/NameStyle".
7. Jalankan aplikasi dan perhatikan perubahan pada font dan padding di sekitar TextView.

Sebagian besar aplikasi Android di dunia nyata terdiri dari kombinasi tampilan untuk menampilkan gambar, menampilkan teks, dan menerima input dari pengguna dalam bentuk teks atau peristiwa klik. Dalam tugas ini, Anda akan menambahkan tampilan untuk menampilkan gambar.

ImageView adalah tampilan untuk menampilkan resource gambar. Misalnya, ImageView dapat menampilkan resource Bitmap seperti file PNG, JPG, GIF, atau WebP, atau dapat menampilkan resource Drawable seperti gambar vektor.

Ada resource gambar yang disertakan dengan Android, seperti ikon, avatar, dan latar belakang contoh. Anda akan menambahkan salah satu resource ini ke aplikasi Anda.

1. Tampilkan file tata letak Di tab Design, lalu tarik ImageView dari panel Palette ke bawah name_text di Component Tree. Dialog Resources akan terbuka.
2. Pilih Drawable jika belum dipilih.
3. Luaskan android, scroll, lalu pilih btn_star_big_on. Bintang kuning .
4. Klik Oke.
   
   
   
   Gambar bintang ditambahkan ke tata letak di bawah nama Anda. Karena Anda memiliki LinearLayout vertikal, tampilan yang Anda tambahkan akan disejajarkan secara vertikal.
   
   
5. Beralih ke tab Text dan lihat kode ImageView yang dihasilkan. Lebar ditetapkan ke match_parent, sehingga tampilan akan selebar elemen induknya. Tingginya ditetapkan ke wrap_content, sehingga tampilan akan setinggi kontennya. ImageView mereferensikan drawable btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Untuk mengganti nama id dari ImageView, klik kanan "@+id/imageView", lalu pilih Refactor > Rename.
7. Dalam dialog Rename, tetapkan id ke @+id/star_image. Klik Refactor.
   
   
   

Tips: Refactor > Rename mengganti nama semua kemunculan nama atribut atau variabel dalam project aplikasi Anda.

8. Di tab Design, di Component Tree, klik ikon peringatan di samping star_image. Peringatan ini muncul karena tidak ada contentDescription, yang digunakan oleh pembaca layar untuk mendeskripsikan gambar kepada pengguna.
9. Di panel Attributes, klik tiga titik ... di samping atribut contentDescription. Dialog Resources akan terbuka.
10. Di dialog Resources, pilih Add new resource > New string Value. Tetapkan kolom Nama resource ke yellow_star, dan tetapkan kolom Nilai resource ke Yellow star. Klik Oke.
11. Gunakan panel Attributes untuk menambahkan margin atas 16dp (yaitu @dimen/layout_margin) ke yellow_star, untuk memisahkan gambar bintang dari nama.
12. Jalankan aplikasi Anda. Nama Anda dan gambar bintang akan ditampilkan di UI aplikasi Anda.
    
    

ScrollView adalah grup tampilan yang memungkinkan hierarki tampilan ditempatkan di dalamnya untuk di-scroll. Scroll view hanya dapat berisi satu tampilan lain, atau kelompok tampilan, sebagai turunan. Child view biasanya berupa LinearLayout. Di dalam LinearLayout, Anda dapat menambahkan tampilan lain.

Gambar berikut menunjukkan contoh ScrollView yang berisi LinearLayout yang berisi beberapa tampilan lainnya.

Dalam tugas ini, Anda akan menambahkan ScrollView yang memungkinkan pengguna men-scroll tampilan teks yang menampilkan biografi singkat. Jika hanya membuat satu tampilan dapat di-scroll, Anda dapat menempatkan tampilan langsung ke ScrollView, seperti yang Anda lakukan dalam tugas ini.

Langkah 1: Tambahkan ScrollView yang berisi TextView

1. Buka file activity_main.xml di tab Design.
2. Tarik tampilan scroll ke tata letak dengan menariknya ke editor desain, atau ke Component Tree. Letakkan tampilan scroll di bawah gambar bintang.
3. Beralih ke tab Text untuk memeriksa kode yang dihasilkan.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

Tinggi dan lebar ScrollView cocok dengan elemen induk. Setelah tampilan teks name_text dan tampilan gambar star_image menggunakan ruang vertikal yang cukup untuk menampilkan kontennya, sistem Android akan menata letak ScrollView untuk mengisi ruang yang tersedia di layar.

4. Tambahkan id ke ScrollView dan panggil bio_scroll. Menambahkan id ke ScrollView memberi sistem Android handle untuk tampilan sehingga saat pengguna memutar perangkat, sistem mempertahankan posisi scroll.
5. Di dalam ScrollView, hapus kode LinearLayout, karena aplikasi Anda hanya akan memiliki satu tampilan yang dapat di-scroll—TextView.
6. Tarik TextView dari Palette ke Component Tree. Letakkan TextView di bawah bio_scroll, sebagai elemen turunan bio_scroll.
   
   
7. Tetapkan id tampilan teks baru ke bio_text.
8. Selanjutnya, Anda menambahkan gaya untuk tampilan teks baru. Di panel Attributes, klik tiga titik ... di samping atribut style untuk membuka dialog Resources.
9. Dalam dialog Resources, telusuri NameStyle. Pilih NameStyle dari daftar, lalu klik OK. Tampilan teks kini menggunakan gaya NameStyle, yang Anda buat di tugas sebelumnya.
   
   

Langkah 2: Tambahkan biografi Anda ke TextView baru

1. Buka strings.xml, buat resource string bernama bio, dan masukkan beberapa teks panjang tentang diri Anda, atau tentang apa pun yang Anda inginkan.
   

Catatan:

• Gunakan \n untuk menunjukkan jeda baris.
• Jika Anda menggunakan apostrof, Anda harus meng-escape-nya dengan garis miring terbalik. Misalnya:
  "You mustn\'t forget the backslash."
• Untuk teks tebal, gunakan <b>...</b>, dan untuk teks miring, gunakan <i>...</i>. Contoh:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Berikut contoh biografi:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. Di tampilan teks bio_text, setel nilai atribut text ke resource string bio yang berisi biografi Anda.
3. Agar teks bio_text lebih mudah dibaca, tambahkan spasi antarbaris. Gunakan atribut lineSpacingMultiplier, dan beri nilai 1.2.
   
   
   
   Perhatikan bagaimana dalam editor desain, teks bio berjalan hingga ke tepi samping layar. Untuk memperbaiki masalah ini, Anda dapat menambahkan atribut padding kiri, awal, kanan, dan akhir ke LinearLayout root. Anda tidak perlu menambahkan padding bawah, karena teks yang berada tepat di bagian bawah memberi sinyal kepada pengguna bahwa teks dapat di-scroll.
4. Tambahkan padding awal dan akhir 16dp ke LinearLayout root.
5. Beralih ke tab Teks, ekstrak resource dimensi, dan beri nama layout_padding.
   
   

Catatan: Mulai dari level API 17, gunakan "start" dan "end" alih-alih "left" dan "right" untuk padding dan margin guna menyesuaikan aplikasi Anda untuk bahasa RTL seperti bahasa Arab.

6. Jalankan aplikasi Anda dan scroll teks.
   
   

Selamat!

Anda telah membuat aplikasi lengkap dari awal, dan tampilannya sangat bagus.

Project Android Studio: AboutMe

Catatan: Semua tantangan coding bersifat opsional.

Di dalam ScrollView, tambahkan ImageView di atas TextView. Saat Anda menjalankan aplikasi, gambar ini, tidak seperti bintang, akan keluar dari tampilan saat teks di-scroll ke atas.

Petunjuk: Scroll view hanya dapat memiliki satu tampilan turunan. Anda harus menggabungkan dua tampilan yang dapat di-scroll, ImageView dan TextView, ke dalam LinearLayout.

• ViewGroup adalah tampilan yang dapat berisi tampilan lain. LinearLayout dan ScrollView adalah grup tampilan.
• LinearLayout adalah grup tampilan yang mengatur tampilan turunannya secara horizontal atau vertikal.
• Gunakan ScrollView saat Anda perlu menampilkan konten di layar, seperti teks panjang atau kumpulan gambar. Tampilan scroll hanya dapat berisi satu tampilan turunan. Jika Anda ingin men-scroll lebih dari satu tampilan, tambahkan ViewGroup seperti LinearLayout ke ScrollView, dan letakkan tampilan yang akan di-scroll di dalam ViewGroup tersebut.
• Layout Editor adalah editor desain visual di dalam Android Studio. Anda dapat menggunakan Layout Editor untuk membuat tata letak aplikasi dengan menarik elemen UI ke dalam tata letak.
• Gaya adalah kumpulan atribut yang menentukan tampilan untuk suatu tampilan. Misalnya, gaya dapat menentukan warna font, ukuran font, warna latar belakang, padding, dan margin.
• Anda dapat mengekstrak dan mengumpulkan semua pemformatan tampilan ke dalam gaya. Untuk memberikan tampilan yang konsisten pada aplikasi Anda, gunakan kembali gaya untuk tampilan lain.

Kursus Udacity:

• Mengembangkan Aplikasi Android dengan Kotlin

Dokumentasi developer Android:

• Tata Letak
• ViewGroup
• View
• Tata Letak Linear
• ScrollView
• Mendukung kepadatan piksel yang berbeda-beda (dp)
• Membangun UI dengan Layout Editor
• Dokumentasi Android Studio
• Gaya dan Tema

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

Jika Anda menyelesaikan codelab ini sendiri, gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Jawab pertanyaan-pertanyaan berikut

Pertanyaan 1

Manakah dari berikut ini yang merupakan grup tampilan?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Pertanyaan 2

Manakah dari hierarki tampilan yang tercantum berikut ini yang tidak valid?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Pertanyaan 3

Gaya adalah resource yang ditentukan di styles.xml. Dengan gaya, Anda dapat menentukan warna, font, ukuran teks, dan banyak karakteristik tampilan lainnya. Benar atau salah?

▢ Benar

▢ Salah

Pertanyaan 4

ScrollView adalah grup tampilan yang dapat berisi sejumlah tampilan atau grup tampilan sebagai turunannya. Benar atau salah?

▢ Benar

▢ Salah

Pertanyaan 5

Elemen UI mana yang dapat digunakan untuk menampilkan gambar di aplikasi Anda?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Mulai pelajaran berikutnya: 2.2: Menambahkan interaktivitas pengguna

Untuk link ke codelab lain dalam kursus ini, lihat halaman landing codelab Dasar-Dasar Android Kotlin.