Implement customized TimePicker in Android using SnapTimePicker
Android TimePicker is a user interface control for selecting the time in either 24-hour format or AM/PM mode. It is used to ensure that users pick a valid time for the day in the application. The default TimePicker can be customized by using the SnapTimePicker in Android.
Some features of SnapTimePicker are:
- Selectable time range support.
- Text and color customization.
- IOS Time Picker like with Material Design style.
Approach
- Step 1: Add the support Library in build.gradle file and add dependency in the dependencies section.
implementation 'com.akexorcist:snap-time-picker:1.0.0'
- Step 2: Add the following code in string.xml file in values directory. In this file add all string used in the app. These string can be referenced from app or some other resource files(such as XML layout).
string.xml
<
resources
>
<
string
name
=
"app_name"
>GFG | SnapTimePicker</
string
>
<
string
name
=
"title"
>Please select the time</
string
>
<
string
name
=
"selected_time_prefix"
>Your selected time is</
string
>
<!-- %1$s:%2$s will add the string in HH:MM format
for more understanding follow the link at the end -->
<
string
name
=
"selected_time_format"
>%1$s:%2$s</
string
>
<!-- >> means >> for more understanding follow
the link at the end -->
<
string
name
=
"time_prefix"
>>></
string
>
<!-- << means << for more understanding follow
the link at the end -->
<
string
name
=
"time_suffix"
><<</
string
>
</
resources
>
- Step 3: Add the following code in activity_main.xml file. In this file add the Buttons to select the time and the TextView to display the selected time.
activity_main.xml
<?
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"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<
LinearLayout
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:layout_marginTop
=
"24dp"
android:orientation
=
"vertical"
android:padding
=
"30dp"
app:layout_constraintEnd_toEndOf
=
"parent"
app:layout_constraintHorizontal_bias
=
"0.0"
app:layout_constraintStart_toStartOf
=
"parent"
app:layout_constraintTop_toTopOf
=
"parent"
>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:text
=
"Your selected time is"
android:textSize
=
"16sp"
/>
<
TextView
android:id
=
"@+id/selectedTime"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:textSize
=
"20sp"
/>
</
LinearLayout
>
<
Button
android:id
=
"@+id/defaultTimePicker"
android:layout_width
=
"200dp"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"center_horizontal"
android:layout_marginStart
=
"104dp"
android:layout_marginBottom
=
"112dp"
android:text
=
"Default Time Picker"
android:textAllCaps
=
"false"
app:layout_constraintBottom_toTopOf
=
"@+id/customTimePicker"
app:layout_constraintEnd_toEndOf
=
"parent"
app:layout_constraintHorizontal_bias
=
"0.0"
app:layout_constraintStart_toStartOf
=
"parent"
/>
<
Button
android:id
=
"@+id/customTimePicker"
android:layout_width
=
"200dp"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"center_horizontal"
android:layout_marginStart
=
"104dp"
android:layout_marginBottom
=
"212dp"
android:text
=
"Custom Time Picker"
android:textAllCaps
=
"false"
app:layout_constraintBottom_toBottomOf
=
"parent"
app:layout_constraintStart_toStartOf
=
"parent"
/>
</
androidx.constraintlayout.widget.ConstraintLayout
>
- Step 4: Add the following code in MainActivity.kt file. In this file add
onClickListener()
method to the buttons so that whenever user click on them a TimePicker dialog will be created.MainActivity.kt
package
com.madhav.maheshwari.snaptimepicker
import
android.os.Bundle
import
androidx.appcompat.app.AppCompatActivity
import
com.akexorcist.snaptimepicker.SnapTimePickerDialog
import
kotlinx.android.synthetic.main.activity_main.*
class
MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super
.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
defaultTimePicker.setOnClickListener {
// Default TimePicker
SnapTimePickerDialog.Builder().apply {
setTitle(R.string.title)
setTitleColor(android.R.color.white)
}.build().apply {
setListener {
// when the user select time onTimePicked
// function get invoked automatically which
// sets the time in textViewTime.
hour, minute ->
onTimePicked(hour, minute)
}
}.show(
supportFragmentManager,
SnapTimePickerDialog.TAG
)
}
customTimePicker.setOnClickListener {
// Custom TimePicker
SnapTimePickerDialog.Builder().apply {
setTitle(R.string.title)
setPrefix(R.string.time_prefix)
setSuffix(R.string.time_suffix)
setThemeColor(R.color.colorAccent)
setTitleColor(android.R.color.black)
}.build().apply {
setListener {
// when the user select time onTimePicked
// function get invoked automatically which
// sets the time in textViewTime.
hour, minute ->
onTimePicked(hour, minute)
}
}.show(
supportFragmentManager,
SnapTimePickerDialog.TAG
)
}
}
private
fun onTimePicked(selectedHour: Int, selectedMinute: Int) {
// Pads the string to the specified length
// at the beginning with the specified
// character or space.
val hour = selectedHour.toString()
.padStart(
2
,
'0'
)
val minute = selectedMinute.toString()
.padStart(
2
,
'0'
)
selectedTime.text = String.format(
getString(
R.string.selected_time_format,
hour, minute
)
)
}
}
- SnapTimePicker can be customized according to the requirements.
- It is very easy to use.
- It gives IOS feel of an app.
Output: Run on Emulator
Advantages:
The advantages of using SnapTimePicker over simple TimePicker are: