Cara Membuat Date Range Picker Android – Halo devandro! Pada tutorial pemrograman android kali ini saya ingin membagikan bagaimana cara membuat date range picker android. Maksudnya date range picker ini bagaimana ? Biasanya date range picker ini ditemui pada kasus fitur date booking gitu seperti di Traveloka ataupun aplikasi travel lainnya. Di tutorial pemrograman android ini kita akan memakai sebuah library dan sedikit di kustom oleh kita. Nama library date range picker android ini adalah SublimePicker dari user github vikramkakkar, untuk link github library resminya devandro bisa menuju ke link ini : vikramkakkar/SublimePicker.
Kutipan readme SublimePicker :
A customizable view that provisions picking of a date, time & recurrence option, all from a single user-interface. You can also view ‘SublimePicker’ as a collection of material-styled (API 23) DatePicker, TimePicker & RecurrencePicker, backported to API 14.
With the release of version 2, SublimePicker now allows date-range selection.
All three components have been converted to views, which enables us to add/embed them anywhere – add them to a ‘Dialog’, a ‘PopupWindow’, or use them as any regular android widget.
Almost all styling possibilities have been exposed through attrs. If something has been missed, please bring it to my attention.
SublimePicker provides a single point of entry to all three pickers. What I mean is that once SublimePicker is available for interaction, the user can select a date, a time & a recurrence option without leaving the picker.
Mungkin itu deskripsi sekilas tentang tutorial pemrograman android kali ini. Agar tidak berpanjang lebar lagi, yuk disimak dan dipelajari cara membuat date range picker android ini.
Pertama,
Buatlah sebuah project dengan nama SampleDateRangePicker.
Kedua,
Buatlah empty activity dan namakan activity tersebut dengan DateRangePickerActivity.
Ketiga,
Buka build.gradle (module:app) lalu tambahkan library SumblimePicker tersebut. Untuk kodenya adalah seperti ini :
1 | implementation 'com.appeaser.sublimepickerlibrary:sublimepickerlibrary:2.1.1' |
Untuk full source code di build.gradle (module:app) seperti ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | apply plugin: 'com.android.application' android { compileSdkVersion 26 buildToolsVersion "26.0.2" defaultConfig { applicationId "com.farizdotid.tutorialfarizdotid" minSdkVersion 16 targetSdkVersion 26 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) //noinspection GradleCompatible implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support.constraint:constraint-layout:1.0.2' implementation 'com.android.support:design:26.1.0' implementation 'com.android.support:support-vector-drawable:26.1.0' implementation 'com.android.support:support-v4:26.1.0' implementation 'com.android.support:cardview-v7:26.1.0' implementation 'com.android.support:recyclerview-v7:26.1.0' implementation 'com.jakewharton:butterknife:8.8.1' implementation 'com.github.bumptech.glide:glide:4.2.0' implementation 'com.appeaser.sublimepickerlibrary:sublimepickerlibrary:2.1.1' testImplementation 'junit:junit:4.12' annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1' annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0' } |
Keempat,
Buka activity_date_range_picker.xml lalu tambahkan komponen berikut ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp" tools:context="com.farizdotid.tutorialfarizdotid.daterangepicker.DateRangePickerActivity"> <Button android:id="@+id/btnOpenCalendar" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="open calendar" android:background="@color/colorPrimaryDark" android:textColor="@android:color/white"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:textSize="20sp" android:text="START DATE : " android:fontFamily="sans-serif-condensed" android:textColor="@android:color/black"/> <TextView android:id="@+id/tvStartDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" tools:text="15 Februari 2018" android:fontFamily="sans-serif-light" android:textColor="@android:color/black"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:textSize="20sp" android:text="END DATE : " android:fontFamily="sans-serif-condensed" android:textColor="@android:color/black"/> <TextView android:id="@+id/tvEndDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" tools:text="20 Februari 2018" android:fontFamily="sans-serif-light" android:textColor="@android:color/black"/> </LinearLayout> |
Kelima,
Buatlah sebuah class baru dengan nama SublimePickerFragment dan ber-extends DialogFragment. Nah disini sudah saya sedikit custom codenya karena kebutuhan kita hanya untuk Date Range Picker saja. Untuk kode yang ada di SublimePickerFragment seperti ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | public class SublimePickerFragment extends DialogFragment { DateFormat mDateFormatter, mTimeFormatter; SublimePicker mSublimePicker; Callback mCallback; SublimeListenerAdapter mListener = new SublimeListenerAdapter() { @Override public void onCancelled() { if (mCallback!= null) { mCallback.onCancelled(); } dismiss(); } @Override public void onDateTimeRecurrenceSet(SublimePicker sublimeMaterialPicker, SelectedDate selectedDate, int hourOfDay, int minute, SublimeRecurrencePicker.RecurrenceOption recurrenceOption, String recurrenceRule) { if (mCallback != null) { mCallback.onDateTimeRecurrenceSet(selectedDate, hourOfDay, minute, recurrenceOption, recurrenceRule); } dismiss(); } }; public SublimePickerFragment() { // Initialize formatters mDateFormatter = DateFormat.getDateInstance(DateFormat.MEDIUM, Locale.getDefault()); mTimeFormatter = DateFormat.getTimeInstance(DateFormat.SHORT, Locale.getDefault()); mTimeFormatter.setTimeZone(TimeZone.getTimeZone("GMT+0")); } // Set activity callback public void setCallback(Callback callback) { mCallback = callback; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mSublimePicker = (SublimePicker) getActivity().getLayoutInflater().inflate(R.layout.sublime_picker, container); // Retrieve SublimeOptions Bundle arguments = getArguments(); SublimeOptions options = null; // Options can be null, in which case, default // options are used. if (arguments != null) { options = arguments.getParcelable("SUBLIME_OPTIONS"); } mSublimePicker.initializePicker(options, mListener); return mSublimePicker; } // For communicating with the activity public interface Callback { void onCancelled(); void onDateTimeRecurrenceSet(SelectedDate selectedDate, int hourOfDay, int minute, SublimeRecurrencePicker.RecurrenceOption recurrenceOption, String recurrenceRule); } } |
Keenam,
Buka DateRangePickerActivity lalu jangan lupa untuk inisialisasi komponen yang sudah kita buat. Lalu tambahkan juga String mDateStart dan String mDateEnd. String ini berfungsi untuk menyimpan value yang kita set dari start date dan end date range picker.
1 2 3 4 5 6 7 8 9 10 11 | @BindView(R.id.btnOpenCalendar) Button btnOpenCalendar; @BindView(R.id.tvStartDate) TextView tvStartDate; @BindView(R.id.tvEndDate) TextView tvEndDate; String mDateStart; String mDateEnd; Unbinder unbinder; |
Ketujuh,
Buatlah sebuah method dengan nama openDateRangePicker lalu tambahkan kode berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | private void openDateRangePicker(){ SublimePickerFragment pickerFrag = new SublimePickerFragment(); pickerFrag.setCallback(new SublimePickerFragment.Callback() { @Override public void onCancelled() { Toast.makeText(DateRangePickerActivity.this, "User cancel", Toast.LENGTH_SHORT).show(); } @Override public void onDateTimeRecurrenceSet(final SelectedDate selectedDate, int hourOfDay, int minute, SublimeRecurrencePicker.RecurrenceOption recurrenceOption, String recurrenceRule) { @SuppressLint("SimpleDateFormat") SimpleDateFormat formatDate = new SimpleDateFormat("dd MMMM yyyy"); mDateStart = formatDate.format(selectedDate.getStartDate().getTime()); mDateEnd = formatDate.format(selectedDate.getEndDate().getTime()); // set date start ke textview tvStartDate.setText(mDateStart); // set date end ke textview tvEndDate.setText(mDateEnd); } }); // ini configurasi agar library menggunakan method Date Range Picker SublimeOptions options = new SublimeOptions(); options.setCanPickDateRange(true); options.setPickerToShow(SublimeOptions.Picker.DATE_PICKER); Bundle bundle = new Bundle(); bundle.putParcelable("SUBLIME_OPTIONS", options); pickerFrag.setArguments(bundle); pickerFrag.setStyle(DialogFragment.STYLE_NO_TITLE, 0); pickerFrag.show(getSupportFragmentManager(), "SUBLIME_PICKER"); } |
Kedelapan,
Didalam onCreate lalu tambahkan kode berikut :
1 2 3 4 5 6 7 8 9 10 | ButterKnife.bind(this); unbinder = ButterKnife.bind(this); btnOpenCalendar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { openDateRangePicker(); } }); |
Untuk full source code di DateRangePickerActivity seperti ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | public class DateRangePickerActivity extends AppCompatActivity { @BindView(R.id.btnOpenCalendar) Button btnOpenCalendar; @BindView(R.id.tvStartDate) TextView tvStartDate; @BindView(R.id.tvEndDate) TextView tvEndDate; String mDateStart; String mDateEnd; Unbinder unbinder; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_date_range_picker); ButterKnife.bind(this); unbinder = ButterKnife.bind(this); btnOpenCalendar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { openDateRangePicker(); } }); } private void openDateRangePicker(){ SublimePickerFragment pickerFrag = new SublimePickerFragment(); pickerFrag.setCallback(new SublimePickerFragment.Callback() { @Override public void onCancelled() { Toast.makeText(DateRangePickerActivity.this, "User cancel", Toast.LENGTH_SHORT).show(); } @Override public void onDateTimeRecurrenceSet(final SelectedDate selectedDate, int hourOfDay, int minute, SublimeRecurrencePicker.RecurrenceOption recurrenceOption, String recurrenceRule) { @SuppressLint("SimpleDateFormat") SimpleDateFormat formatDate = new SimpleDateFormat("dd MMMM yyyy"); mDateStart = formatDate.format(selectedDate.getStartDate().getTime()); mDateEnd = formatDate.format(selectedDate.getEndDate().getTime()); // set date start ke textview tvStartDate.setText(mDateStart); // set date end ke textview tvEndDate.setText(mDateEnd); } }); // ini configurasi agar library menggunakan method Date Range Picker SublimeOptions options = new SublimeOptions(); options.setCanPickDateRange(true); options.setPickerToShow(SublimeOptions.Picker.DATE_PICKER); Bundle bundle = new Bundle(); bundle.putParcelable("SUBLIME_OPTIONS", options); pickerFrag.setArguments(bundle); pickerFrag.setStyle(DialogFragment.STYLE_NO_TITLE, 0); pickerFrag.show(getSupportFragmentManager(), "SUBLIME_PICKER"); } @Override protected void onDestroy() { super.onDestroy(); unbinder.unbind(); } } |
Kesembilan,
Silahkan jalankan aplikasi devandro! Aplikasi akan muncul seperti ini :
Download project Cara Membuat Date Range Picker Android
[sociallocker]
[/sociallocker]
BACA JUGA :
Membuat Session Login Logout Menggunakan SharedPreferences Android
Sekian artikel tutorial pemrograman android mengenai Cara Membuat Date Range Picker Android. Semoga bermanfaat dan jika ada kesulitan atau ada yang bingung bisa berkomentar artikel ini. Hatur Nuhun!
