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

Codelab ini adalah bagian dari kursus Dasar-Dasar Kotlin Android. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan 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 perangkat.
• Dasar-dasar LinearLayout.
• Membuat aplikasi sederhana yang menggunakan LinearLayout dan TextView.

Yang akan Anda pelajari

• Cara bekerja dengan 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

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

Di aplikasi AboutMe, Anda dapat menampilkan fakta menarik tentang diri Anda atau Anda dapat 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 AboutMe Android Studio.

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 di dialog Welcome to Android Studio.
   
   
   
4. Pada dialog Create New Project, di tab Phone and Tablet, pilih template Empty Activity. Klik Berikutnya.
   
   
   
5. Pada dialog Create New Project berikutnya, setel parameter berikut dan klik Finish.
   

Atribut	Nilai
Nama Aplikasi	TentangSaya
Nama Perusahaan Android	com.android.example.AboutMe (atau domain Anda sendiri)
Simpan lokasi	Biarkan lokasi default, atau ubah ke direktori pilihan Anda.
Bahasa	Kotlin
API level minimum	API 19: Android 4.4 (KitKat)
Project ini akan mendukung aplikasi instan	Biarkan kotak ini kosong.
Menggunakan artefak AndroidX	Pilih kotak centang 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 juga membuat file tata letak bernama activity_main.xml. File tata letak memiliki ConstraintLayout sebagai root ViewGroup, dan memiliki TextView tunggal sebagai kontennya.

Dalam tugas ini, Anda 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 menyusun tata letak diatur sebagai hierarki tampilan dengan kelompok tampilan sebagai root.

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

Ubah tata letak root agar menggunakan grup 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 merupakan fitur 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 dalam editor desain.

Untuk melihat Layout Editor, klik tab Design. Screenshot menampilkan bagian Layout Editor.

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

Toolbar: Menyediakan tombol untuk mengonfigurasi tampilan tata letak di editor desain, dan untuk mengubah beberapa atribut tata letak. Misalnya, untuk mengubah tampilan tata letak di editor desain, gunakan menu drop-down Select Design Surface:

• Gunakan Desain untuk pratinjau tata letak dunia nyata.
• Gunakan Blueprint untuk melihat hanya kerangka untuk setiap tampilan.
• Gunakan Design + Blueprint untuk melihat kedua tampilan secara berdampingan.

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

Atribut: Menampilkan atribut untuk tampilan atau kelompok tampilan yang saat ini dipilih. Untuk beralih antara daftar lengkap atribut dan atribut yang biasa 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 dibuka.
2. Beralih ke tab Text dan periksa kodenya. Kode memiliki LinearLayout sebagai grup tampilan root-nya. (Grup tampilan adalah tampilan yang berisi tampilan lainnya.)
   
   LinearLayout memiliki atribut yang diperlukan layout_height, layout_width, dan orientation, yang merupakan vertical secara default.
3. Beralih ke tab Design untuk membuka Layout Editor.

Catatan: Tab Design dan tab Text menampilkan tata letak yang sama, dengan cara yang berbeda. Perubahan yang Anda buat di satu tab akan diterapkan di tab lain.

4. Tarik tampilan teks dari panel Palette ke editor desain.
   
   
   
5. Perhatikan panel Component Tree. Tampilan teks baru ditempatkan sebagai elemen turunan dari grup 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
sms	Beri nama Anda. (Salah satu kolom text menampilkan ikon kunci pas untuk menunjukkan bahwa itu adalah untuk namespace tools. Kunci pas tanpa kunci pas adalah untuk namespace android—ini adalah kolom text yang Anda inginkan.)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Pusat

Langkah 2: Buat resource string

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

Untuk menyelesaikan peringatan, buat resource string:

1. Di panel Attributes, klik tiga titik di samping atribut text yang ditetapkan ke nama. Editor resource akan terbuka.
   
   
   
2. Pada 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. Klik Oke. Perhatikan bahwa peringatan tidak ada.
   
   
   
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 fasilitas menggunakan editor fasilitas. Anda juga dapat mengekstrak resource di editor kode XML untuk membuat resource baru:

1. Dalam file activity_main.xml, beralihlah ke tab Text.
2. Pada baris textSize, klik angka (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 OK.
   
   
   
4. Buka file res/values/dimens.xml untuk melihat kode yang dihasilkan berikut:

<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, lalu 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. Ini adalah class yang dihasilkan 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. TextView yang menampilkan nama Anda akan ditampilkan.
   
   

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

Padding versus margin

Padding adalah ruang di dalam batas tampilan atau elemen. Ini adalah ruang antara tepi tampilan dan isi tampilan, seperti yang ditampilkan dalam gambar di bawah ini.

Ukuran tampilan menyertakan padding-nya. Berikut ini 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 "akhir" tepi 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 ini 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 lihat sisi kanan dan kiri layar, apakah aplikasi Anda menggunakan alur kiri-ke-kanan (LTR) atau alur kanan-ke-kiri (RTL). "Mulai" dan "end" selalu lihat awal dan akhir alur:

• Untuk alur LTR, mulai = kiri dan akhir=kanan.
• Untuk alur RTL, start=kanan dan end=kiri.

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

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

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

• Tambahkan &}}
• Misalnya, gunakan android:paddingLeft dan android:paddingStart.

Langkah 1: Tambahkan padding

Untuk memberi spasi 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 dalam editor desain, klik tampilan teks untuk membuka panel Attributes.
3. Di bagian atas panel Atribut, klik ikon panah ganda untuk melihat semua atribut yang tersedia.
4. Telusuri Padding, luaskan, dan klik tiga titik ... di samping atribut top. Dialog Resources akan muncul.
5. Pada dialog Resources, pilih Add new resource > New dimen Value.
6. Pada dialog New Dimension Value Resource, buat resource dimen baru yang disebut small_padding dengan nilai 8dp.
   
   Singkat dp adalah singkatan dari density-dependen. Jika Anda ingin elemen UI terlihat berukuran sama di layar dengan kepadatan berbeda, gunakan dp sebagai unit pengukuran Anda. Namun, saat menentukan ukuran teks, selalu gunakan sp (piksel yang dapat diskalakan).
7. Klik OK.

Langkah 2: Tambahkan margin

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

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

Langkah 3: Tambahkan font

Agar tampilan teks name terlihat lebih baik, gunakan font Android Roboto. 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, cari rob dan pilih Roboto. Dalam daftar Preview, pilih Regular.
4. Pilih tombol pilihan Tambahkan font ke project.
5. Klik OK.
   
   

Folder res sekarang 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 pemformatan tampilan teks name menjadi gaya dan menggunakan kembali gaya tersebut untuk sejumlah tampilan di aplikasi Anda. Menggunakan kembali gaya akan memberi aplikasi Anda tampilan yang konsisten saat Anda memiliki beberapa tampilan. Penggunaan gaya juga memungkinkan Anda menyimpan atribut umum ini di satu lokasi.

1. Klik kanan TextView di Component Tree dan pilih Refactor > Extract Style.
2. Pada dialog Extract Android Style, hapus kotak centang layout_width, kotak centang layout_height, dan kotak centang 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 OK.
   
   
   
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 seperti 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 sedang digunakan dalam tampilan teks sebagai style="@style/NameStyle".
7. Jalankan aplikasi dan perhatikan perubahan dalam 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 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 di Android, seperti ikon contoh, avatar, dan latar belakang. Anda akan menambahkan salah satu referensi ini ke aplikasi.

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, dan pilih btn_star_big_on. Bintang kuning .
4. Klik OK.
   
   
   
   Gambar bintang ditambahkan ke tata letak di bawah nama Anda. Karena Anda memiliki LinearLayout vertikal, tampilan yang Anda tambahkan diratakan secara vertikal.
   
   
5. Beralih ke tab Text dan lihat kode ImageView yang dihasilkan. Lebar disetel ke match_parent sehingga tampilan akan selebar elemen induknya. Tingginya disetel ke wrap_content sehingga tampilan akan setinggi kontennya. ImageView merujuk pada 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 pada "@+id/imageView" dan pilih Refactor > Rename.
7. Pada dialog Ganti nama, setel id ke @+id/star_image. Klik Refactor.
   
   
   

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

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

ScrollView adalah kelompok tampilan yang memungkinkan hierarki tampilan ditempatkan di dalamnya untuk di-scroll. Tampilan scroll hanya dapat berisi satu tampilan lain, atau kelompok tampilan, sebagai turunan. Tampilan turunan biasanya merupakan LinearLayout. Di dalam LinearLayout, Anda dapat menambahkan tampilan lainnya.

Gambar berikut menampilkan 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 yang dapat di-scroll, Anda dapat menempatkan tampilan langsung ke ScrollView, 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 dalam tata letak dengan menariknya ke editor desain, atau ke Component Tree. Tempatkan 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 telah menggunakan cukup ruang vertikal untuk menampilkan kontennya, sistem Android menata letak ScrollView untuk mengisi seluruh ruang yang tersedia di layar.

4. Tambahkan id ke ScrollView dan beri nama bio_scroll. Menambahkan id ke ScrollView memberi sistem Android tuas 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. Masukkan TextView pada bio_scroll, sebagai elemen turunan bio_scroll.
   
   
7. Setel 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. Pada dialog Resources, cari NameStyle. Pilih NameStyle dari daftar, lalu klik OK. Tampilan teks sekarang 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 menggunakan apostrof, Anda harus meng-escape karakter tersebut 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. Dalam 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 di antara baris. Gunakan atribut lineSpacingMultiplier, dan beri nilai 1.2.
   
   
   
   Perhatikan bagaimana di editor desain, teks bio berjalan sepenuhnya ke tepi layar. Untuk memperbaiki masalah ini, Anda dapat menambahkan atribut padding kiri, mulai, kanan, dan akhir ke LinearLayout root. Anda tidak perlu menambahkan padding bawah, karena teks yang berjalan tepat di bawah sinyal ke pengguna bahwa teks dapat di-scroll.
4. Tambahkan padding awal dan akhir 16dp ke LinearLayout root.
5. Beralih ke tab Text, ekstrak resource dimensi, dan beri nama layout_padding.
   
   

Catatan: Mulai dari API level 17, gunakan "start" dan "end" bukan "kiri" dan "kanan" untuk padding dan margin guna menyesuaikan aplikasi Anda untuk bahasa RTL seperti bahasa Arab.

6. Jalankan aplikasi Anda dan scroll teksnya.
   
   

Selamat!

Anda telah membuat aplikasi lengkap dari awal, dan terlihat keren.

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 di-scroll ke luar tampilan saat teks di-scroll ke atas.

Petunjuk: Tampilan scroll 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 lainnya. LinearLayout dan ScrollView adalah grup tampilan.
• LinearLayout adalah kelompok 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 tempatkan tampilan yang akan di-scroll di dalam ViewGroup tersebut.
• Layout Editor merupakan 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 tampilan. Misalnya, gaya dapat menentukan warna font, ukuran font, warna latar belakang, padding, dan margin.
• Anda dapat mengekstrak dan mengumpulkan semua format tampilan menjadi gaya. Untuk memberikan tampilan yang konsisten pada aplikasi Anda, gunakan kembali gaya tersebut untuk tampilan lainnya.

Kursus Udacity:

• Mengembangkan Aplikasi Android dengan Kotlin

Dokumentasi developer Android:

• Tata Letak
• ViewGroup
• View
• Tata Letak Linear
• ScrollView
• Mendukung kepadatan piksel yang berbeda (dp)
• Membuat 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. Terserah instruktur untuk melakukan hal berikut:

• Tugaskan pekerjaan rumah jika diperlukan.
• Berkomunikasi dengan siswa cara mengirimkan tugas pekerjaan rumah.
• Beri nilai tugas pekerjaan rumah.

Instruktur dapat menggunakan saran ini sesedikit atau sebanyak yang mereka inginkan, dan harus bebas memberikan pekerjaan rumah lain yang dirasa sesuai.

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

Jawab pertanyaan berikut

Pertanyaan 1

Manakah dari berikut ini yang merupakan kelompok 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 kelompok tampilan yang dapat berisi sejumlah tampilan atau kelompok 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 lainnya dalam kursus ini, lihat halaman landing codelab Dasar-Dasar Kotlin Android.