4.1. Menggunakan Keyboard, Kontrol Masukan, Peringatan, dan Picker

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.

  1. Buat proyek baru yang bernama Keyboard Samples, dan pilih template Empty Activity.
  2. Buka file layout activity_main.xml untuk mengedit kode XML.
  3. 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”
  4. 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.
  5. Ubah elemen TextView yang sudah ada seperti berikut:
    1. Hapus atribut android:text yang menetapkan “Hello World!”.
    2. Ubah tag TextView menjadi tag EditText dan pastikan tag diakhiri dengan />.
    3. 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”

    4. Ekstrak sumber daya string untuk nilai atribut android:hint “Enter a message” ke nama sumber daya enter.
    5. Buka MainActivity.java dan masukkan metode showText berikut, yang mengambil informasi yang dimasukkan ke dalam elemen EditText dan menampilkannya di dalam pesan toast 
    6. Buka strings.xml (dalam app > res > values) dan edit nilai app_name ke “Keyboard Samples”(pastikan untuk menyertakan spasi antara “Keyboard” dan “Samples”).

    7. Jalankan aplikasi dan periksa cara kerja keyboard.

1.2 Setel keyboard untuk menjadikan huruf besar di awal kalimat

Tambahkan atribut android:inputType ke elemen EditTextmenggunakan 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

  1. Ubah elemen EditText untuk menggunakan nilai textPassworduntuk atribut android:inputType.
    android:inputType="textPassword"
    
  2. Ubah android:hint menjadi “Enter your password”.
  3. 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:

  1. Pada elemen EditText di file layout activity_main.xml, ubah atribut android:inputType menjadi yang berikut:
    android:inputType="phone"
    
  2. Ubah atribut android:hint menjadi “Enter a phone number”.
  3. Ekstrak sumber daya string untuk nilai android:hint ke enter_phone.
  4. 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.

  1. Setelah mengoptimalkan kode, ubah nilai ” di file strings.xml (di dalam app > res > values) menjadi Phone Number Spinner (berikut spasinya) sebagai nama aplikasi.
  2. Bukan file layout activity_main.xml.

Kurung elemen EditText dan Button yang ada dari pelajaran sebelumnya di dalam LinearLayoutdengan 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 (HomeWorkMobile, 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 MainActivityAnda 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.

  1. Tambahkan MainActivity.class.getSimpleName() agar menggunakan nama sederhana kelas untuk TAG:
private static final String TAG = MainActivity.class.getSimpleName();
  1. Ubah pernyataan String showString di metode showText untuk menampilkan string yang dimasukkan dan item spinner yang dipilih (mSpinnerLabel):
String showString = (editText.getText().toString() + " - " + mSpinnerLabel);

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

  1. Buat proyek baru bernama Alert Sample berdasarkan template Empty Activity.
  2. Bukan layout activity_main.xml dan buat perubahan berikut:
    Atribut TextView Nilai
    android:id “@+id/top_message”
    android:text “Tap to test the alert:”
  3. Ekstrak string android:text di atas ke dalam tap_test sumber daya untuk membuatnya lebih mudah diterjemahkan
  4. 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”
  5. Ekstrak string android:text di atas ke dalam alert_button 
  6. 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:
  7. Ekstrak judul dan pesan ke dalam sumber daya string. Baris kode sebelumnya sekarang seharusnya menjadi:
  8. Tambahkan tombol OK pada peringatan dengan setPositiveButton() dan menggunakan onClickListener():
  9. Ekstrak sumber daya string untuk "OK" dan untuk "Pressed OK". Pernyataan sekarang seharusnya menjadi:
  10. Tambahkan tombol Cancel pada peringatan dengan setNegativeButton() dan onClickListener(), tampilkan pesan toast jika tombol diklik, lalu batalkan dialog:
  11. Ekstrak sumber daya string untuk "Cancel" dan "Pressed Cancel". Pernyataan sekarang seharusnya menjadi:
  12. 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

  1. Mulai proyek baru yang bernama Date Time Pickers menggunakan template Empty Activity.
  2. Buka activity_main.xml untuk mengedit kode layout,Ubah induk RelativeLayout agar menjadi LinearLayout dan tambahkan android:orientation="vertical"
  3. Ubah teks elemen TextView pertama ke “Choose the date and time: “ dan ekstrak teks ke sumber daya string choose_datetime.

    +
    Atribut TextView Nilai Lama Nilai Baru
    android:text “Hello World” “@string/choose_datetime”
  4. Tambahkan atribut android:textSize dan masukkan ukuran teks 20sp. Ekstrak dimensi android:textSize ke text_size.

    Atribut TextView Nilai Lama Nilai Baru
    android:textSize “@dimen/text_size”

  5. Ekstrak string "Date" ke dalam sumber daya string date_button.
  6. Ekstrak dimensi "12dp" untuk android:layout_marginTop ke button_top_margin.
  7. Tambahkan elemen Button kedua di dalam turunan RelativeLayout 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 string time_button

5.2 Buat fragmen baru untuk picker tanggal

  1. Luaskan app > java > com.example.android.DateTimePickers dan pilih MainActivity.
  2. Pilih File > New > Fragment > Fragment (Blank), dan beri nama fragmen DatePickerFragment.
  3. Buka DatePickerFragment dan edit definisi kelas DatePickerFragment untuk memperluas DialogFragment dan dan implementasikan DatePickerDialog.OnDateSetListener untuk membuat picker tanggal standar dengan sebuah listener.
  4. 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 yearmonth, 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

  1. Pilih MainActivity lagi.
  2. 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.
  3. 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 FragmentManageruntuk 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

  1. Mulai proyek Android Studio baru dengan nama aplikasi Droid Cafe. Pilih template Basic Activity, terima setelan default, dan klik Finish.
  2. Proyek terbuka dengan dua layout dalam folder res > layoutactivity_main.xml, dan content_main.xml.
  3. 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>
    
    
  4. Ubah TextView di layout agar menggunakan ukuran teks yang lebih besar 24sp dan padding 10dp, dan tambahkan atribut android:id dengan id textintro.
  5. 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.
  6. 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.”
  7. Ekstrak sumber daya string untuk atribut android:text ke nama sumber daya choose_a_dessert.

6.2 Tambahkan gambar

  1. 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
  2. Buka kembali proyek Anda.
  3. 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”

  4. Ekstrak nilai atribut android:contentDescription ke sumber daya string donuts. Anda akan menggunakan sumber daya string ini di langkah berikutnya.
  5. 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”
  6. 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.
  7. 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”
  8. Ekstrak nilai atribut android:contentDescription ke sumber daya string ice_cream_sandwiches.
  9. 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:”
  1. Ekstrak sumber daya string untuk "Choose a delivery method:"menjadichoose_delivery_method.
  2. Ekstrak sumber daya dimensi untuk nilai margin:
  3. "24dp" ke text_margin_top
  4. "6dp" ke text_margin_bottom
  5. "18sp" ke intro_text_size

  1. Tambahkan RadioGroup ke layout di bawah TextView 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>
  2. Tambahkan tiga elemen RadioButton berikut di dalam RadioGroupmenggunakan atribut berikut. Entri "onRadioButtonClicked" untuk atribut onClick 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”
  3. 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:

  1. Sebuah sumber daya yang bernama chosen untuk string "Chosen: "(sertakan spasi setelah titik dua dan tanda tanya).
  2. Sebuah sumber daya yang bernama nothing_clicked untuk string “onRadioButtonClicked: Nothing clicked.
  3. Buka OrderActivity dan tambahkan pernyataan berikut untuk mendefinisikan TAG_ACTIVITY untuk pesan log:
  4. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *