Android date/time wheel picker

Question

How can I achieve this layout for a time picker (and also for a date picker)? The default layout is either a (very big) clock or a (not beautiful) spinner style time picker. I saw this in several apps but couldn't find how to achieve this look and feel.

Solution 1

For future reference for anyone that might need this, it is possible to achieve this time picker spinner by just choosing a TimePicker among the android widgets and then, on the xml file, type android:timePickerMode="spinner".

Your widget xml code should look like this:

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

My answer was based on the documentation.

Solution 2

Simplest way to achieve this in my view is since api level 21:

<?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_horizontal"
    android:orientation="vertical"
    android:padding="8dp">

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

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false"
        android:datePickerMode="spinner" />

</LinearLayout>

You get this:

Solution 3

This example has three pickers: NumberPicker, DatePicker and TimerPicker.

https://github.com/rodrigobusata/android-pickers

or

Use only the sample without the library and override for Android default pickers.

Comments

[Amos]

Thanks. What do you mean by "Use only the sample without the library and override for Android default pickers"?

[Busata]

Your Wellcome. In this sample there is a sample using a library that override the Android default pickers for can change the colors, but case you want only use a picker with the default colors, see only sample that is inside app folder and override "net.simonvt.timepicker.TimePicker" to "TimePicker".

[Amos]

Not sure I understand your reply. I want a time/date picker component to be placed on a fragment with other components where the user can select a date/time. My question was regarding the layout of the time picker component.

[Joaquin Iurchuk]

The just use the DatePickerFragment class only and skip the interface

[Amos]

As far as I understand, I need the net.simonvt.datepicker.DatePicker (for example) implementation in order to see the look and feel I want, where can I find it in order to use it in my code? in the link I only see a reference to it but not the actual implementation, what am I missing?

[Amos]

So it can't be used as a simple object/component/view in a layout along with other objects/components/views? for example: a date picker, a textview and a button inside the same layout?

[Joaquin Iurchuk]

Yes, of course. But is not a simple component. It's a fragment component

[Busata]

They are in sample next to "app" folder there are the folders "numberpicker-library", "datepicker-libray" and "timerpicker-library".

[Amos]

So I need to take the sources from here: github.com/rodrigobusata/android-pickers/tree/master/… and then I will be able to use them in the layout inside my app?

[Busata]

That's it! Good luck.

[Amos]

Weird, apparently the ugly spinner was only in the preview, when I actually run the app, it looks as I want it to be

[Busata]

This because in your preview may be greater than your emulator.

[Faisal Naseer]

I think the link is no more