Thursday, May 10, 2012

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 ?
Jika ini sepertinya susah karena yang namanya datepicker pasti besar. 
      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). Untuk selanjutnya kita ikuti langkah-langkah dibawah ini:
  1. Buka Kembali Project Sebelumnya
  2. Edit file main.xml lalu isi dengan code dibawah in
01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    android:orientation="vertical"
04    android:layout_width="fill_parent"
05    android:layout_height="fill_parent"
06    >
07<TextView android:text="Date :" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
08<EditText android:text="" android:id="@+id/txtDate" android:layout_width="fill_parent" android:layout_height="wrap_content" ></EditText>
09<TextView android:text="Time :" android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
10<EditText android:text="" android:id="@+id/txtTime" android:layout_width="fill_parent" android:layout_height="wrap_content" android:editable="false"></EditText>
11</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

001package com.agus.datepicker;
002 
003import java.util.Calendar;
004import android.app.Activity;
005import android.app.DatePickerDialog;
006import android.app.Dialog;
007import android.app.TimePickerDialog;
008import android.os.Bundle;
009import android.view.MotionEvent;
010import android.view.View;
011import android.view.View.OnTouchListener;
012import android.widget.DatePicker;
013import android.widget.EditText;
014import android.widget.TimePicker;
015 
016public class ShowDatePicker extends Activity
017{
018    int hour, minute, mYear,mMonth, mDay;
019    static final int TIME_DIALOG_ID = 0;
020    static final int DATE_DIALOG_ID = 1;
021    private EditText txtDate;
022    private EditText txtTime;
023    private String[] arrMonth = {"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"};
024 
025    @Override
026    protected void onCreate(Bundle savedInstanceState)
027    {
028        super.onCreate(savedInstanceState);
029        setContentView(R.layout.main);
030        txtDate = (EditText) findViewById(R.id.txtDate);
031        txtTime = (EditText) findViewById(R.id.txtTime);
032        // get the current date
033        final Calendar c = Calendar.getInstance();
034        mYear = c.get(Calendar.YEAR);
035        mMonth = c.get(Calendar.MONTH);
036        mDay = c.get(Calendar.DAY_OF_MONTH);
037 
038        txtDate.setOnTouchListener(new OnTouchListener() {
039 
040            @Override
041            public boolean onTouch(View arg0, MotionEvent arg1) {
042                // TODO Auto-generated method stub
043                showDialog(DATE_DIALOG_ID);
044                return true;
045            }
046        });
047 
048        txtTime.setOnTouchListener(new OnTouchListener() {
049 
050            @Override
051            public boolean onTouch(View arg0, MotionEvent arg1) {
052                // TODO Auto-generated method stub
053                showDialog(TIME_DIALOG_ID);
054                return true;
055            }
056        });
057 
058    }
059 
060    @Override
061    protected Dialog onCreateDialog(int id)
062    {
063        switch (id) {
064            case TIME_DIALOG_ID:
065                return new TimePickerDialog(
066                    this, mTimeSetListener, hour, minute, true);
067            case DATE_DIALOG_ID:
068                return new DatePickerDialog(
069                    this, mDateSetListener, mYear, mMonth, mDay);
070        }
071        return null;
072    }
073 
074    private DatePickerDialog.OnDateSetListener mDateSetListener =
075        new DatePickerDialog.OnDateSetListener()
076        {
077 
078        @Override
079        public void onDateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {
080            mYear = year;
081            mMonth = monthOfYear;
082            mDay = dayOfMonth;
083            String sdate = arrMonth[mMonth] + " " + LPad(mDay + "", "0", 2) + ", " + mYear;
084            txtDate.setText(sdate);
085        }
086    };
087 
088    private TimePickerDialog.OnTimeSetListener mTimeSetListener =
089    new TimePickerDialog.OnTimeSetListener()
090    {
091        public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
092        {
093            hour = hourOfDay;
094            minute = minuteOfHour;
095            String stime = LPad(""+hour, "0", 2) + ":"+ LPad(""+hour, "0", 2);
096            txtTime.setText(stime);
097        }
098    };
099 
100    private static String LPad(String schar, String spad, int len) {
101        String sret = schar;
102        for (int i = sret.length(); i < len; i++) {
103            sret = spad + sret;
104        }
105        return new String(sret);
106    }
107}   
    
       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.

01private DatePickerDialog.OnDateSetListener mDateSetListener =
02       new DatePickerDialog.OnDateSetListener()
03       {
04 
05       @Override
06       public void onDateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {
07           mYear = year;
08           mMonth = monthOfYear;
09           mDay = dayOfMonth;
10           String sdate = arrMonth[mMonth] + " " + LPad(mDay + "", "0", 2) + ", " + mYear;
11           txtDate.setText(sdate);
12       }
13   };
          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.
01private TimePickerDialog.OnTimeSetListener mTimeSetListener =
02    new TimePickerDialog.OnTimeSetListener()
03    {
04        public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
05        {
06            hour = hourOfDay;
07            minute = minuteOfHour;
08            String stime = LPad(""+hour, "0", 2) + ":"+ LPad(""+hour, "0", 2);
09            txtTime.setText(stime);
10        }
11    };
          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.

1 comment:

  1. case TIME_DIALOG_ID:
    return new TimePickerDialog(
    this, mTimeSetListener, hour, minute, true);

    case TIME_DIALOG_ID:
    return new TimePickerDialog(
    this, mTimeSetListener, hour, minute, true);

    cara membuat dua time gmn ya ,,,soalnya selalu duplikat mas ...?
    makasih

    ReplyDelete