Tugas 1: Bereksperimen dengan atribut keyboard entri teks
1.1 Membuat layout utama dan metode showText
akan menambahkan Tombol, dan mengubah elemen TextView menjadi elemen EditText sehingga pengguna bisa memasukkan teks.
- Buat proyek baru yang bernama Keyboard Samples, dan pilih template Empty Activity.
- Buka file layout activity_main.xml untuk mengedit kode XML.
- Tambahkan Tombol di atas elemen
TextView
yang sudah ada dengan atribut berikut:
Atribut Tombol |
Nilai Baru |
android:id |
“@+id/button_main” |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:layout_alignParentBottom |
“true” |
android:layout_alignParentRight |
“true” |
android:onClick |
“showText” |
android:text |
“Show” |
- Ekstrak sumber daya string untuk nilai atribut
android:text
untuk membuat dan memasukkannya di strings.xml: Letakkan kursor pada Show, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract string resource. Lalu ubah name sumber daya untuk nilai string ke show.
- Ubah elemen
TextView
yang sudah ada seperti berikut:
- Hapus atribut
android:text
yang menetapkan “Hello World!”.
- Ubah tag
TextView
menjadi tag EditText
dan pastikan tag diakhiri dengan />
.
- Tambahkan atau ubah atribut berikut:
Atribut EditText |
Nilai Lama TextView |
Nilai Baru EditText |
android:id |
|
“@+id/editText_main” |
android:layout_width |
“wrap_content” |
“match_parent” |
android:layout_height |
“wrap_content” |
“wrap_content” |
android:layout_alignParentBottom |
|
“true” |
android:layout_toLeftOf |
|
“@id/button_main” |
android:hint |
|
“Enter a message” |
- Ekstrak sumber daya string untuk nilai atribut
android:hint
“Enter a message” ke nama sumber daya enter.
- Buka MainActivity.java dan masukkan metode
showText
berikut, yang mengambil informasi yang dimasukkan ke dalam elemen EditText dan menampilkannya di dalam pesan toast
-
- Jalankan aplikasi dan periksa cara kerja keyboard.
1.2 Setel keyboard untuk menjadikan huruf besar di awal kalimat
Tambahkan atribut android:inputType
ke elemen EditText
menggunakan nilai textCapSentences
untuk menyetel keyboard menjadi huruf besar di awal kalimat, sehingga pengguna bisa otomatis memulai kalimat dengan huruf besar:
android:inputType="textCapSentences"
1.3 Setel keyboard untuk menyembunyikan sandi saat memasukkannya
- Ubah elemen
EditText
untuk menggunakan nilai textPassword
untuk atribut android:inputType
.
android:inputType="textPassword"
- Ubah
android:hint
menjadi “Enter your password”.
- Jalankan aplikasi.
Tugas 2. Mengubah tipe keyboard
2.1 Menggunakan keyboard email
Pada elemen EditText
di file layout activity_main.xml, ubah atribut android:inputType
menjadi yang berikut:
android:inputType="textEmailAddress"
Ubah atribut android:hint
menjadi "Enter an email address".
Ekstrak sumber daya string untuk nilai android:hint
ke enter_email
Jalankan aplikasi. Mengetuk bidang akan memunculkan keyboard email di layar dengan simbol “@” yang terletak di sebelah tombol spasi.
2.2 Menggunakan keypad ponsel
- Pada elemen
EditText
di file layout activity_main.xml, ubah atribut android:inputType
menjadi yang berikut:
android:inputType="phone"
- Ubah atribut
android:hint
menjadi “Enter a phone number”.
- Ekstrak sumber daya string untuk nilai
android:hint
ke enter_phone
.
- Jalankan aplikasi.
Tugas 3: Menambahkan kontrol masukan spinner untuk memilih label telepon
3.1 Salin proyek KeyboardSamples dan ubah layout
Salin folder proyek KeyboardSamples, ubah namanya menjadi PhoneNumberSpinner, dan optimalkan kode untuk mengisikan nama baru di seluruh proyek aplikasi.
- Setelah mengoptimalkan kode, ubah nilai ” di file strings.xml (di dalam app > res > values) menjadi Phone Number Spinner (berikut spasinya) sebagai nama aplikasi.
- Bukan file layout activity_main.xml.
Kurung elemen EditText
dan Button
yang ada dari pelajaran sebelumnya di dalam LinearLayout
dengan orientasi horizontal, dan menempatkan elemen EditText
di atas Button, dan Tambahkan elemen Spinner di antara elemen EditText dan elemen Button
Tambakan LinearLayout
lagi di bawah LinearLayout
yang baru saja Anda buat, dengan orientasi horizontal untuk mengurung dua elemen TextView
Periksa layout Anda dengan mengeklik tab Preview di sebelah kanan jendela layout.
Ekstrak string Anda ke dalam sumber daya string
Elemen |
String |
Sumber daya string |
EditText |
“Enter phone number” |
“@string/hint_phonenumber” |
Button |
“Show” |
“@string/show_button” |
TextView |
“Phone Number: “ |
“@string/phonenumber_label” |
TextView |
“Nothing entered.” |
“@string/nothing_entered” |
3.2 Tambahkan kode untuk mengaktifkan spinner dan listener-nya
Buka strings.xml untuk mendefinisikan nilai yang bisa dipilih (Home, Work, Mobile, dan Other) untuk spinner sebagai larik string labels_array
.
<string-array name="labels_array">
<item>Home</item>
<item>Work</item>
<item>Mobile</item>
<item>Other</item>
</string-array>
Untuk mendefinisikan callback pilihan untuk spinner, ubah kelas MainActivity
Anda untuk mengimplementasikan antarmuka AdapterView.OnItemSelectedListener
seperti yang ditampilkan:
public class MainActivity extends AppCompatActivity implements
AdapterView.OnItemSelectedListener {
Klik bola lampu dan pilih Implement methods. Metode onItemSelected()
dan onNothingSelected()
yang diperlukan untuk OnItemSelectedListener
, seharusnya sudah disorot, dan opsi “Insert @Override” harus dicentang. Klik OK.
Buat instance objek spinner di metode onCreate()
menggunakan elemen Spinner
di layout (label_spinner
), dan tetapkan listener-nya (spinner.setOnItemSelectedListener
) di metode onCreate()
. Tambahkan kode ke metode onCreate()
:
3.3 Tambahkan kode untuk merespons pilihan pengguna
Deklarasikan string mSpinnerLabel
di awal definisi kelas MainActivity
:
Tambahkan kode ke metode callback onItemSelected()
kosong, seperti yang ditampilkan di bawah ini, untuk mengambil item yang dipilih pengguna menggunakan getItemAtPosition
, dan tetapkan ke mSpinnerLabel
. Anda juga bisa menambahkan sebuah panggilan ke metode showText()
yang sudah Anda tambahkan ke versi aplikasi sebelumnya:
Tambahkan kode ke metode callback onNothingSelected()
yang kosong, seperti yang ditampilkan di bawah ini, untuk menampilkan pesan logcat jika tidak satu pun yang dipilih:
Ekstrak sumber daya string untuk "onNothingSelected: "
ke nothing_selected
.
- Tambahkan
MainActivity.class.getSimpleName()
agar menggunakan nama sederhana kelas untuk TAG:
private static final String TAG = MainActivity.class.getSimpleName();
- Ubah pernyataan
String showString
di metode showText
untuk menampilkan string yang dimasukkan dan item spinner yang dipilih (mSpinnerLabel):
String showString = (editText.getText().toString() + " - " + mSpinnerLabel);
- Jalankan aplikasi.
Tugas 4: Menggunakan dialog untuk peringatan yang memerlukan keputusan
4.1 Buat proyek baru dengan layout untuk menampilkan dialog peringatan
Dalam latihan ini, Anda akan membangun sebuah peringatan dengan tombol OK dan Cancel, yang akan dipicu oleh klik pengguna pada tombol.
- Buat proyek baru bernama Alert Sample berdasarkan template Empty Activity.
- Bukan layout activity_main.xml dan buat perubahan berikut:
Atribut TextView |
Nilai |
android:id |
“@+id/top_message” |
android:text |
“Tap to test the alert:” |
- Ekstrak string
android:text
di atas ke dalam tap_test
sumber daya untuk membuatnya lebih mudah diterjemahkan
- Tambahkan
Button
dengan atribut berikut:
Atribut Tombol |
Nilai |
android:id |
“@+button1” |
android:layout_width |
wrap_content |
android:layout_height |
wrap_content |
android:layout_below |
“@id/top_message” |
android:layout_marginTop |
“36dp” |
android:text |
“Alert” |
android:onClick |
“onClickShowAlert” |
- Ekstrak string
android:text
di atas ke dalam alert_button
- Ekstrak nilai dimensi untuk
android:layout_marginTop
dengan cara yang sama: Letakkan kursor di "36dp"
, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract dimension resource. Lalu edit nama Sumber Daya untuk nilai ke button_top_margin.Tambahkan metode onClickShowAlert()
ke MainActivity.java
seperti berikut: Setel judul dan pesan untuk dialog peringatan dalam onClickShowAlert()
setel kode di langkah sebelumnya:
- Ekstrak judul dan pesan ke dalam sumber daya string. Baris kode sebelumnya sekarang seharusnya menjadi:
- Tambahkan tombol OK pada peringatan dengan
setPositiveButton()
dan menggunakan onClickListener()
:
- Ekstrak sumber daya string untuk
"OK"
dan untuk "Pressed OK"
. Pernyataan sekarang seharusnya menjadi:
- Tambahkan tombol Cancel pada peringatan dengan
setNegativeButton()
dan onClickListener()
, tampilkan pesan toast jika tombol diklik, lalu batalkan dialog:
- Ekstrak sumber daya string untuk
"Cancel"
dan "Pressed Cancel"
. Pernyataan sekarang seharusnya menjadi:
- Tambahkan
show()
yang membuat lalu menampilkan dialog peringatan, ke akhir onClickShowAlert()
:
...
// Create and show the AlertDialog.
myAlertBuilder.show();
}
Tugas 5: Menggunakan picker untuk masukan pengguna
5.1 Membuat layout aktivitas utama
- Mulai proyek baru yang bernama Date Time Pickers menggunakan template Empty Activity.
- Buka activity_main.xml untuk mengedit kode layout,Ubah induk
RelativeLayout
agar menjadi LinearLayout
dan tambahkan android:orientation="vertical"
-
Atribut TextView |
Nilai Lama |
Nilai Baru |
android:text |
“Hello World” |
“@string/choose_datetime” |
-
Atribut TextView |
Nilai Lama |
Nilai Baru |
android:textSize |
|
“@dimen/text_size” |
- Ekstrak string
"Date"
ke dalam sumber daya string date_button
.
- Ekstrak dimensi
"12dp"
untuk android:layout_marginTop
ke button_top_margin
.
-
Atribut Tombol Kedua |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:id |
“@+id/button_time” |
android:layout_marginTop |
“@dimen/button_top_margin” |
android:layout_alignBottom |
“@id/button_date” |
android:layout_toRightOf |
“@id/button_date” |
android:text |
“Time” |
android:onClick |
“showTimePickerDialog” |
8. Ekstrak string "Time"
ke dalam sumber daya string time_button
.
5.2 Buat fragmen baru untuk picker tanggal
- Luaskan app > java > com.example.android.DateTimePickers dan pilih MainActivity.
- Pilih File > New > Fragment > Fragment (Blank), dan beri nama fragmen DatePickerFragment.
- Buka DatePickerFragment dan edit definisi kelas
DatePickerFragment
untuk memperluas DialogFragment
dan dan implementasikan DatePickerDialog.OnDateSetListener
untuk membuat picker tanggal standar dengan sebuah listener.
- Selagi Anda mengetik DialogFragment dan DatePickerDialog.OnDateSetListener , Android Studio otomatis menambahkan yang berikut di blok
import
import android.app.DatePickerDialog;
import android.support.v4.app.DialogFragment;
Buka DatePickerFragment dan edit definisi kelas DatePickerFragment
untuk memperluas DialogFragment
dan dan implementasikan DatePickerDialog.OnDateSetListener
untuk membuat picker tanggal standar dengan sebuah listener. Lihat Picker untuk informasi selengkapnya tentang memperluas DialogFragment untuk picker tanggal:
public class DatePickerFragment extends DialogFragment
implements DatePickerDialog.OnDateSetListener {
Ganti onCreateView()
dengan onCreateDialog()
yang mengembalikan Dialog
, dan anotasikan onCreateDialog()
dengan @NonNull
untuk menunjukkan bahwa nilai pengembalian Dialog
tidak boleh null—upaya apa pun untuk mengacu pada nilai pengembalian Dialog
harus dicentang null.
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
...
}
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the current date as the default date in the picker.
final Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH);
// Create a new instance of DatePickerDialog and return it.
return new DatePickerDialog(getActivity(), this, year, month, day);
}
5.3 Buat fragmen baru untuk picker waktu
- Pilih MainActivity lagi.
- Pilih File > New > Fragment > Fragment (Blank), dan beri nama fragmen TimePickerFragment. Kosongkan ketiga opsi sehingga Anda tidak membuat XML layout, jangan sertakan metode pabrik fragmen, dan jangan sertakan callback antarmuka. Klik Finish untuk membuat fragmen.
- Bukan *TimePickerFragment dan ikuti prosedur yang sama dengan
DatePickerFragment
, mengimplementasikan metode kosong onTimeSet()
, mengganti onCreateView()
dengan onCreateDialog()
, dan menghapus konstruktor publik untuk TimePickerFragment
.
5.4 Modifikasi aktivitas utama
Buat sumber daya string di strings.xml:
Tambahkan metode showDatePickerDialog()
dan showTimePickerDialog()
, dengan merujuk ke kode di bawah ini. Ini membuat instance FragmentManager
untuk mengelola fragmen secara otomatis, dan untuk menampilkan picker. Untuk informasi selengkapnya tentang fragmen
dan jalankan
Tugas 6: Menggunakan tampilan gambar sebagai tombol
6.1 Mulai proyek baru
- Mulai proyek Android Studio baru dengan nama aplikasi Droid Cafe. Pilih template Basic Activity, terima setelan default, dan klik Finish.
- Proyek terbuka dengan dua layout dalam folder res > layout: activity_main.xml, dan content_main.xml.
- Buka content_main.xml dan ekstrak string
"Hello World"
di TextView
untuk menggunakan nama sumber daya intro_text
. Lalu buka strings.xml dan ubah definisi sumber daya intro_text
untuk menggunakan lebih banyak teks deskriptif, seperti Droid Desserts:
<string id="intro_text">Droid Desserts</string>
- Ubah
TextView
di layout agar menggunakan ukuran teks yang lebih besar 24sp
dan padding 10dp
, dan tambahkan atribut android:id
dengan id textintro
.
- Ekstrak sumber daya dimensi untuk atribut
android:padding
ke nama sumber daya padding_regular
, dan atribut android:textSize
ke sumber daya text_heading
. Anda akan menggunakan nama sumber daya ini di langkah-langkah selanjutnya.
- Tambahkan
TextView
lagi di bawah textintro
TextView
dengan atribut berikut:
Atribut TextView |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:padding |
“@dimen/padding_regular” |
android:id |
“@+id/choose_dessert” |
android:layout_below |
“@id/textintro” |
android:text |
“Choose a dessert.” |
- Ekstrak sumber daya string untuk atribut
android:text
ke nama sumber daya choose_a_dessert
.
6.2 Tambahkan gambar
- Salin file gambar ke dalam folder drawable proyek Anda. Temukan folder drawable di proyek dengan menggunakan jalur ini: project_name > app > src > main > res > drawable
- Buka kembali proyek Anda.
- Buka file content_main.xml lagi dan tambahkan sebuah
ImageView
untuk gambar donat ke layout di bawah tampilan choose_dessert
, menggunakan atribut berikut:
Atribut ImageView untuk donat |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:padding |
“@dimen/padding_regular” |
android:id |
“@+id/donut” |
android:layout_below |
“@id/choose_dessert” |
android:contentDescription |
“Donuts are glazed and sprinkled with candy.” |
android:src |
“@drawable/donut_circle” |
- Ekstrak nilai atribut
android:contentDescription
ke sumber daya string donuts
. Anda akan menggunakan sumber daya string ini di langkah berikutnya.
- Tambahkan
TextView
yang akan muncul di di sebelah gambar donat sebagai deskripsi, atribut berikut:
Atribut TextView |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:padding |
“35dp” |
android:layout_below |
“@+id/choose_dessert” |
android:layout_toRightOf |
“@id/donut” |
android:text |
“@string/donuts” |
- Ekstrak sumber daya dimensi untuk atribut
android:padding
ke nama sumber daya padding_wide
. Anda akan menggunakan nama sumber daya ini di langkah-langkah selanjutnya.
- Tambahkan
ImageView
kedua ke layout untuk sandwich es krim, menggunakan atribut berikut:
Atribut ImageView untuk ice_cream |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:padding |
“@dimen/padding_regular” |
android:id |
“@+id/ice_cream” |
android:layout_below |
“@id/donut” |
android:contentDescription |
“Ice cream sandwiches have chocolate wafers and vanilla filling.” |
android:src |
“@drawable/icecream_circle” |
- Ekstrak nilai atribut
android:contentDescription
ke sumber daya string ice_cream_sandwiches
.
- Tambahkan
TextView
yang akan muncul di di sebelah sandwich es krim sebagai deskripsi, dengan atribut berikut:
Atribut TextView |
Nilai |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:padding |
“@dimen/padding_wide” |
android:layout_below |
“@+id/donut” |
android:layout_toRightOf |
“@id/ice_cream” |
android:text |
“@string/ice_cream_sandwiches” |
6.3 Tambahkan metode onClick untuk tampilan gambar
Tambahkan sumber daya string berikut ke file strings.xml yang akan ditampilkan di pesan toast:
<string name="donut_order_message">You ordered a donut.</string>
<string name="ice_cream_order_message">You ordered an ice cream sandwich.</string>
<string name="froyo_order_message">You ordered a FroYo.</string>
Tambahkan metode displayToast()
berikut untuk menampilkan pesan toast:
Tambahkan metode showFoodOrder()
berikut di akhir MainActivity* (sebelum tanda kurung penutup). Untuk tugas ini, gunakan metode displayToast()
untuk menampilkan pesan toast:
Tambahkan metode berikut di akhir MainActivity (Anda bisa menambahkannya sebelum showFoodOrder()
):
jalankan Appnya
Tugas 7: Menggunakan tombol radio
7.1 Tambahkan aktivitas lain
Klik kanan folder com.example.android.droidcafe di kolom kiri dan pilih New > Activity > Empty Activity. Edit Nama Aktivitas agar menjadi OrderActivity dan Nama Layout menjadi activity_order. Jangan ubah opsi lain, dan klik Finish.
Buka MainActivity. Ubah metode showFoodOrder()
untuk membuat intent eksplisit untuk memulai OrderActivity
:
Jalankan aplikasi. Mengeklik tombol gambar sekarang akan meluncurkan aktivitas kedua, yaitu layar kosong. (Pesan toast muncul sebentar di layar kosong.)
7.2 Tambahkan layout untuk tombol radio
Buka activity_order.xml dan tambahkan elemen TextView
dengan id order_intro_text
:
Atribut TextView |
Nilai |
android:id |
“@+id/order_intro_text” |
android:layout_width |
“match_parent” |
android:layout_height |
“wrap_content” |
android:layout_marginTop |
“24dp” |
android:layout_marginBottom |
“6dp” |
android:textSize |
“18sp” |
android:text |
“Choose a delivery method:” |
- Ekstrak sumber daya string untuk
"Choose a delivery method:"
menjadichoose_delivery_method
.
- Ekstrak sumber daya dimensi untuk nilai margin:
"24dp"
ke text_margin_top
"6dp"
ke text_margin_bottom
"18sp"
ke intro_text_size
-
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="@id/order_intro_text">
</RadioGroup>
-
Atribut #1 RadioButton |
Nilai |
android:id |
“@+id/sameday” |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:text |
“Same day messenger service” |
android:onClick |
“onRadioButtonClicked” |
Atribut #2 RadioButton |
Nilai |
android:id |
“@+id/nextday” |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:text |
“Next day ground delivery” |
android:onClick |
“onRadioButtonClicked” |
Atribut #3 RadioButton |
Nilai |
android:id |
“@+id/pickup” |
android:layout_width |
“wrap_content” |
android:layout_height |
“wrap_content” |
android:text |
“Pick up” |
android:onClick |
“onRadioButtonClicked” |
-
same_day_messenger_service
next_day_ground_delivery
pick_up
7.3 Tambahkan handler klik tombol radio
Buka strings.xml dan buat sumber daya string berikut:
- Sebuah sumber daya yang bernama
chosen
untuk string "Chosen: "
(sertakan spasi setelah titik dua dan tanda tanya).
- Sebuah sumber daya yang bernama nothing_clicked untuk string “
onRadioButtonClicked: Nothing clicked.
”
- Buka OrderActivity dan tambahkan pernyataan berikut untuk mendefinisikan
TAG_ACTIVITY
untuk pesan log
:
- Tambahkan metode
displayToast
berikut ke OrderActivity:
public void displayToast(String message) {
Toast.makeText(getApplicationContext(), message,
Toast.LENGTH_SHORT).show();
}
Tambahkan metode onRadioButtonClicked()
berikut, yang memeriksa untuk melihat apakah tombol radio telah dicentang, dan menggunakan blok switch case
untuk menentukan item tombol radio mana yang dipilih, untuk menyetel message
yang sesuai untuk item tersebut untuk digunakan bersama displayToast()
:
Jalankan aplikasi. Ketuk sebuah pesan untuk melihat aktivitas OrderActivity, yang menampilkan pilihan pengantaran. Ketuk pilihan pengantaran dan Anda akan melihat pesan toast di bagian bawah layar dengan pilihan, seperti yang ditampilkan dalam gambar di bawah ini.