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 tagEditText
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 -
Buka strings.xml (dalam app > res > values) dan edit nilai
app_name
ke “Keyboard Samples”(pastikan untuk menyertakan spasi antara “Keyboard” dan “Samples”). - Jalankan aplikasi dan periksa cara kerja keyboard.
- Hapus atribut
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 nilaitextPassword
untuk atributandroid: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
Ubah elemen EditText
aktivitas utama agar menampilkan keypad ponsel, bukan keyboard standar:
- Pada elemen
EditText
di file layout activity_main.xml, ubah atributandroid:inputType
menjadi yang berikut:android:inputType="phone"
- Ubah atribut
android:hint
menjadi “Enter a phone number”. - Ekstrak sumber daya string untuk nilai
android:hint
keenter_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 metodeshowText
untuk menampilkan string yang dimasukkan dan item spinner yang dipilih (mSpinnerLabel):
String showString = (editText.getText().toString() + " - " + mSpinnerLabel);
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 dalamtap_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 dalamalert_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 metodeonClickShowAlert()
keMainActivity.java
seperti berikut: Setel judul dan pesan untuk dialog peringatan dalamonClickShowAlert()
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 menggunakanonClickListener()
: - Ekstrak sumber daya string untuk
"OK"
dan untuk"Pressed OK"
. Pernyataan sekarang seharusnya menjadi: - Tambahkan tombol Cancel pada peringatan dengan
setNegativeButton()
danonClickListener()
, 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 akhironClickShowAlert()
:... // 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 menjadiLinearLayout
dan tambahkanandroid:orientation="vertical"
-
Ubah teks elemen
TextView
pertama ke “Choose the date and time: “ dan ekstrak teks ke sumber daya stringchoose_datetime
.Atribut TextView Nilai Lama Nilai Baru android:text “Hello World” “@string/choose_datetime” -
Tambahkan atribut
android:textSize
dan masukkan ukuran teks 20sp. Ekstrak dimensiandroid:textSize
ketext_size
.Atribut TextView Nilai Lama Nilai Baru android:textSize “@dimen/text_size” - Ekstrak string
"Date"
ke dalam sumber daya stringdate_button
. - Ekstrak dimensi
"12dp"
untukandroid:layout_marginTop
kebutton_top_margin
. -
Tambahkan elemen
Button
kedua di dalam turunanRelativeLayout
atribut berikut: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 stringtime_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 memperluasDialogFragment
dan dan implementasikanDatePickerDialog.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) {
...
}
Tambahkan kode berikut ke onCreateDialog()
untuk membuat instance year
, month
, dan day
dari Calendar
, dan mengembalikan dialog dan nilai ini ke aktivitas utama. Saat Anda memasukkan Calendar
, tetapkan import menjadi java.util.Calendar
.
@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 kosongonTimeSet()
, menggantionCreateView()
denganonCreateDialog()
, dan menghapus konstruktor publik untukTimePickerFragment
.
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
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"
diTextView
untuk menggunakan nama sumber dayaintro_text
. Lalu buka strings.xml dan ubah definisi sumber dayaintro_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 besar24sp
dan padding10dp
, dan tambahkan atributandroid:id
dengan idtextintro
. - Ekstrak sumber daya dimensi untuk atribut
android:padding
ke nama sumber dayapadding_regular
, dan atributandroid:textSize
ke sumber dayatext_heading
. Anda akan menggunakan nama sumber daya ini di langkah-langkah selanjutnya. - Tambahkan
TextView
lagi di bawahtextintro
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 dayachoose_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 tampilanchoose_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 stringdonuts
. 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 dayapadding_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 stringice_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()
):
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"
ketext_margin_top
"6dp"
ketext_margin_bottom
"18sp"
keintro_text_size
-
Tambahkan
RadioGroup
ke layout di bawahTextView
yang baru saja Anda tambahkan:<RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_below="@id/order_intro_text"> </RadioGroup>
-
Tambahkan tiga elemen
RadioButton
berikut di dalamRadioGroup
menggunakan atribut berikut. Entri"onRadioButtonClicked"
untuk atributonClick
akan disorot sampai Anda menambahkan metode tersebut di tugas berikutnya.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” -
Ekstrak tiga sumber daya string untuk atribut
android:text
ke nama-nama berikut, sehingga string bisa dengan mudah diterjemahkan: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 pesanlog
: - 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.