View video tutorial
ANDROID TimePicker
ANDROID
The Android TimePicker is a widget and UI element used to select the time.
Android TimePicker
➔ The Android TimePicker widget allows users to select the time of day in 12-hour mode or 24-hour mode.
➔ TimePicker provides two display modes.
➔ Clock mode: Shows an analog style clock interface for time selection.
➔ Spinner mode: Shows hour and minute values in a scrollable spinner for time selection.
➔ TimePicker can be implemented in Android applications using one of the following methods. Using XML Widget, using Material 3 Time Picker, or using Jetpack Compose.
Android TimePicker Implementation using XML Widget
➔ TimePicker in XML activity_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TimePicker
android:id="@+id/timepicker"
android:layout_width="409dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintVertical_bias="0.653" />
</androidx.constraintlayout.widget.ConstraintLayout>
➔ Change the time in the timepicker.
Set a listener (setOnTimeChangedListener) on timepicker object in the MainActivity.java file.
package com.example.myapplication;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import java.util.Locale;
public class MainActivity extends AppCompatActivity {
TimePicker timepicker;
Button button;
int h, m;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
timepicker = (TimePicker) findViewById(R.id.timepicker);
button = (Button) findViewById(R.id.button);
timepicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
@Override
public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
h = hourOfDay;
m = minute;
button.setText(String.format(Locale.getDefault(), "%02d : %02d", h, m));
}
});
}
}
➔ Output
Android TimePicker Implementation using TimePickerDialog
➔ TimePicker in XML activity_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Select Time"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
➔ Change the time in the timepicker.
Set a listener (setOnTimeChangedListener) on timepicker object in the MainActivity.java file.
package com.example.myapplication;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import java.util.Locale;
public class MainActivity extends AppCompatActivity {
Button button;
int h, m;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showTimePicker(v);
}
});
}
public void showTimePicker(View v) {
TimePickerDialog.OnTimeSetListener myListener = new TimePickerDialog.OnTimeSetListener() {
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
h = hourOfDay;
m = minute;
button.setText(String.format(Locale.getDefault(), "%02d : %02d", h, m));
}
};
TimePickerDialog myTimePickerDilog = new TimePickerDialog(this, myListener, h, m, true);
myTimePickerDilog.setTitle("Select Time");
myTimePickerDilog.show();
}
}
➔ Output
