Android TimePicker Using Kotlin With Example

Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners. Also, if you are interested in content writing, you can mail us at tutorialwing@gmail.com.

Hello Readers! In this post, we are going to learn about android timePicker using kotlin in any android application. We will also learn about different attributes of android timePicker that can be used to customise this widget.

Output

Tutorialwing Kotlin TimePicker Output Android TimePicker Using Kotlin

Tutorialwing Kotlin TimePicker Output

Getting Started

Android timePicker can be defined as below –

TimePicker is widget to select time in either 24-hour format or AM/PM format

Different Attributes of Android TimePicker Widget

Attributes of android TimePicker widget are –

Sr. XML Attributes Description
1 android:timePickerMode Defines look of the TimePicker widget

Some of the popular attributes of TimePicker inherited from FrameLayout are –

Sr. XML Attributes Description
1 android:foregroundGravity Sets the gravity of the foreground drawable
2 android:measureAllChildren When measuring, It specifies whether to measure all children or only those that are in visible or invisible state

Some of the popular attributes of TimePicker inherited from ViewGroup are –

Sr. XML Attributes Description
1 android:animationCache Specifies whether layout animations should create a drawing cache for their children.
2 android:layoutAnimation Specifies the layout animation to use the first time the ViewGroup is laid out
3 android:layoutMode Specifies the layout mode

Some of the popular attributes of TimePicker inherited from View are –

Sr. XML Attributes Description
1 android:background Specifies background of the view
2 android:clickable Specifies whether view is clickable or not
3 android:fadeScrollbars Specifies whether scrollbar should fade out when not in use or not
4 android:fitsSystemWindows Specifies whether to adjust view layout according to system windows
5 android:id Specifies id of the view
6 android:minHeight Specifies minimum height
7 android:minWidth Specifies minimum width
8 android:padding Specifies padding of the view
9 android:paddingBottom Specifies padding to bottom of the view
10 android:paddingEnd Specifies padding to end of the view
11 android:visibility Specifies visibility of the view



Example of Android TimePicker Using Kotlin

At first, we will create android application. Then, we will use timePicker using kotlin in the application.

1. Creating New Project in Kotlin

Follow steps below to create new project. Please ignore the steps if you have already created the project.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as TimePicker. Then, check Include Kotlin Support and click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. You will get a newly created project successfully if you have followed steps properly.

Since we have a project now, we will modify xml and other files to use timePicker using kotlin in the application.

2. Modify values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">TimePicker</string>
	<string name="selected_time">The selected time is:</string>
</resources>

3. Use TimePicker Widget in xml file

Open src/main/res/layout/activity_main.xml file and add below code into it.

<?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:gravity="center"
	android:orientation="vertical">

	<TimePicker
		android:id="@+id/timePicker"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginLeft="40dp"
		android:layout_marginRight="40dp"
		android:layout_marginTop="5dp"/>

	<TextView
		android:id="@+id/textView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginLeft="35dp"
		android:layout_marginTop="30dp"
		android:visibility="gone"/>

</LinearLayout>

In activity_main.xml, we have defined timePicker and textView widgets in this file. Now, we will access these widgets in kotlin file to perform some operations on it.

4. Access TimePicker Widget in Kotlin file

Open src/main/java/com.tutorialwing.timepicker/MainActivity.kt file and add below code into it.

package com.tutorialwing.timepicker

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.View
import android.widget.TextView
import android.widget.TimePicker

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        getSelectedTime()
    }

    private fun getSelectedTime() {
        val textView = findViewById<TextView>(R.id.textView)
        val timePicker = findViewById<TimePicker>(R.id.timePicker)
        timePicker.setOnTimeChangedListener { _, hourOfDay, minute ->
            var hourOfDay = hourOfDay

            var format = ""
            when {
                hourOfDay == 0 -> {
                    hourOfDay += 12
                    format = "AM"
                }
                hourOfDay == 12 -> format = "PM"
                hourOfDay > 12 -> {
                    hourOfDay -= 12
                    format = "PM"
                }
                else -> format = "AM"
            }

            if (textView != null) {
                val hour = if (hourOfDay < 10) "0" + hourOfDay else hourOfDay
                val min = if (minute < 10) "0" + minute else minute

                val text = getString(R.string.selected_time) + " " + hour + " : " + min + " " + format
                textView.text = text
                textView.visibility = View.VISIBLE
            }
        }
    }
}

We have accessed textView and timePicker using kotlin file (i.e. MainActivity.kt file). Then, we have set time change listener to show selected time in textView. There are also some calculation to get the time in proper format.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.timepicker"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of our tutorial on Android TimePicker using Kotlin.

Support Us

If you like Tutorialwing and would like to contribute, you can email an article on any educational topic at tutorialwing@gmail.com. We would love to publish your article. See your article on Tutorialwing and help others with your knowledge. Follow Facebook, LinkedIn, Google+, Twitter, Youtube for latest updates.
Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners