Android spinner with date picker, like Google Calendar app

Question

I'm trying to get a text box that looks like a spinner to activate a date picker dialog. This is done in both the Google Calendar app and the Contacts app (for birthdate) on ICS. Do I need to use a spinner, and if so how do I change it's input view to be a date picker? Or if not, how do I get a text view to have the little triangle that usually indicates a spinner?

Also, I know how to show a date picker dialog, it just seems like I'm missing something to make it look the way they have it. I want it to fit in well visually with the rest of my form. — Dash, Feb 23 '12 at 03:55

score 61 · Accepted Answer · edited May 23 '17 at 11:46

61

Twaddington's comment on his answer is actually the right approach. What you need is to create a text view and apply the style

style="@android:style/Widget.DeviceDefault.Light.Spinner"

Then you can create a click listener on the text view and use it to open a DatePickerDialog. That can be accomplished as shown here: https://stackoverflow.com/a/8127571/332738 (If you follow the example, remember to add a default constructor to DatePickerDialogFragment so that your app does not crash on rotate)

edited May 23 '17 at 11:46

Community

1
1

answered Jun 03 '12 at 22:46

codinguser

5,562
2
33
40

1

For a full example of how to use the DialogFragments with the DatePickerDialog, see a blog post I wrote about it: http://www.codinguser.com/2012/06/time-and-date-inputs-in-android/ – codinguser Aug 10 '12 at 07:54
Just what I was looking for! Way easier then trying to mess around with Spinners. Thank you! – Ryan R Sep 30 '12 at 04:23
1

Note that you should replace `DeviceDefault.Light` with whatever is appropriate for your app's theme. – CommonsWare Mar 01 '13 at 20:24
Assuming the intention is also to update the text in that view with the date the user selected? – ThePartyTurtle Feb 23 '18 at 18:32

score 21 · Answer 2 · answered Dec 23 '12 at 13:39

I don't know if you still need this. But in the Contacts app, it is achieved with the following:

<Button
    ...
    style="?android:attr/spinnerStyle"
    ... />

This should work over all Android versions, as it is available since api level 1: http://developer.android.com/reference/android/R.attr.html#spinnerStyle

score 8 · Answer 3 · answered Feb 23 '12 at 03:58

8

I'm not sure if this is what you're asking, but you should be able to follow the Date Picker tutorial on the Android developer website.

Also, the DatePicker and DatePickerDialog classes might be worth a look.

answered Feb 23 '12 at 03:58

twaddington

11,607
5
35
46

Thanks. I do know how to implement the date picker, but in the example it's brought up from a button click instead of from a spinner-like textview (which is what I want). – Dash Feb 23 '12 at 04:03
8

Well, you should be able to activate the Dialog from the onClick listener on any View type. So, what you'll need to do is simply style a view (maybe a TextView) like they're doing in the apps you mentioned. I don't think there is a built-in Style or View that will do this for you. You could try applying the Android spinner styles to a basic TextView and see if that works: android.R.style.Widget_Spinner – twaddington Feb 23 '12 at 20:32
Yes, perfect! Setting the style does exactly what I wanted. Thank you! – Dash Feb 24 '12 at 02:53
1

@twaddington your comment is actually the right approach for what was asked (more so than the actual answer). – codinguser Jun 03 '12 at 22:46
@Dash which style did you use to get the same effect as the spinner like style Google uses on their calendar app to pop up TimePickers and DatePickers? – Andy Jul 10 '12 at 06:00

score 0 · Answer 4 · answered Apr 07 '16 at 11:47

I would prefer below theme for Spinner like google contacts.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:spinnerStyle">@style/AppTheme.Form.Spinner</item>
        <item name="android:spinnerItemStyle">@style/AppTheme.Form.Spinner.Item</item>
    </style>

    <!-- Spinner Styles -->
    <style name="AppTheme.Form.Spinner" parent="Widget.AppCompat.Spinner">
        <item name="android:paddingRight">0dp</item>
        <item name="android:paddingEnd">0dp</item>
    </style>
    <style name="AppTheme.Form.Spinner.Item" parent="Widget.AppCompat.EditText">
        <item name="android:clickable">false</item>
    </style>
</resources>

Android spinner with date picker, like Google Calendar app

4 Answers4

Linked