Tutorial android – Membuat DatePicker dan TimePicker bagian 2

Pada tutorial yang lalu kita telah membuat datepicker dengan android, tetapi masih ada yang perlu dipoles.

Kita menghadapi masalah datepicker yang terlau besar dan berpotensi membuat tampilan tidak bagus.

Pertanyaan yang mungkin muncul adalah bagaimana cara mengecilkan datepicker ?

Kalau ini sepertinya susah karena yang namanya datepicker pasti besar. Wah kalau gitu gimana dong solusinya ?

Aha, saya ada ide, bagaimana kalau kita gunakan textbox yang apabila diklik atau disentuh akan memunculkan datepicker dan setelah  diser datepickernya hilang dan nilainya otomatis terset ke textbox (edittext).

Wah boleh juga tuh idenya, yuk kita mulai kodingnya

1. Buka Kembali Project Sebelumnya
2. Edit file main.xml lalu isi dengan code dibawah in

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView android:text="Date :" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<EditText android:text="" android:id="@+id/txtDate" android:layout_width="fill_parent" android:layout_height="wrap_content" ></EditText>
<TextView android:text="Time :" android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<EditText android:text="" android:id="@+id/txtTime" android:layout_width="fill_parent" android:layout_height="wrap_content" android:editable="false"></EditText>
</LinearLayout>

Perhatikan pada main.xml tidak ada lagi tag datepicker dan TimePicker, lho kalau nggak ada gimana cara munculkan datepickernya. Itulah enaknya koding android, rahasianya ada di kode selanjutnya.

3. Edit ShowDatePicker.java, isikan dengan kode berikut

package com.agus.datepicker;

import java.util.Calendar;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

public class ShowDatePicker extends Activity
{
    int hour, minute, mYear,mMonth, mDay;
    static final int TIME_DIALOG_ID = 0;
    static final int DATE_DIALOG_ID = 1;
    private EditText txtDate;
	private EditText txtTime;
	private String[] arrMonth = {"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"};

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        txtDate = (EditText) findViewById(R.id.txtDate);
		txtTime = (EditText) findViewById(R.id.txtTime);
		// get the current date
	    final Calendar c = Calendar.getInstance();
	    mYear = c.get(Calendar.YEAR);
	    mMonth = c.get(Calendar.MONTH);
	    mDay = c.get(Calendar.DAY_OF_MONTH);

        txtDate.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View arg0, MotionEvent arg1) {
				// TODO Auto-generated method stub
				showDialog(DATE_DIALOG_ID);
				return true;
			}
        });

        txtTime.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View arg0, MotionEvent arg1) {
				// TODO Auto-generated method stub
				showDialog(TIME_DIALOG_ID);
				return true;
			}
        });

    }

    @Override
    protected Dialog onCreateDialog(int id)
    {
        switch (id) {
            case TIME_DIALOG_ID:
                return new TimePickerDialog(
                    this, mTimeSetListener, hour, minute, true);
            case DATE_DIALOG_ID:
                return new DatePickerDialog(
                    this, mDateSetListener, mYear, mMonth, mDay);
        }
        return null;
    }

    private DatePickerDialog.OnDateSetListener mDateSetListener =
        new DatePickerDialog.OnDateSetListener()
        {

		@Override
		public void onDateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {
			mYear = year;
			mMonth = monthOfYear;
			mDay = dayOfMonth;
			String sdate = arrMonth[mMonth] + " " + LPad(mDay + "", "0", 2) + ", " + mYear;
			txtDate.setText(sdate);
		}
	};

    private TimePickerDialog.OnTimeSetListener mTimeSetListener =
    new TimePickerDialog.OnTimeSetListener()
    {
        public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
        {
            hour = hourOfDay;
            minute = minuteOfHour;
            String stime = LPad(""+hour, "0", 2) + ":"+ LPad(""+hour, "0", 2);
            txtTime.setText(stime);
        }
    };

	private static String LPad(String schar, String spad, int len) {
		String sret = schar;
		for (int i = sret.length(); i < len; i++) {
			sret = spad + sret;
		}
		return new String(sret);
	}
}

Karena kita ingin agar pada saat txtDate disentuh itu muncul dialog datepicker maka kita harus memasang OnTouchListener agar dapat menangkap event ontouch yang akan memanggil mehod yang menampilkan dialog DatePicker, berikut kode untuk dialog DatePickernya.

 private DatePickerDialog.OnDateSetListener mDateSetListener =
        new DatePickerDialog.OnDateSetListener()
        {

		@Override
		public void onDateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {
			mYear = year;
			mMonth = monthOfYear;
			mDay = dayOfMonth;
			String sdate = arrMonth[mMonth] + " " + LPad(mDay + "", "0", 2) + ", " + mYear;
			txtDate.setText(sdate);
		}
	};

disini kita langsung menset tanggal yang muncul pada DatePicker adalah tanggal hari ini.

Nantinya pada dialog ini akan muncul tombo Set dan Cancel pada saat tombol cancel diset, dialog akan hilang tetapi isinya akan di set ke txtDate.

Demikian juga pada txtTime kita juga harus memasang OnTouchListener agar bisa menangkap event ontouch untuk menampilkan dialog TimePicker, berikut kode untuk dialog TimePickernya.

private TimePickerDialog.OnTimeSetListener mTimeSetListener =
    new TimePickerDialog.OnTimeSetListener()
    {
        public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
        {
            hour = hourOfDay;
            minute = minuteOfHour;
            String stime = LPad(""+hour, "0", 2) + ":"+ LPad(""+hour, "0", 2);
            txtTime.setText(stime);
        }
    };

Nantinya pada dialog ini akan muncul tombo Set dan Cancel pada saat tombol cancel diset, dialog akan hilang tetapi isinya akan di set ke txtTime.

Pada kode diatas kita juga menambahkan method LPad yang gunanya adalah apabila kita memilih  Tanggal 01, jika kita ingin tetap 01 yang tampil di txtDate maka kita harus menggunakan LPad. Kalau kita tidak menggunakan LPad maka yang tampil di txtDate adalah 1

4. Mari kita jalankan programnya.

Sekarang sentuh inputan Date

Untuk merubah tanggal, bulan dan tahun bisa menekan + dan – setelah sudah sesuai dengan keinginan kita, klik tombol Set, maka isi dari DatePicker tadi akan diset ke inputan Date

Untuk inputan Time, cara kerjanya sama dengan inputan Date.

Bagi seorang developer, kita tidak hanya harus berfokus pada fungsi tetapi juga harus memperhatikan sisi user interface yang merupakan bagian yang beriteraksi langsung dengan user.

Semoga Bermanfaat dan Salam Hangat

Agus Haryanto

sumber :

http://developer.android.com