Halaman ini diterjemahkan oleh Cloud Translation API.

Dasar-Dasar Android Kotlin 02.2: Menambahkan interaktivitas pengguna

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.
Membuat tata letak linier menggunakan Layout Editor Android Studio .
Membuat aplikasi sederhana yang menggunakan LinearLayout, TextView, ScrollView, dan tombol dengan pengendali klik.

Yang akan Anda pelajari

Cara mendapatkan input pengguna menggunakan tampilan EditText.
Cara menyetel teks ke tampilan TextView menggunakan teks dari tampilan EditText.
Cara menggunakan View dan ViewGroup.
Cara mengubah visibilitas View.

Yang akan Anda lakukan

Tambahkan interaktivitas ke aplikasi AboutMe, yang berasal dari codelab sebelumnya.
Tambahkan EditText agar pengguna dapat memasukkan teks.
Tambahkan Button dan terapkan pengendali kliknya.

Dalam codelab ini, Anda akan memperluas aplikasi AboutMe untuk menambahkan interaksi pengguna. Anda menambahkan kolom nama panggilan, tombol SELESAI, dan tampilan teks untuk menampilkan nama panggilan. Setelah pengguna memasukkan nama panggilan dan mengetuk tombol SELESAI, tampilan teks akan diperbarui untuk menampilkan nama panggilan yang dimasukkan. Pengguna dapat memperbarui nama panggilan lagi dengan mengetuk tampilan teks.

Aplikasi AboutMe

Dalam tugas ini, Anda akan menambahkan kolom input EditText untuk memungkinkan pengguna memasukkan nama panggilan.

Langkah 1: Mulai

Jika Anda belum memiliki aplikasi AboutMe dari codelab sebelumnya, download kode awal, AboutMeInteractive-Starter. Ini adalah kode yang sama yang Anda selesaikan di codelab sebelumnya.
Buka project AboutMeInteractive-Starter di Android Studio.
Jalankan aplikasi. Anda akan melihat tampilan teks nama, gambar bintang, dan segmen teks panjang dalam tampilan scroll.

Perhatikan bahwa pengguna tidak dapat mengubah teks apa pun.

Aplikasi akan lebih menarik jika pengguna dapat berinteraksi dengan aplikasi, misalnya jika pengguna dapat memasukkan teks. Untuk menerima input teks, Android menyediakan widget antarmuka pengguna (UI) yang disebut edit teks. Anda menentukan edit teks menggunakan EditText, subclass dari TextView. Kolom edit teks memungkinkan pengguna memasukkan dan mengubah input teks, seperti yang ditunjukkan pada screenshot di bawah.

Langkah 2: Tambahkan EditText

Di Android Studio, buka file tata letak activity_main.xml di tab Design.
Di panel Palette, klik Text.

Ab TextView, yang merupakan TextView, ditampilkan di bagian atas daftar elemen teks di panel Palette. Di bawah Ab TextView terdapat beberapa tampilan EditText.

Di panel Palette, perhatikan bagaimana ikon untuk TextView menampilkan huruf Ab tanpa garis bawah. Namun, ikon EditText menampilkan Ab dengan garis bawah. Garis bawah menunjukkan bahwa tampilan dapat diedit.

Untuk setiap tampilan EditText, Android menetapkan atribut yang berbeda, dan sistem menampilkan metode input virtual yang sesuai (seperti keyboard virtual).
Tarik teks edit PlainText ke Component Tree dan letakkan di bawah name_text dan di atas star_image.
Gunakan panel Atribut untuk menyetel atribut berikut pada tampilan EditText.

Atribut	Nilai
`id`	`nickname_edit`
`layout_width`	`match_parent` (default)
`layout_height`	`wrap_content` (default)

Jalankan aplikasi Anda. Di atas gambar bintang, Anda akan melihat kotak edit teks dengan teks default "Nama".

Dalam tugas ini, Anda akan menata tampilan EditText dengan menambahkan petunjuk, mengubah perataan teks, mengubah gaya ke NameStyle, dan menyetel jenis input.

Langkah 1: Tambahkan teks petunjuk

Tambahkan resource string baru untuk petunjuk di file string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

Gunakan panel Attributes untuk menetapkan atribut berikut ke tampilan EditText:

Atribut	Nilai
`style`	`NameStyle`
`textAlignment`	(tengah)
`hint`	`@string/what_is_your_nickname`

Di panel Atribut, hapus nilai Name dari atribut text. Nilai atribut text harus kosong agar petunjuk ditampilkan.

Langkah 2: Tetapkan atribut inputType

Atribut inputType menentukan jenis input yang dapat dimasukkan pengguna dalam tampilan EditText. Sistem Android menampilkan kolom input dan keyboard virtual yang sesuai, bergantung pada jenis input yang ditetapkan.

Untuk melihat semua kemungkinan jenis input, di panel Attributes, klik kolom inputType, atau klik tiga titik ... di samping kolom. Daftar akan terbuka dan menampilkan semua jenis input yang dapat Anda gunakan, dengan jenis input yang saat ini aktif dicentang. Anda dapat memilih lebih dari satu jenis input.

Misalnya, untuk sandi, gunakan nilai textPassword. Kolom teks menyembunyikan input pengguna.

Untuk nomor telepon, gunakan nilai phone. Keypad angka ditampilkan, dan pengguna hanya dapat memasukkan angka.

Tetapkan jenis input untuk kolom nama panggilan:

Tetapkan atribut inputType ke textPersonName untuk nickname_edit edit teks.
Di panel Component Tree, perhatikan peringatan autoFillHints. Peringatan ini tidak berlaku untuk aplikasi ini dan berada di luar cakupan codelab ini, jadi Anda dapat mengabaikannya. (Jika Anda ingin mempelajari lebih lanjut isi otomatis, lihat Mengoptimalkan aplikasi Anda untuk isi otomatis.)
Di panel Attributes , verifikasi nilai untuk atribut berikut dari tampilan EditText:

Atribut	Nilai
`id`	`nickname_edit`
`layout_width`	`match_parent` (default)
`layout_height`	`wrap_content` (default)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(kosong)

Button adalah elemen UI yang dapat diketuk pengguna untuk melakukan suatu tindakan. Tombol dapat terdiri dari teks, ikon, atau teks dan ikon.

Dalam tugas ini, Anda akan menambahkan tombol SELESAI, yang diketuk pengguna setelah mereka memasukkan nama panggilan. Tombol menukar tampilan EditText dengan tampilan TextView yang menampilkan nama panggilan. Untuk memperbarui nama panggilan, pengguna dapat mengetuk tampilan TextView.

Langkah 1: Tambahkan tombol SELESAI

Tarik tombol dari panel Palette ke Component Tree. Tempatkan tombol di bawah teks edit nickname_edit.
Buat resource string baru bernama done. Beri string nilai Done,

<string name="done">Done</string>

Gunakan panel Atribut untuk menetapkan atribut berikut pada tampilan Button yang baru ditambahkan:

Atribut	Nilai
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

Atribut layout_gravity memusatkan tampilan di tata letak induknya, LinearLayout.

Ubah gaya menjadi Widget.AppCompat.Button.Colored, yang merupakan salah satu gaya standar yang disediakan Android. Anda dapat memilih gaya dari drop-down atau dari jendela Resources.

Gaya ini mengubah warna tombol menjadi warna aksen, colorAccent. Warna aksen ditentukan dalam file res/values/colors.xml.

File colors.xml berisi warna default untuk aplikasi Anda. Anda dapat menambahkan resource warna baru atau mengubah resource warna yang ada di project, berdasarkan persyaratan aplikasi Anda.

Contoh file colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Langkah 2: Beri gaya pada tombol SELESAI

Di panel Attributes, tambahkan margin atas dengan memilih Layout_Margin > Top. Tetapkan margin atas ke layout_margin, yang ditentukan dalam file dimens.xml.
Tetapkan atribut fontFamily ke roboto dari menu drop-down.
Beralihlah ke tab Text dan verifikasi kode XML yang dihasilkan untuk tombol yang baru ditambahkan.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Langkah 3: Ubah resource warna

Pada langkah ini, Anda mengubah warna aksen tombol agar sesuai dengan panel aplikasi aktivitas Anda.

Buka res/values/colors.xml dan ubah nilai colorAccent menjadi #76bf5e.

<color name="colorAccent">#76bf5e</color>

Anda dapat melihat warna yang sesuai dengan kode HEX, di margin kiri editor file.

Perhatikan perubahan warna tombol di editor desain.

Jalankan aplikasi Anda. Anda akan melihat tombol SELESAI yang diberi gaya di bawah teks edit.

Setelah pengguna memasukkan nama panggilan dan mengetuk tombol SELESAI, nama panggilan akan ditampilkan dalam tampilan TextView. Dalam tugas ini, Anda akan menambahkan tampilan teks dengan latar belakang berwarna. Tampilan teks menampilkan nama panggilan pengguna di atas star_image.

Langkah 1: Tambahkan TextView untuk nama panggilan

Tarik tampilan teks dari panel Palette ke Component Tree. Tempatkan tampilan teks di bawah done_button dan di atas star_image.
Gunakan panel Atribut untuk menetapkan atribut berikut untuk tampilan TextView baru:

Atribut	Nilai
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(tengah)

Langkah 2: Ubah visibilitas TextView

Anda dapat menampilkan atau menyembunyikan tampilan di aplikasi menggunakan atribut visibility. Atribut ini menggunakan salah satu dari tiga nilai:

visible: Tampilan terlihat.
Invisible: Menyembunyikan tampilan, tetapi tampilan masih menempati ruang dalam tata letak.
gone: Menyembunyikan tampilan, dan tampilan tidak menempati ruang apa pun dalam tata letak.

Di panel Attributes, tetapkan visibility tampilan teks nickname_text ke gone, karena Anda tidak ingin aplikasi menampilkan tampilan teks ini pada awalnya.

Perhatikan bahwa saat Anda mengubah atribut di panel Attributes, tampilan nickname_text akan menghilang dari editor desain. Tampilan disembunyikan di pratinjau tata letak.
Ubah nilai atribut text dari tampilan nickname_text menjadi string kosong.

Kode XML yang dihasilkan untuk TextView ini akan terlihat mirip dengan kode berikut:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

Pratinjau tata letak Anda akan terlihat seperti berikut:

Pengendali klik pada objek Button (atau pada tampilan apa pun) menentukan tindakan yang akan dilakukan saat tombol (tampilan) diketuk. Fungsi yang menangani peristiwa klik harus diimplementasikan di Activity yang menghosting tata letak dengan tombol (tampilan).

Pemroses klik umumnya memiliki format ini, dengan tampilan yang diteruskan adalah tampilan yang menerima klik atau ketukan.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Anda dapat melampirkan fungsi pemroses klik ke peristiwa klik tombol dengan dua cara:

Dalam tata letak XML, Anda dapat menambahkan atribut android:onClick ke elemen <Button>. Contoh:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

ATAU

Anda dapat melakukannya secara terprogram saat runtime, di onCreate() Activity, dengan memanggil setOnClickListener. Contoh:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

Dalam tugas ini, Anda akan menambahkan pemroses klik untuk done_button secara terprogram. Anda menambahkan pemroses klik di aktivitas yang sesuai, yaitu MainActivity.kt.

Fungsi pemroses klik Anda, yang disebut addNickname, akan melakukan hal berikut:

Dapatkan teks dari nickname_edit edit teks.
Tetapkan teks di tampilan teks nickname_text.
Menyembunyikan teks edit dan tombol.
Tampilkan nama panggilan TextView.

Langkah 1: Tambahkan pemroses klik

Di Android Studio, di folder java, buka file MainActivity.kt.
Di MainActivity.kt, di dalam class MainActivity, tambahkan fungsi bernama addNickname. Sertakan parameter input bernama view dari jenis View. Parameter view adalah View tempat fungsi dipanggil. Dalam hal ini, view akan menjadi instance tombol SELESAI Anda.

private fun addNickname(view: View) {
}

Di dalam fungsi addNickname, gunakan findViewById() untuk mendapatkan referensi ke teks edit nickname_edit dan tampilan teks nickname_text.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

Setel teks di tampilan teks nicknameTextView ke teks yang dimasukkan pengguna di editText, dengan mengambilnya dari properti text.

nicknameTextView.text = editText.text

Sembunyikan tampilan EditText nama panggilan dengan menetapkan properti visibility dari editText ke View.GONE.

Pada tugas sebelumnya, Anda mengubah properti visibility menggunakan Layout Editor. Di sini, Anda melakukan hal yang sama secara terprogram.

editText.visibility = View.GONE

Sembunyikan tombol SELESAI dengan menyetel properti visibility ke View.GONE. Anda sudah memiliki referensi tombol sebagai parameter input fungsi, view.

view.visibility = View.GONE

Di akhir fungsi addNickname, buat tampilan nama panggilan TextView terlihat dengan menyetel properti visibility ke View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Langkah 2: Lampirkan pemroses klik ke Tombol SELESAI

Setelah memiliki fungsi yang menentukan tindakan yang akan dilakukan saat tombol SELESAI diketuk, Anda harus melampirkan fungsi tersebut ke tampilan Button.

Di MainActivity.kt, di akhir fungsi onCreate(), dapatkan referensi ke tampilan SELESAI Button. Gunakan fungsi findViewById() dan panggil setOnClickListener. Teruskan referensi ke fungsi pemroses klik, addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

Dalam kode di atas, it merujuk ke done_button, yang merupakan tampilan yang diteruskan sebagai argumen.

Jalankan aplikasi Anda, masukkan nama panggilan, lalu ketuk tombol SELESAI. Perhatikan bagaimana edit teks dan tombol diganti dengan tampilan teks nama panggilan.

Perhatikan bahwa meskipun setelah pengguna mengetuk tombol SELESAI, keyboard masih terlihat. Perilaku ini adalah default.

Langkah 3: Sembunyikan keyboard

Pada langkah ini, Anda akan menambahkan kode untuk menyembunyikan keyboard setelah pengguna mengetuk tombol SELESAI.

Di MainActivity.kt, di akhir fungsi addNickname(), tambahkan kode berikut. Jika Anda ingin mengetahui informasi selengkapnya tentang cara kerja kode ini, lihat dokumentasi hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

Jalankan aplikasi Anda lagi. Perhatikan bahwa setelah Anda mengetuk SELESAI, keyboard akan disembunyikan.

Pengguna tidak dapat mengubah nama panggilan setelah mengetuk tombol SELESAI. Pada tugas berikutnya, Anda akan membuat aplikasi lebih interaktif dan menambahkan fungsi sehingga pengguna dapat memperbarui nama panggilan.

Dalam tugas ini, Anda akan menambahkan pemroses klik ke tampilan teks nama panggilan. Pemroses klik menyembunyikan tampilan teks nama panggilan, menampilkan teks edit, dan menampilkan tombol SELESAI.

Langkah 1: Tambahkan pemroses klik

Di MainActivity, tambahkan fungsi pemroses klik bernama updateNickname(view: View) untuk tampilan teks nama panggilan.

private fun updateNickname (view: View) {
}

Di dalam fungsi updateNickname, dapatkan referensi ke teks edit nickname_edit, dan dapatkan referensi ke tombol SELESAI . Untuk melakukannya, gunakan metode findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

Di akhir fungsi updateNickname, tambahkan kode untuk menampilkan kolom edit teks, menampilkan tombol SELESAI, dan menyembunyikan tampilan teks.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

Di MainActivity.kt, di akhir fungsi onCreate(), panggil setOnClickListener pada tampilan teks nickname_text. Teruskan referensi ke fungsi pemroses klik, yaitu updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

Jalankan aplikasi Anda. Masukkan nama panggilan, ketuk tombol SELESAI, lalu ketuk tampilan TextView nama panggilan. Tampilan nama panggilan akan menghilang, dan teks edit serta tombol SELESAI akan terlihat.

Perhatikan bahwa secara default, tampilan EditText tidak memiliki fokus dan keyboard tidak terlihat. Pengguna akan kesulitan mengetahui bahwa tampilan teks nama panggilan dapat diklik. Pada tugas berikutnya, Anda akan menambahkan fokus dan gaya ke tampilan teks nama panggilan.

Langkah 2: Tetapkan fokus ke tampilan EditText dan tampilkan keyboard

Di akhir fungsi updateNickname, tetapkan fokus ke tampilan EditText. Gunakan metode requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

Di akhir fungsi updateNickname, tambahkan kode untuk membuat keyboard terlihat.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Langkah 3: Tambahkan warna latar ke tampilan TextView nama panggilan

Setel warna latar belakang tampilan teks nickname_text ke @color/colorAccent, dan tambahkan padding bawah @dimen/small_padding. Perubahan ini akan berfungsi sebagai petunjuk bagi pengguna bahwa tampilan teks nama panggilan dapat diklik.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

Jalankan aplikasi akhir Anda. Teks edit memiliki fokus, nama panggilan ditampilkan di teks edit, dan tampilan teks nama panggilan diberi gaya.

Sekarang, tunjukkan aplikasi AboutMe interaktif Anda kepada teman.

Project Android Studio: AboutMeInteractive

Alat Layout Editor di Android Studio adalah editor desain visual. Anda dapat menggunakan Layout Editor untuk membuat tata letak aplikasi dengan menarik elemen UI ke dalam tata letak.
EditText adalah elemen UI yang memungkinkan pengguna memasukkan dan mengubah teks.
Button adalah elemen UI yang dapat diketuk pengguna untuk melakukan suatu tindakan. Tombol dapat terdiri dari teks, ikon, atau teks dan ikon.

Pemroses klik

Anda dapat membuat View merespons ketukan dengan menambahkan pemroses klik ke View tersebut.
Fungsi yang menentukan pemroses klik menerima View yang diklik.

Anda dapat melampirkan fungsi pemroses klik ke View dengan salah satu dari dua cara:

Dalam tata letak XML, tambahkan atribut android:onClick ke elemen <View>.
Secara terprogram, gunakan fungsi setOnClickListener(View.OnClickListener) di Activity yang sesuai.

Kursus Udacity:

Mengembangkan Aplikasi Android dengan Kotlin

Dokumentasi developer Android:

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

EditText merupakan subclass dari?

View
LinearLayout
TextView
Button

Pertanyaan 2

Manakah dari nilai atribut visibility berikut, yang jika disetel pada tampilan, akan membuat tampilan tersembunyi dan tidak memakan ruang dalam tata letak?

visible
Invisible
gone
hide

Pertanyaan 3

Untuk tampilan EditText, sebaiknya jangan berikan petunjuk, karena petunjuk akan mengacaukan kolom input. Benar atau salah?

Benar
Salah

Pertanyaan 4

Manakah dari pernyataan berikut ini yang benar tentang tampilan Button?

Tampilan Button adalah grup tampilan.
Anda hanya dapat memiliki tiga tampilan Button per layar.
Tampilan Button dapat diklik dan, saat diklik, pemroses klik yang terpasang akan melakukan suatu tindakan.
Button adalah perluasan dari ImageView.

Mulai pelajaran berikutnya: 2.3: Membatasi tata letak menggunakan Layout Editor

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

Dasar-Dasar Android Kotlin 02.2: Menambahkan interaktivitas pengguna Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Yang harus sudah Anda ketahui

Yang akan Anda pelajari

Yang akan Anda lakukan

Langkah 1: Mulai

Langkah 2: Tambahkan EditText

Langkah 1: Tambahkan teks petunjuk

Langkah 2: Tetapkan atribut inputType

Langkah 1: Tambahkan tombol SELESAI

Langkah 2: Beri gaya pada tombol SELESAI

Langkah 3: Ubah resource warna

Langkah 1: Tambahkan TextView untuk nama panggilan

Langkah 2: Ubah visibilitas TextView

Langkah 1: Tambahkan pemroses klik

Langkah 2: Lampirkan pemroses klik ke Tombol SELESAI

Langkah 3: Sembunyikan keyboard

Langkah 1: Tambahkan pemroses klik

Langkah 2: Tetapkan fokus ke tampilan EditText dan tampilkan keyboard

Langkah 3: Tambahkan warna latar ke tampilan TextView nama panggilan

Jawab pertanyaan-pertanyaan berikut

Pertanyaan 1

Pertanyaan 2

Pertanyaan 3

Pertanyaan 4

Dasar-Dasar Android Kotlin 02.2: Menambahkan interaktivitas pengguna