Menampilkan TimePicker Menggunakan Dialog

Meskipun kita bisa menampilkan 'TimePicker' pada activity, tetapi lebih baik bila ditampilkan dalam jendela dialog; dengan begitu, setelah waktu di-set, dia akan menghilang dan tidak menempati area di dalam activity. Berikut adalah latihan menampilkan 'TimePicker' menggunakan jendela dialog.

1. Kita masih gunakan project yang seperti latihan sebelumnya untuk kita modifikasi.

2. Praktik yang baik untuk menampilkan TimePicker dengan Dialog adalah dengan membuat class terpisah yang menurunkan classs 'DialogFragment' untuk menampilkan Dialog. Kita akan buat class java ini dan kita beri nama 'TimePickerDF.java' dengan kode seperti berikut:
package id.co.blogspot.diansano.viewdasar4;

import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.widget.TimePicker;
import android.widget.Toast;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

public class TimePickerDF extends DialogFragment
implements TimePickerDialog.OnTimeSetListener {

@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
/*men-set waktu default utk picker*/
Calendar cal = Calendar.getInstance();
int hour = cal.get(Calendar.HOUR);
int minute = cal.get(Calendar.MINUTE);
return new TimePickerDialog(
getActivity(), this, hour, minute, false);
}

public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
{
int hour = hourOfDay;
int minute = minuteOfHour;

SimpleDateFormat timeFormat = new SimpleDateFormat("hh:mm aa");
Calendar c = Calendar.getInstance();
c.set(Calendar.HOUR, hour);
c.set(Calendar.MINUTE, minute);
Date time = c.getTime();
//Date date = new Date(0,0,0, hour, minute);
String strDate = timeFormat.format(time);

Toast.makeText(getActivity(),
"Anda sudah memilih " + strDate, Toast.LENGTH_SHORT).show();
}
}
3. Kita modifikasi file "MainActivity.java" seperti berikut:
package id.co.blogspot.diansano.viewdasar4;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

FragmentManager fm = getSupportFragmentManager();
TimePickerDF timePickerDF = new TimePickerDF();
//TimePicker timePicker;

// int hour, minute;
// static final int TIME_DIALOG_ID = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);

//timePicker = (TimePicker) findViewById(R.id.timePicker);
//timePicker.setIs24HourView(true);
timePickerDF.show(fm, "Time Picker Dialog");

//showDialog(TIME_DIALOG_ID);
}

/*
@Override
protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
}
return null;
}

private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay;
minute = minuteOfHour;

SimpleDateFormat timeFormat = new SimpleDateFormat("hh:mm aa");
Calendar c = Calendar.getInstance();
c.set(Calendar.HOUR, hour);
c.set(Calendar.MINUTE, minute);
Date time = c.getTime();
//Date date = new Date(0,0,0, hour, minute);
String strDate = timeFormat.format(time);

Toast.makeText(getBaseContext(),
"Anda sudah memilih " + strDate, Toast.LENGTH_SHORT).show();
}
};

public void onClick(View view) {
if (Build.VERSION.SDK_INT >= 23) {
Toast.makeText(getBaseContext(), "Waktu yang dipilih:" +
timePicker.getHour() + ":" + timePicker.getMinute(),
Toast.LENGTH_LONG).show();
} else {
Toast.makeText(getBaseContext(), "Waktu yang dipilih:" +
timePicker.getCurrentHour() + ":" + timePicker.getCurrentMinute(),
Toast.LENGTH_LONG).show();
}
}*/

}
4. Jalankan di emulator Android Studio seperti gambar berikut:



Penjelasan:

Untuk membuat 'TimePicker' developer Google menyarankan supaya dijalankan pada 'DialogFragment' karena siklus hidup Dialog akan otomatis ditangani oleh DialogFragment. 

Praktik yang baik adalah dengan membuat class terpisah dengan 'extends' class 'DialogFragment' dan kemudian 'implements' interface 'TimePickerDialog.OnTimeSetListener' seperti berikut:
public class TimePickerDF extends DialogFragment
implements TimePickerDialog.OnTimeSetListener {
....
}
Berikutnya adalah melakukan override pada method 'onCreateDialog()' untuk mengembalikan object dari class 'TimePickerDialog' seperti berikut:
@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
/*men-set waktu default utk picker*/
Calendar cal = Calendar.getInstance();
int hour = cal.get(Calendar.HOUR);
int minute = cal.get(Calendar.MINUTE);

/*buat instans object TimePickerDialog dan kembalikan hasilnya*/
return new TimePickerDialog(
getActivity(), this, hour, minute, false);
}
Ketika user men-klik tombol pada TimePicker, method 'onTimeSet()' dipanggil:
public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
{
int hour = hourOfDay;
int minute = minuteOfHour;

Calendar c = Calendar.getInstance();
c.set(Calendar.HOUR, hour);
c.set(Calendar.MINUTE, minute);
Date time = c.getTime();
String strDate = new SimpleDateFormat("hh:mm").format(time);

Toast.makeText(getActivity(),
"Anda sudah memilih " + strDate, Toast.LENGTH_SHORT).show();
}
Di dalam method 'onTimeSet()' kita memodifikasi format waktu untuk ditampilkan dengan string.

Berikutnya, dalam file "MainActivity.java" kita akan menampilkan dialog yang ada di class terpisah TimePickerDF.java (class DialogFragment). Untuk menampilkannya kita akan menggunakan method 'show()' dari class DialogFragment. Jadi disini kita akan membuat instans terlebih dahulu dari class TimePickerDF.java (yang sudah menerapkan extends 'DialogFragment') dengan kode berikut di awal:
TimePickerDF timePickerDF = new TimePickerDF();
Dengan demikian kita akan memanggil method 'show()' dengan kode seperti berikut:
timePickerDF.show(fm, "Dialog");

Method 'show()' di atas memerlukan dua parameter, yang pertama adalah objek 'FragmentManager' dan yang kedua adalah tag yang berupa 'string'.

Karena method 'show()' memerlukan objek 'FragmentManager' maka kita harus terlebih dahulu membuat instans objek dari class 'FragmentManager' yang sudah kita lakukan di atas dengan kode berikut:
FragmentManager fm = getSupportFragmentManager();
Catatan:
Hampir semua kode dalam file "MainActivity.java" di atas di-komentarkan supaya lebih jelas menunjukkan bahwa setelah dialog menghilang, activity terlihat kosong karena memang tidak ada kode yang di-load. 

No comments: