Tutorial Cara Membuat TimePicker di Android Studio

Last Updated on 8 years by Mas Herdi

Hi Guys! Melanjutkan tutorial series kita tentang komponen-komponen layout basic di Android. Kali ini kita akan belajar komponen widget di Android yang bernama TimePicker, mirip dengan DatePicker, TimePicker berfungsi untuk membantu user memilih waktu yang diinginkan untuk diinputkan pada aplikasi Android.

Dalam penerapannya, TimePicker banyak digunakan pada aplikasi Alarm, calendar, reminder, to-do list, ticket reservation dan aplikasi lainnya yang membutuhkan user untuk menginputkan waktu (jam dan menit) di aplikasi tersebut.

Belajar Membuat TimePicker di Android dengan Android Studio

Sebelum lanjut ke tutorial TimePicker, saya sarankan kalian untuk membaca tutorial-tutorial di bawah ini terlebih dahulu:

Pre-Requisites

• Membuat Project Hello World di Android
• Tutorial Android Dasar untuk Pemula
• Tutorial Membuat DatePicker di Android

Setelah selesai membuat project baru di Android Studio, buka activity_main.xml dan masukkan kode berikut. Main layout akan berisi sebuah Button yang ketika diklik akan memunculkan TimePicker dialog, dan sebuah TextView untuk menampilkan waktu yang dipilih di TimePicker.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center_horizontal|center_vertical"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bt_showtimepicker"
        android:text="Show TimePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:text="Waktu dipilih : "
        android:id="@+id/tv_timeresult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Kemudian, kalian bisa buka file MainActivity.java dan mengisikan kode seperti di bawah ini :

import android.app.TimePickerDialog;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.text.format.DateFormat;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

/**
 * Created by Hafizh Herdi on 1/21/2017.
 */

public class MainActivity extends AppCompatActivity {

    private TextView tvTimeResult;
    private Button btTimePicker;
    private TimePickerDialog timePickerDialog;

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

        tvTimeResult = (TextView) findViewById(R.id.tv_timeresult);
        btTimePicker = (Button) findViewById(R.id.bt_showtimepicker);
        btTimePicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showTimeDialog();
            }
        });
    }

    private void showTimeDialog() {

        /**
         * Calendar untuk mendapatkan waktu saat ini
         */
        Calendar calendar = Calendar.getInstance();

        /**
         * Initialize TimePicker Dialog
         */
        timePickerDialog = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                /**
                 * Method ini dipanggil saat kita selesai memilih waktu di DatePicker
                 */
                tvTimeResult.setText("Waktu dipilih = "+hourOfDay+":"+minute);
            }
        },
                /**
                 * Tampilkan jam saat ini ketika TimePicker pertama kali dibuka
                 */
                calendar.get(Calendar.HOUR_OF_DAY), calendar.get(Calendar.MINUTE),

                /**
                 * Cek apakah format waktu menggunakan 24-hour format
                 */
                DateFormat.is24HourFormat(this));

        timePickerDialog.show();
    }
}

Pada kode di atas, ada beberapa hal yang harus diset sebelum kita menampilkan TimePicker dialog, seperti waktu yang ingin dimunculkan ketika TimePicker pertama kali ditampilkan dan apakah ingin menggunakan 24 hour format atau AM/PM format. Pada tutorial ini kita set waktu di TimePicker ke waktu saat ini menggunakan object Calendar, dan hour format nya kita sesuaikan dengan format waktu di HP Android yang digunakan.

Demo

Beginilah tampilan aplikasinya ketika kita jalankan.

TimePicker android sample

Di atas adalah tampilan ketika kita memilih jam di TimePicker. Sebelah kiri dengan format AM/PM. Dan sebelah kanan dengan format 24-hours.

TimePicker android sample

Sebelah kiri adalah tampilan saat memilih menit di TimePicker, dan sebelah kanan adalah tampilan waktu yang kita pilih, ketika kita klik tombol “OK” di TimePicker.

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀