Tutorial Dan Contoh Android TimePicker

Kontrol Android TimePicker UI dapat digunakan untuk memungkinkan pengguna memilih waktu dalam aplikasi Android. Menggunakan TimePicker, aplikasi bisa mendapatkan waktu yang valid dan terformat dengan baik. Kontrol TimePicker dapat disediakan dengan menggunakan widget TimePickerDialog atau TimePicker.

Dalam posting ini, Anda dapat belajar menggunakan TimePicker, TimePickerDialog, widget TimePicker, gaya materi TimePicker, gaya kustom TimePicker, penanganan event TimePicker, mode jam TimePicker, dan mode pemintal TimePicker.

Android TimePickerDialog Example

Untuk menampilkan TimePicker menggunakan TimePickerDialog, Anda perlu membuat fragmen dengan memperluas kelas DialogFragment dan menerapkan metode onCreateDialog. Dalam metode onCreateDialog, Anda perlu memberi tahu TimePickerDialog pengaturan waktu saat ini dan mengembalikannya.

Dalam aktivitas di mana Anda perlu menunjukkan TimePicker, Anda perlu instantiated Fragmen dan menunjukkannya dalam menanggapi acara pengguna seperti klik tombol.

Fragmen dialog TimePicker

 package dialog.zoftino.com.dialog;


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

import java.util.Calendar;

public class MyTimePickerFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        return new TimePickerDialog(getActivity(), timeSetListener, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    private TimePickerDialog.OnTimeSetListener timeSetListener =
            new TimePickerDialog.OnTimeSetListener() {
                public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                    Toast.makeText(getActivity(), "selected time is "
                            + view.getHour() +
                            " / " + view.getMinute()
                            , Toast.LENGTH_SHORT).show();
                }
            };
}
 

Aktivitas

 public class MainActivity extends AppCompatActivity {

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

    public void showTimePickerDialog(View v) {
        DialogFragment newFragment = new MyTimePickerFragment();
        newFragment.show(getSupportFragmentManager(), "time picker");
    }
} 

Contoh keluaran TimePickerDialog

Penanganan acara Android TimePickerDialog

Untuk menangani acara TimePickerDialog, Anda perlu mengimplementasikan antarmuka TimePickerDialog.OnTimeSetListener yang memiliki callback onTimeSet yang dipanggil setiap kali pengguna mengambil waktu menggunakan TimePicker. Anda dapat menambahkan timeSetListener ke TimePickerDialog dengan meneruskannya ke konstruktor seperti yang ditunjukkan dalam kode fragmen dialog di atas.

Contoh Widget TimePicker

Alih-alih TimePickerDialog, Anda dapat menggunakan widget TimePicker untuk menyediakan kontrol TimePicker di aplikasi Anda. Anda dapat menentukan TimePicker dalam tata letak xml menggunakan elemen TimePicker seperti yang ditunjukkan di bawah ini.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="Time Picker Widget"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"  />
</android.support.constraint.ConstraintLayout>
 

Dalam aktivitas ini, Anda bisa mendapatkan objek TimePicker dan mengatur waktu mengubah pendengar dengan memanggil metode setOnTimeChangedListener dan meneruskan TimePicker.OnTimeChangedListener ke dalamnya. Antarmuka TimePicker.OnTimeChangedListener memiliki satu metode callback onTimeChanged, dalam metode ini Anda bisa mendapatkan waktu yang dipilih pengguna.

 public class TimePickerWidgetActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.timepicker);

        TimePicker tp = findViewById(R.id.timePicker);
        tp.setOnTimeChangedListener(timeChangedListener);
    }
    private TimePicker.OnTimeChangedListener timeChangedListener =
            new TimePicker.OnTimeChangedListener(){
                @Override
                public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                    Toast.makeText(TimePickerWidgetActivity.this,
                            "picked time is " + view.getHour() +
                            " / " + view.getMinute()
                            , Toast.LENGTH_SHORT).show();
                }
            };

}
 

Contoh keluaran widget TimePicker

Mode Android TimePicker

TimePicker dapat digunakan dalam dua mode: mode clock dan spinner. Jika Anda menggunakan tema material, mode TimePicker default adalah jam. Gambar di atas menunjukkan TimePicker dalam mode jam. Anda dapat mengubah pengaturan default menggunakan android: atribut timePickerMode. Dibutuhkan jam atau spinner sebagai nilai. Di bawah gambar menunjukkan TimePicker dalam mode spinner.

Gaya Material Kustom Android TimePicker

Tingkat aplikasi gaya bahan TimePicker

Anda dapat mengubah warna pemetik waktu dengan menentukan warna khusus dalam tema aplikasi khusus Anda seperti yang ditunjukkan di bawah ini dan menetapkannya sebagai tema aplikasi. Perubahan warna ini tidak hanya berdampak pada TimePicker tetapi juga kontrol lainnya di seluruh aplikasi.

 <style name="MyAppThemeThree" parent="Theme.AppCompat.Light">
    <item name="colorAccent">#b71c1c</item>
    <item name="colorControlActivated">#558b2f</item>
    <item name="android:selectableItemBackgroundBorderless">@color/colorPrimaryDark</item>
</style> 

Untuk mengubah warna hanya kontrol TimePicker di seluruh aplikasi, Anda harus terlebih dahulu menentukan gaya TimePicker khusus dan menetapkannya sebagai tema untuk pemilih waktu dalam tema aplikasi Anda seperti yang ditunjukkan di bawah ini.

<style name="MyAppThemeFour" parent="Theme.AppCompat.Light">
    <item name="android:timePickerDialogTheme">@style/MyTimePickerDialogStyle</item>
</style>
<style name="MyTimePickerDialogStyle" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="showTitle">false</item>
<item name="colorControlActivated">#ffd600</item>
<item name="colorAccent">#b71c1c</item>
<item name="android:textColorPrimary">#43a047</item>
<item name="android:textColorSecondary">#f44336</item>
</style> 

Gaya kustom widget Android TimePicker

Android menyediakan Widget.Material.TimePicker dan Widget.Material.Light.TimePicker material styles untuk widget TimePicker. Anda dapat menyesuaikan dan menerapkan gaya ini ke TimePicker seperti yang ditunjukkan di bawah ini.

<style name="MyTimePickerWidgetStyle" parent="@android:style/Widget.Material.TimePicker">
    <item name="android:headerBackground">#ffe082</item>
    <item name="android:numbersTextColor">#b71c1c</item>
    <item name="android:numbersInnerTextColor">#f44336</item>
    <item name="android:numbersSelectorColor">#33691e</item>
    <item name="android:numbersBackgroundColor">#ef9a9a</item>
    <item name="android:amPmTextColor">#9c27b0</item>
</style>

Menerapkan materi kustom ke TimePicker.

<TimePicker
    android:id="@+id/timePicker"
    android:theme="@style/MyTimePickerWidgetStyle"
    style="@style/MyTimePickerWidgetStyle"
    . . . />

Output dari gaya materi kustom TimePicker.

Android TimePicker Spinner Custom Color

Untuk mengubah warna pembagi pilihan TimePicker spinner, tentukan properti colorControlNormal dalam gaya kustom Anda dan menerapkannya ke TimePicker.

KEEP CODING ~

Share this post