TimePicker in Android – Implementation and Overview

TimePicker in Android – Implementation and Overview

TimePicker provides a UI to select time. There are two modes that are available, one is through using the standard clock like interface and the other is the spinner type to choose in hours:minutes:seconds format.

""</strong in our layout file.

<TimePicker
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Default attributes are layout_height and layout_width. Other important attributes are given below

TimePicker – Attributes

  1. android:timePickerMode – This takes two values, spinner/clock. The output screen is given above.
  2. android:id – Provide a unique id for the time picker
  3. android:background – Provide a background color
  4. android:padding/android:margin – Provide padding and margin to the view

Play around with the properties, you can also set a custom theme to the Time picker as well.

TimePicker – Activity Implementation

Some of the important public methods associated with the TimePicker class is given below.

  1. setCurrentHour(Integer) – Sets a hour to the Time Picker
  2. getCurrentHour() – Gets the time from the clock (Used with spinner in particular to get the value the user sets)
  3. setCurrentMinute(Integer) – Self explanatory, Sets the Minute hand of the time picker
  4.  getCurrentMinute() – Self explanatory, gets the minute set by the user from the Time Picker
  5. setIs24HourView(Boolean) – Sets the clock to 24 hour view

Another important listener to record the changes made to the picker is

setOnTimeChangedListener(TimePicker.OnTimeChangedListener): Fires whenever the time is changed through the Time Picker by the user.

Example to create a sample Time Picker and record its time, we will use a TextView to update our changes.

time_picker.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<TimePicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:timePickerMode="clock"
    android:id="@+id/time_picker"
    />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/text_view_time"
        android:textColor="@color/colorAccent"
        android:textSize="55sp"
        android:layout_gravity="center"/>
</LinearLayout>

Create a sample Activity called TimePickerActivity.java like below:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.TimePicker;

public class TimePickerActivity extends AppCompatActivity {
    TextView textView;
    TimePicker timePicker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.time_picker);
        textView = (TextView) findViewById(R.id.text_view_time);
        timePicker = (TimePicker) findViewById(R.id.time_picker);
        timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                textView.setText(String.valueOf(hourOfDay)+":"+String.valueOf(minute));
            }
        });
    }
}

The resulting Application is:

"<yoastmark

Conclusion – Material Design Ideas

Take a look at this Google Material Design Docs for some pretty cool inspiration.

Drop in any comments that you have.

“Learn and Be Curious”

Leave a Comment