Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Halaman ini diterjemahkan oleh Cloud Translation API.

Dasar-Dasar Android Kotlin 02.2: Menambahkan interaktivitas pengguna

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.
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 menetapkan teks ke tampilan TextView menggunakan teks dari tampilan EditText.
Cara bekerja dengan View dan ViewGroup.
Cara mengubah visibilitas View.

Yang akan Anda lakukan

Menambahkan interaktivitas ke aplikasi AboutMe, yang berasal dari codelab sebelumnya.
Tambahkan EditText agar pengguna dapat memasukkan teks.
Menambahkan Button dan menerapkan 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 menambahkan kolom input EditText agar pengguna dapat 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 dengan yang Anda selesaikan di codelab sebelumnya.
Buka project AboutMeInteractive-Starter di Android Studio.
Jalankan aplikasi. Anda melihat tampilan teks nama, gambar bintang, dan segmen teks yang 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 teks edit menggunakan EditText, subclass dari TextView. Teks edit memungkinkan pengguna memasukkan dan mengubah input teks, seperti yang ditampilkan 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, akan 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 menunjukkan Ab digarisbawahi. 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 dalam Component Tree dan letakkan di bawah name_text dan di atas star_image.
Gunakan panel Attributes untuk menetapkan atribut berikut pada tampilan EditText.

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

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

Dalam tugas ini, Anda memberi gaya pada tampilan EditText dengan menambahkan petunjuk, mengubah perataan teks, mengubah gaya menjadi NameStyle, dan menyetel jenis input.

Langkah 1: Tambahkan teks petunjuk

Tambahkan resource string baru untuk petunjuk dalam 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 Attributes, hapus nilai Name dari atribut text. Nilai atribut text harus kosong agar petunjuk ditampilkan.

Langkah 2: Setel atribut inputType

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

Untuk melihat semua jenis input yang mungkin, di panel Atribut, klik kolom inputType, atau klik tiga titik ... di samping kolom. Akan muncul daftar yang menampilkan semua jenis input yang dapat Anda gunakan, dengan jenis input aktif yang dicentang. Anda dapat memilih lebih dari satu jenis masukan.

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

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

Menetapkan jenis input untuk kolom nama panggilan:

Setel atribut inputType ke textPersonName untuk teks edit nickname_edit.
Di panel Component Tree, perhatikan peringatan autoFillHints. Peringatan ini tidak berlaku untuk aplikasi ini dan berada di luar cakupan codelab ini, sehingga Anda dapat mengabaikannya. (Jika Anda ingin mempelajari isi otomatis lebih lanjut, lihat Mengoptimalkan aplikasi Anda untuk isi otomatis.)
Di panel Attributes, verifikasi nilai untuk atribut berikut pada 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 oleh pengguna untuk melakukan suatu tindakan. Tombol dapat terdiri dari teks, ikon, atau teks dan ikon.

Dalam tugas ini, Anda menambahkan tombol SELESAI, yang diketuk oleh pengguna setelah mereka memasukkan nama panggilan. Tombol tersebut 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 nickname_edit edit teks.
Buat resource string baru bernama done. Beri nilai pada string sebesar Done,

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

Gunakan panel Attributes untuk menetapkan atribut berikut di 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 Resource.

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 dalam 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: Sesuaikan gaya tombol DONE

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.
Beralih 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 cocok 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 akan melihat tombol SELESAI di bawah teks edit.

Setelah pengguna memasukkan nama panggilan dan mengetuk tombol SELESAI, nama panggilan akan ditampilkan dalam tampilan TextView. Dalam tugas ini, Anda 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 dalam Component Tree. Tempatkan tampilan teks di bawah done_button dan di atas star_image.
Gunakan panel Attributes 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 dalam aplikasi menggunakan atribut visibility. Atribut ini menggunakan salah satu dari tiga nilai:

visible: Tampilan terlihat.
Invisible: Menyembunyikan tampilan, tetapi tampilan tersebut masih menggunakan ruang dalam tata letak.
gone: Menyembunyikan tampilan, dan tampilan tidak menghabiskan ruang dalam tata letak.

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

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

Kode XML yang dihasilkan untuk TextView ini akan terlihat seperti ini:

<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 diterapkan di Activity yang menghosting tata letak dengan tombol (tampilan).

Pemroses klik secara umum memiliki format ini, dengan tampilan yang diteruskan adalah tampilan yang menerima klik atau ketuk.

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>. Misalnya:

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

ATAU

Anda dapat melakukannya secara terprogram pada runtime, di onCreate() dari Activity, dengan memanggil setOnClickListener. Misalnya:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

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

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

Dapatkan teks dari teks edit nickname_edit.
Setel teks dalam tampilan teks nickname_text.
Sembunyikan tombol edit teks.
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 yang disebut addNickname. Sertakan parameter input yang disebut view dari jenis View. Parameter view adalah View tempat fungsi dipanggil. Dalam hal ini, view akan menjadi instance dari tombol SELESAI.

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)

Tetapkan teks dalam tampilan teks nicknameTextView ke teks yang dimasukkan pengguna di editText, yang mendapatkannya 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 TextView nama panggilan terlihat dengan menyetel properti visibility ke View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Langkah 2: Pasang pemroses klik ke Tombol SELESAI

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

Di MainActivity.kt, di akhir fungsi onCreate(), dapatkan referensi ke tampilan DONE 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, masukkan nama panggilan, lalu ketuk tombol DONE. Perhatikan bahwa teks dan tombol edit akan diganti dengan tampilan teks nama panggilan.

Perhatikan bahwa meskipun pengguna mengetuk tombol SELESAI, keyboard akan tetap terlihat. Perilaku ini merupakan perilaku default.

Langkah 3: Sembunyikan keyboard

Di langkah ini, Anda menambahkan kode untuk menyembunyikan keyboard setelah pengguna mengetuk tombol DONE.

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 membuat aplikasi menjadi lebih interaktif dan menambahkan fungsi sehingga pengguna dapat memperbarui nama panggilan.

Dalam tugas ini, Anda 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 yang disebut 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 teks edit, tampilkan tombol DONE, dan sembunyikan 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. Masukkan nama panggilan, ketuk tombol SELESAI, lalu ketuk tampilan TextView panggilan. Tampilan nama panggilan akan hilang, dan teks edit serta tombol SELESAI menjadi terlihat.

Perhatikan bahwa secara default, tampilan EditText tidak memiliki fokus dan keyboard tidak terlihat. Sulit bagi pengguna untuk mengetahui bahwa tampilan teks nama panggilan dapat diklik. Pada tugas berikutnya, Anda menambahkan fokus dan gaya ke tampilan teks nama panggilan.

Langkah 2: Setel 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 belakang 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 memberikan petunjuk kepada 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 Anda.
EditText adalah elemen UI yang memungkinkan pengguna memasukkan dan mengubah teks.
Button adalah elemen UI yang dapat diketuk oleh pengguna untuk melakukan suatu tindakan. Tombol dapat terdiri dari teks, ikon, atau teks dan ikon.

Pemroses klik

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

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

Di 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. 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

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 memberikan 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 kelompok 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 tutorial berikutnya: 2.3: Constraint layout using the Layout Editor

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