TimePicker in Android
TimePicker Dialog is used in many applications where we have to book appointments based on a specific time. This widget is seen in the applications where we have to select specific time slots. In this article, we will take a look at How to use TimePicker Dialog on Android.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/idRLContainer" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" tools:context = ".MainActivity" > <!--on below line we are creating a text for our app--> < TextView android:id = "@+id/idTVHeading" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_above = "@id/idTVSelectedTime" android:layout_centerInParent = "true" android:layout_margin = "20dp" android:gravity = "center" android:padding = "10dp" android:text = "Time Picker Dialog in Android" android:textAlignment = "center" android:textColor = "@color/black" android:textSize = "20sp" android:textStyle = "bold" /> <!--on below line we are creating a text view--> < TextView android:id = "@+id/idTVSelectedTime" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_above = "@id/idBtnPickTime" android:layout_centerInParent = "true" android:layout_margin = "20dp" android:gravity = "center" android:padding = "10dp" android:text = "Time" android:textAlignment = "center" android:textColor = "@color/black" android:textSize = "20sp" android:textStyle = "bold" /> <!--on below line we are creating a button for date picker--> < Button android:id = "@+id/idBtnPickTime" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_centerInParent = "true" android:layout_margin = "20dp" android:text = "Pick Time" android:textAllCaps = "false" /> </ RelativeLayout > |
Step 3: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the code below. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject import android.app.TimePickerDialog import android.os.Bundle import android.widget.Button import android.widget.TextView import androidx.appcompat.app.AppCompatActivity import java.util.* class MainActivity : AppCompatActivity() { // on below line we are creating a variable. lateinit var pickTimeBtn: Button lateinit var selectedTimeTV: TextView override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing our variables. pickTimeBtn = findViewById(R.id.idBtnPickTime) selectedTimeTV = findViewById(R.id.idTVSelectedTime) // on below line we are adding click // listener for our button pickTimeBtn.setOnClickListener { // on below line we are getting // the instance of our calendar. val c = Calendar.getInstance() // on below line we are getting our hour, minute. val hour = c.get(Calendar.HOUR_OF_DAY) val minute = c.get(Calendar.MINUTE) // on below line we are initializing // our Time Picker Dialog val timePickerDialog = TimePickerDialog( this , { view, hourOfDay, minute -> // on below line we are setting selected // time in our text view. selectedTimeTV.setText( "$hourOfDay:$minute" ) }, hour, minute, false ) // at last we are calling show to // display our time picker dialog. timePickerDialog.show() } } } |
Java
package com.gtappdevelopers.kotlingfgproject; import android.app.TimePickerDialog; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; import android.widget.TimePicker; import androidx.appcompat.app.AppCompatActivity; import java.util.Calendar; public class MainActivity extends AppCompatActivity { // on below line we are creating variables. private Button pickTimeBtn; private TextView selectedTimeTV; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line we are initializing our variables. pickTimeBtn = findViewById(R.id.idBtnPickTime); selectedTimeTV = findViewById(R.id.idTVSelectedTime); // on below line we are adding click // listener for our pick date button pickTimeBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // on below line we are getting the // instance of our calendar. final Calendar c = Calendar.getInstance(); // on below line we are getting our hour, minute. int hour = c.get(Calendar.HOUR_OF_DAY); int minute = c.get(Calendar.MINUTE); // on below line we are initializing our Time Picker Dialog TimePickerDialog timePickerDialog = new TimePickerDialog(MainActivity. this , new TimePickerDialog.OnTimeSetListener() { @Override public void onTimeSet(TimePicker view, int hourOfDay, int minute) { // on below line we are setting selected time // in our text view. selectedTimeTV.setText(hourOfDay + ":" + minute); } }, hour, minute, false ); // at last we are calling show to // display our time picker dialog. timePickerDialog.show(); } }); } } |
Now run your application to see the output of it.
Output:
Contact Us