-->

Tutorial Android Date Time Picker Dialog

Android Date Time picker banyak digunakan dalam aplikasi android. Dalam tutorial ini kita akan belajar penggunaan Picker Tanggal dan Timer Picker Dialog dalam aplikasi android. Komponen ini digunakan untuk memilih tanggal dan waktu dalam antarmuka pengguna disesuaikan. Kami akan menggunakan DatePickerDialog dan TimePickerDialog class dengan Calendar class dalam kode aplikasi android.

Android DatePickerDialog dan TimePickerDialog

Meskipun Date Picker dan Time Picker dapat digunakan sebagai widget independen tetapi mereka menempati lebih banyak ruang pada layar. Oleh karena itu menggunakan mereka dalam sebuah Dialog adalah pilihan yang lebih baik. Untungnya android memberikan gunakan dengan DatePickerDialog dan TimePickerDialog class sendiri.
DatePickerDialog dan TimePickerDialog Class memiliki onDateSetListener() dan onTimeSetListener()metode callback masing-masing. Metode callback ini dipanggil ketika pengguna dilakukan dengan mengisi tanggal dan waktu masing-masing.
Kelas DatePickerDialog terdiri dari konstruktor 5 argumen dengan parameter yang tercantum di bawah.
  1. Konteks: Hal ini membutuhkan konteks aplikasi
  2. Fungsi callback: onDateSet() dipanggil ketika pengguna menetapkan tanggal dengan parameter berikut:
    • int years: Ini akan menyimpan tahun dipilih dari dialog
    • int monthOfYear: Ini akan menyimpan bulan yang dipilih dari dialog
    • int dayOfMonth: Ini akan menyimpan hari yang dipilih dari dialog
  3. int mTahun: Ini menunjukkan tahun berjalan yang terlihat saat dialog muncul
  4. int mBulan: Ini menunjukkan bulan berjalan yang terlihat saat dialog muncul
  5. int mHari: Ini menunjukkan hari ini yang terlihat saat dialog muncul
Class TimePickerDialog terdiri dari konstruktor 5 argumen dengan parameter yang tercantum di bawah.
  1. Konteks: Hal ini membutuhkan konteks aplikasi
  2. Fungsi callback: onTimeSet() dipanggil ketika pengguna mengatur waktu dengan parameter berikut:
    • int hourOfDay: Ini akan menyimpan jam yang dipilih saat hari dari dialog
    • int minute: Ini akan menyimpan menit yang dipilih saat ini dari dialog
  3. int mJam: Ini menunjukkan Jam saat ini yang terlihat saat dialog muncul
  4. int mMenit: Ini menunjukkan menit saat itulah terlihat saat dialog muncul
  5. boolean false: Jika set ke false itu akan menunjukkan waktu dalam format 24 jam lain tidak
Berikut langkah-langkah sederhana, bagaimana untuk membuat aplikasi Android sendiri menggunakan Time Picker.

Membuat Project Android

1. Pada Android Studio, buatlah project baru.
     => Jika Anda tidak memiliki sebuah project, di layar Welcome klik New Project.
     => Jika Anda telah membuka project, dari menu File, pilih New Project.

    2. Pada Configure your new project, isi kolom berikut seperti di bawah ini.
     => Application name ⇒ TimePicker
     => Company domain ⇒ example.com (Misalnya: com.megadistudio.TimePicker)
     => Project Location ⇒ memilih lokasi untuk project Anda.

    3. Pada Select the form factors your app will run oncentang untuk Phone and Tablet.
     => Untuk Minimum SDK, pilih API 10: Android 2.3.3 (Gingerbread). klik Next.

    4. Pada Add an activity to Mobile, pilih Blank Activity dan klik Next.
    Next ->

    5. Klik tombol Finish untuk membuat project.
    6. Pilih View Anda sebagai Project, Buka file layout untuk kegiatan utama (activity_main.xml) terletak di bawah App  res ⇒ layout.


    activity_main.xml 
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="timepicker.megadistudio.com.timepicker.MainActivity">


    <TextView
    android:text="@string/tk"
    android:textSize="50sp"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/textView2" />

    <ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:srcCompat="@drawable/tk"
    android:layout_below="@+id/textView2"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"
    android:id="@+id/imageView" />

    <TextView
    android:text=""
    android:textStyle="bold"
    android:textSize="20sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageView"
    android:layout_alignLeft="@+id/textView2"
    android:layout_alignStart="@+id/textView2"
    android:layout_marginLeft="41dp"
    android:layout_marginStart="41dp"
    android:layout_marginTop="66dp"
    android:id="@+id/txtDate" />

    <Button
    android:text="Waktu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/buttonTime"
    android:layout_alignBaseline="@+id/txtTime"
    android:layout_alignBottom="@+id/txtTime"
    android:layout_alignLeft="@+id/buttonDate"
    android:layout_alignStart="@+id/buttonDate"
    android:textAllCaps="false" />

    <TextView
    android:text=""
    android:textSize="20sp"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="21dp"
    android:id="@+id/txtTime"
    android:layout_below="@+id/buttonDate"
    android:layout_alignLeft="@+id/txtDate"
    android:layout_alignStart="@+id/txtDate" />

    <Button
    android:text="Tanggal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/buttonDate"
    android:layout_alignBaseline="@+id/txtDate"
    android:layout_alignBottom="@+id/txtDate"
    android:layout_alignRight="@+id/textView2"
    android:layout_alignEnd="@+id/textView2"
    android:layout_marginRight="39dp"
    android:layout_marginEnd="39dp"
    android:textAllCaps="false" />

    </RelativeLayout>

    7.  Buka string.xml terletak di app ⇒ res ⇒ value dan copy kode di bawah ini.

    string.xml
    <resources>
    <string name="app_name">TimePicker</string>
    <string name="tk">Tahu Koding</string>
    </resources>

    8. Sekarang Buka MainActivity.java terletak di app ⇒ src ⇒ Java dan copy kode di bawah ini.

    MainActivity.java 
    package timepicker.megadistudio.com.timepicker;

    import android.app.Activity;
    import android.app.DatePickerDialog;
    import android.app.TimePickerDialog;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.DatePicker;
    import android.widget.TextView;
    import android.widget.TimePicker;

    import java.util.Calendar;

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnDate, btnTime;
    private TextView txtDate, txtTime;
    private int mTahun, mBulan, mHari, mJam, mMenit;

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

    btnDate = (Button) findViewById(R.id.buttonDate);
    btnTime = (Button) findViewById(R.id.buttonTime);
    txtDate =(TextView) findViewById(R.id.txtDate);
    txtTime =(TextView) findViewById(R.id.txtTime);

    btnDate.setOnClickListener(this);
    btnTime.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
    if (v == btnDate) {

    final Calendar c = Calendar.getInstance();
    mTahun = c.get(Calendar.YEAR);
    mBulan = c.get(Calendar.MONTH);
    mHari = c.get(Calendar.DAY_OF_MONTH);

    DatePickerDialog datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener(){

    @Override
    public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {

    txtDate.setText(dayOfMonth + "-" + (month + 1) + "-" + year);

    }
    },mTahun,mBulan,mHari);

    datePickerDialog.show();

    }

    if(v == btnTime){

    final Calendar c = Calendar.getInstance();
    mJam = c.get(Calendar.HOUR_OF_DAY);
    mMenit = c.get(Calendar.MINUTE);

    TimePickerDialog timePickerDialog = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener(){

    @Override
    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
    txtTime.setText(hourOfDay + ":" + minute);
    }
    },mJam,mMenit, false);

    timePickerDialog.show();

    }

    }
    }

    Untuk menjalankan aplikasi dari Android Studio , klik Run ikon dari toolbar.


    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel