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?

Closure

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. – Closure

Answer 1

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://mcmap.net/q/428739/-how-to-create-datepicker-and-timepicker-dialogs-in-fragment-class (If you follow the example, remember to add a default constructor to DatePickerDialogFragment so that your app does not crash on rotate)

Playgoer

For a full example of how to use the DialogFragments with the DatePickerDialog, see a blog post I wrote about it: codinguser.com/2012/06/time-and-date-inputs-in-android – Playgoer

Just what I was looking for! Way easier then trying to mess around with Spinners. Thank you! – Spheroid

Note that you should replace DeviceDefault.Light with whatever is appropriate for your app's theme. – Dodi

Assuming the intention is also to update the text in that view with the date the user selected? – Streusel

Answer 2

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

Haydon

Answer 3

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.

Pewee

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). – Closure

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 – Pewee

Yes, perfect! Setting the style does exactly what I wanted. Thank you! – Closure

@Pewee your comment is actually the right approach for what was asked (more so than the actual answer). – Playgoer

@Closure 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? – Emmy

Answer 4

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>

Mossman