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

26 comments to Tutorial android – Membuat DatePicker dan TimePicker bagian 2

  • Fruztazie

    bang agus…saya mau nanya donk….itu kalau misalnya saya mau melakukan perhitungan terhadap tanggal yang sudah di input, kondisi nya gmn yah? truz syntax nya seperti apa?

    ex :
    27 januari akan ditambahkan 14 hari, maka hasil nya 10 februari.
    pembuatan kondisi dan syntax nya seperti apa?

  • anda jadi inspirator saya mas..,

  • horiz

    mas pertanyaan saya sama dengan Fruztazie, saya minta contoh perhitungan tanngal dari input yang sudah dimasukan.. tolong ya mas.. plz d jwb

  • info yang bagus, ini yang saya butuhkan, makasi mas.. saya baru mulai belajar android, di tunggu tutorial selanjutnya πŸ˜€

  • Irvan Ahadi

    //to mas Fruztazie
    //coba buat method baru aja mas,(misal : method nambah)

    public void nambah(int c){
    Calendar cal = Calendar.getInstance();
    System.out.println(“Sebelum = ” + cal.getTime());
    cal.add(Calendar.DAY_OF_MONTH, c);
    System.out.println(“Sesudah = ” + cal.getTime());
    }
    //semoga bener jawabannya,,
    //lagi belajar juga soalnya,,hehe

  • brianlasta

    Maap mas Admin, di bagian=
    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);
    }
    };
    itu maksudnya:
    String stime = LPad(“”+hour, “0”, 2) + “:”+ LPad(“”+hour, “0”, 2);
    atau
    String stime = LPad(“”+hour, “0”, 2) + “:”+ LPad(“”+minute, “0”, 2);

    maap klo salah atau sok tau, masih newbie. hehe

  • widhia

    mas, klo mau munculin dihome gma yah,?, da sintaknya gi ga?

  • shinta

    mas mau tanya klo ini beneran mau dibikin reminder alarm gitu. gimana ya?
    Thanks in advance πŸ™‚

  • geby

    Mas.. cara buat reminder alarm dari datepicker dan timepicker gmn ya mas?
    Makasih mas πŸ™‚

  • gulit

    mas ..pengen nanya ni..kl kita ingin ambil jam/ tangggal smartphone kita gmna ya mas..mohon pencerahaan nya…terima kasih

  • firman

    saya juga mau tanya seperti mas fruztazie…
    tolong di jawab ya mas Agus

  • Fikri

    Bang agus, kalau membuat aplikasi alarm ngasih script audionya di sebelah mana y (u/date n timepicker nya)?
    bisa kasih ex g?
    please guru ..

  • terima kasih kak agus sangat berguna untuk aplikasi yang saya lagi buat, lagi belajar newbie

  • anna

    mas boleh buatkan contoh untuk kasus yang ini
    ex :
    27 januari akan ditambahkan 14 hari, maka hasil nya 10 februari.

  • Annas

    Pak Agus.. kok saya erordi LPadnya ya?

  • ari

    kan tutorial di atas, ketika kita pilih edittext, maka akan muncul DatePicker nya. nah bagaimana kalo yg mau dimunculin itu Spinner? bisa ato ga? makasih (maklum masi newbie) πŸ™‚

  • Ramontrie Alhabsyi (@Ramontrie)

    bang klo cara simpan datepicker ke database mysql gmna bang..?? thnxs πŸ™‚

  • ayik

    mas,misal pengen buat reminder barang expired gimana..misal ada peringatan “barang A akan expired 2 hari kemudian”
    terima kasih

  • Agus Haryanto

    @Ade, perlu tricky untuk hal ini dan itu hanya kita bisa lakukan kalau kita mengerti java

  • Andrew

    Thank u mas AGus, sangat bermanfaat ilmunya πŸ˜€

  • rama

    Mas.. cara buat reminder alarm dari datepicker dan timepicker gmn ya mas?
    Makasih mas πŸ™‚

  • rama

    Mas.. cara buat reminder alarm dari datepicker dan timepicker gmn ya mas?
    Makasih mas πŸ™‚
    tolong balasannya di email saya rama_shura@rocketmail.com

  • angga

    Berkaitan dengan timepicker, saya mau tanya kalau membuat aplikasi pengingat alarm. semisal pengingat jam makan dimana hp kita akan berbunyi setiap jam makan pagi, siang, dan malam itu gimana ya mas?

    sekiranya berkenan bisa dibalas ke email saya angga.progrest@gmail.com

    =update=
    Oalah pertanyaan saya rupanya sama dengan pertanyaan rama diatas saya ^^ πŸ™‚

  • angga

    sama mau tanya kalo mau nampilkan tanggal hari ini atau tanggal sistem gmana ya sintaknya ?
    Trims

  • Mas, ada yang tau gak buat alarm menggunakan PHP berdasarkan tanggal input di database.
    contohnya jika pas tanggal 22-12-2014 maka ada pemberitahuan di Monitor kita bisa berupa pesan atau audio.
    yang penting bisa muncul pesan

  • Ardhito Yanuar

    Mas,aplikasinya sudah saya coba dan berjalan lancar,terimakasih tutorialnya
    Saya ingin bertanya,bagaimana ya mas caranya agar aplikasi tersebut bisa diinputkan kedalam database SQLite atau database lainnya?
    Trims

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>