Last Updated on 8 years by Mas Herdi
Melanjutkan tutorial series kita tentang komponen-komponen layout basic di Android. Bagi pemula yang ingin belajar membuat aplikasi menggunakan dengan Android Studio, tidak ada salahnya untuk mengenal komponen DatePicker, karena ke depannya kalian pasti akan butuh menggunakan komponen DatePicker ini. Yup sesuai namanya, DatePicker berfungsi untuk membantu user memilih tanggal yang diinginkan di aplikasi Android.
Pada penerapannya, DatePicker banyak digunakan pada aplikasi yang membutuhkan penginputan tanggal. Seperti aplikasi pemesanan tiket, aplikasi reminder, to do list dan sebagainya.
Belajar Membuat DatePicker di Android dengan Android Studio
Sebelumnya saya sarankan kalian untuk membaca tutorial-tutorial di bawah ini terlebih dahulu:
Pre-Requisites
Setelah kalian membuat project baru di Android Studio, buka activity_main.xml dan masukkan kode berikut. Pada main layout akan berisi sebuah Button yang ketika diklik akan memunculkan DatePicker dialog ini, dan sebuah TextView untuk menampilkan tanggal yang dipilih di DatePicker.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:gravity="center_horizontal|center_vertical" android:layout_height="match_parent"> <Button android:id="@+id/bt_datepicker" android:text="Show DatePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Tanggal dipilih : " android:id="@+id/tv_dateresult" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
Kemudian, kalian bisa buka file MainActivity.java dan mengisikan kode seperti di bawah ini :
import android.app.DatePickerDialog; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.DatePicker; import android.widget.TextView; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Locale; /** * Created by Herdi_WORK on 20.01.17. */ public class MainActivity extends AppCompatActivity { private DatePickerDialog datePickerDialog; private SimpleDateFormat dateFormatter; private TextView tvDateResult; private Button btDatePicker; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /** * Kita menggunakan format tanggal dd-MM-yyyy * jadi nanti tanggal nya akan diformat menjadi * misalnya 01-12-2017 */ dateFormatter = new SimpleDateFormat("dd-MM-yyyy", Locale.US); tvDateResult = (TextView) findViewById(R.id.tv_dateresult); btDatePicker = (Button) findViewById(R.id.bt_datepicker); btDatePicker.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { showDateDialog(); } }); } private void showDateDialog(){ /** * Calendar untuk mendapatkan tanggal sekarang */ Calendar newCalendar = Calendar.getInstance(); /** * Initiate DatePicker dialog */ datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() { @Override public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) { /** * Method ini dipanggil saat kita selesai memilih tanggal di DatePicker */ /** * Set Calendar untuk menampung tanggal yang dipilih */ Calendar newDate = Calendar.getInstance(); newDate.set(year, monthOfYear, dayOfMonth); /** * Update TextView dengan tanggal yang kita pilih */ tvDateResult.setText("Tanggal dipilih : "+dateFormatter.format(newDate.getTime())); } },newCalendar.get(Calendar.YEAR), newCalendar.get(Calendar.MONTH), newCalendar.get(Calendar.DAY_OF_MONTH)); /** * Tampilkan DatePicker dialog */ datePickerDialog.show(); } }
Pada kode di atas, ada beberapa hal yang harus diset sebelum kita menampilkan DatePicker dialog, seperti format tanggalnya (menggunakan SimpleDateFormat), dan tanggal yang dimunculkan ketika DatePicker pertama kali ditampilkan, kita set tanggalnya ke tanggal saat ini menggunakan object Calendar.
Demo
Jika sudah kalian bisa langsung menjalankan aplikasinya.
Oke, pada gambar di atas sebelah kiri adalah ketika aplikasi pertama kali dijalankan. Ketika DatePicker ditampilkan, maka akan langsung set ke tanggal sekarang (20 Januari 2017 saat artikel ini ditulis).
Setelah itu kita set tanggalnya ke 31 Januari 2017 kemudian klik OK. Maka dialog DatePicker akan tertutup dan tampil tanggal yang dipilih pada TextView.
That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀
Permisi sebelumnya terima kasih atas tutorialnya cuman saya ingin bertanya cara mengganti background warna date pickernya bagaimana?
Permisi sebelumnya terima kasih atas tutorialnya cuman saya ingin bertanya cara mengganti background warna date pickernya bagaimana??
mbak yang script ini
tvDateResult.setText(“Tanggal Dipilih : “+dateFormatter.format(newDate.getTime()));
itu tvDateResultnya ko error ya kesalahan saya dimna ya kira”,,??
Coba cek di GitHub aja mas 🙂 https://github.com/twoh/twoh-android-layout-basic
cara menambahakan tanggal merah libur nasional gimana ya?