Android TimePicker with Examples

TimePicker with Examples In android, is a widget for selecting the time of day, in either 24-hour or AM/PM mode. If we use TimePicker in our software, it’s going to ensure that the customers will pick out a legitimate time for the day.

Following is the pictorial representation of the use of a timepicker manage in android programs.

Generally, in android TimePicker to be had in modes, one is to reveal the time in clock mode and another one is to show the time in spinner mode.

Create Android DatePicker in XML Layout File

In android, we will create a TimePicker in XML layout document the usage of detail with different attributes like as shown beneath

<TimePicker android:id="@+id/timePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

In anroid, the TimePicker helps a two styles of modes, those are Clock and Spinner to reveal the date information in our utility.

Android TimePicker with Clock Mode

We can outline android TimePicker to show time in clock layout by means of the use of TimePicker android:timePickerMode characteristic.

Following is the instance of displaying the TimePicker in Clock mode.

<TimePicker android:id="@+id/timePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="clock" />

The above code will return the TimePicker like as proven under.

If you study above end result we got the TimePicker in clock mode to select time in Hours and Minutes based on our requirements.

Android TimePicker with Spinner Mode

If we want to show the TimePicker in spinner format like showing hours and minutes one by one to pick out the time, then by means of the use of TimePicker android:timePickerMode attribute we can gain this.

Following is the instance of displaying the TimePicker in spinner mode.

 <TimePicker
    android:id="@+id/datePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="spinner"/>

The above code will return the TimePicker like as shown below

If you take a look at above result we were given the TimePicker in spinner mode to pick the time in Hours and Minutes.

We can exchange the TimePicker in spinner mode to AM / PM format instead of 24 Hours layout through the usage of setIs24HourView(genuine) approach in Activity report like as shown under.

TimePicker picker=(TimePicker)findViewById(R.id.timePicker1); picker.setIs24HourView(true);

The above code will return the TimePicker like as proven underneath

If you have a look at above result we got the TimePicker with AM / PM layout in spinner mode to choose the time one by one by way of hours, mins and AM/PM.

This is how we can use TimePicker in different modes based on our requirements in android packages.

Android TimePicker Control Attributes

Following are the some of commonly used attributes related to TimePicker control in android applications.

Attribute	Description
android:id	It is used to uniquely identify the control
android:timePickerMode	It is used to specify timepicker mode, either spinner or clock
android:background	It is used to set the background color for date picker.
android:padding	It is used to set the padding for left, right, top or bottom of date picker.

TimePicker with Examples, Android TimePicker Example

Following is the instance of defining a one TimePicker control, one TextView control and one Button manipulate in RelativeLayout to show the chosen time in AM / PM format on Button click on in android software.

Create a new android software the use of android studio and supply names as TimePickerExample. In case if you are not aware of creating an app in android studio test this newsletter Android Hello World App.

TimePicker with Examples, Now open an activity_main.Xml document from reslayout path and write the code like as shown below

TimePicker with Examples, activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/timePicker1"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="160dp"
        android:text="Get Date" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_marginLeft="120dp"
        android:layout_marginTop="10dp"
        android:textStyle="bold"
        android:textSize="18dp"/>
</RelativeLayout>

If you study above code we created a one TimePicker manipulate, one TextView manage and one Button manage in XML Layout report.

Once we are done with introduction of format with required controls, we need to load the XML layout resource from our activity onCreate() callback technique, for that open essential interest file MainActivity.Java from javacom.Tutlane.Timepickerexample direction and write the code like as shown below.

TimePicker with Examples, MainActivity.java

package com.tutlane.timepickerexample;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.TimePicker;

public class MainActivity extends AppCompatActivity {
    TimePicker picker;
    Button btnGet;
    TextView tvw;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvw=(TextView)findViewById(R.id.textView1);
        picker=(TimePicker)findViewById(R.id.timePicker1);
        picker.setIs24HourView(true);
        btnGet=(Button)findViewById(R.id.button1);
        btnGet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int hour, minute;
                String am_pm;
                if (Build.VERSION.SDK_INT >= 23 ){
                    hour = picker.getHour();
                    minute = picker.getMinute();
                }
                else{
                    hour = picker.getCurrentHour();
                    minute = picker.getCurrentMinute();
                }
                if(hour > 12) {
                    am_pm = "PM";
                    hour = hour - 12;
                }
                else
                {
                    am_pm="AM";
                }
                tvw.setText("Selected Date: "+ hour +":"+ minute+" "+am_pm);
            }
        });
    }
}

If you take a look at above code we’re calling our layout using setContentView technique inside the shape of R.Format.Layout_file_name in our pastime document.

Here our xml file call is activity_main.Xml so we used record call activity_main.

TimePicker with Examples, And we are trying to expose the selected time of TimePicker in AM / PM format on Button click on.

Generally, during the launch of our hobby, onCreate() callback method. Can be referred to as with the aid of android framework to get the desired format for an activity.

Output of Android TimePicker Example

When we run above example using android virtual device (AVD) we will get a result like as shown below.

If you observe above end result, we have become the time from TimePicker in AM / PM layout. Whilst we click on on Button in android application.

Now we can see some other instance of showing the TimePicker manage on EditText click on occasion. And get the chosen time value in android application.

Androd Show TimePicker on EditText Click Example

Following is the example of open or popup timepicker conversation while we click on on EditText manipulate. And get the chosen time value on Button click on in android application.

Create a new android software the use of android studio and deliver names as TimePickerExample.

TimePicker with Examples, In case in case you aren’t privy to growing an app in android studio test this article Android Hello World App.

Now open an activity_main.Xml document from reslayout direction and write the code like as shown under

TimePicker with Examples, activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="150dp"
        android:ems="10"
        android:hint="Enter Time" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_marginLeft="100dp"
        android:text="Get Date" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="10dp"
        android:textStyle="bold"
        android:textSize="18dp"/>
</RelativeLayout>

If you look at above code we created a one EditText control. One TextView manage and one Button control in XML Layout record.

Once we are carried out with advent of format with required controls. We want to load the XML format resource from our interest onCreate() callback method, for that open essential pastime report MainActivity.Java from javacom.Tutlane.Timepickerexample path and write the code like as shown beneath.

TimePicker with Examples, MainActivity.java

package com.tutlane.timepickerexample;
import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TimePicker;
import java.util.Calendar;

public class MainActivity extends AppCompatActivity {
    TimePickerDialog picker;
    EditText eText;
    Button btnGet;
    TextView tvw;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvw=(TextView)findViewById(R.id.textView1);
        eText=(EditText) findViewById(R.id.editText1);
        eText.setInputType(InputType.TYPE_NULL);
        eText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Calendar cldr = Calendar.getInstance();
                int hour = cldr.get(Calendar.HOUR_OF_DAY);
                int minutes = cldr.get(Calendar.MINUTE);
                // time picker dialog
                picker = new TimePickerDialog(MainActivity.this,
                        new TimePickerDialog.OnTimeSetListener() {
                            @Override
                            public void onTimeSet(TimePicker tp, int sHour, int sMinute) {
                                eText.setText(sHour + ":" + sMinute);
                            }
                        }, hour, minutes, true);
                picker.show();
            }
        });
        btnGet=(Button)findViewById(R.id.button1);
        btnGet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvw.setText("Selected Time: "+ eText.getText());
            }
        });
    }
}

If you examine above code we are calling our format the use of setContentView. Approach inside the shape of R.Format.Layout_file_name in our interest report.

TimePicker with Examples, Here our xml record call is activity_main.Xml so we used file name activity_main. And we are attempting to expose the TimePicker on EditText click. Get the chosen date of EditText manage on Button click.

Generally, in the course of the release of our interest, onCreate() callback technique may be known as through android framework to get the desired layout for an pastime.

Output of Androd Show TimePicker on EditText Click Example

When we run above example using android virtual tool (AVD) we will get a end result like as shown below.

If you look at above result, we’re able to open the TimePicker on EditText click on.

TimePicker with Examples, And displaying the selected date price in EditText control. And getting the EditText control cost on Button click on in android application.

This is how we are able to use TimePicker control in android applications to select the time primarily based on our necessities.