user1678363
user1678363

Reputation:

How to make a date spinner on Android

How do I create an Android spinner that open a date picker dialog?

I want a Spinner that looks like the one in the calendar app, as shown in the screenshot below.

Screenshot of Android calendar app, with the desired GUI element highlighted

What I've already tried:

I made a spinner in my layout XML and tried to set the onclick attribute to call a method that shows the dialog. When I put a method name in "on click", I got and error that says "The following classes could not be found: - Spinner (Change to android.widget.Spinner, Fix Build Path, Edit XML)".

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:onClick="showDatePickerDialog" />

showDatePickerDialog is in the right class:

public void showDatePickerDialog(View v) {
    DialogFragment newFragment = new DatePickerFragment();
    newFragment.show(getFragmentManager(), "Date");
}

And this is DatePickerFragment (copied from another website):

import java.util.Calendar;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.os.Bundle;
import android.widget.DatePicker;

public class DatePickerFragment extends DialogFragment
                        implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        // Use the current date as the default date in the picker
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it
        return new DatePickerDialog(getActivity(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date chosen by the user
    }
}

SOLUTION:

I found the solution at another question.

I used a regular spinner in the layout file, then in my activity class, has this code:

dateSpinner = (Spinner)findViewById(R.id.spinner_date);

View.OnTouchListener Spinner_OnTouch = new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            showDatePickerDialog(v);
        }
        return true;
    }
};

View.OnKeyListener Spinner_OnKey = new View.OnKeyListener() {
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER) {
            showDatePickerDialog(v);
            return true;
        }
        else {
            return false;
        }
    }
};

dateSpinner.setOnTouchListener(Spinner_OnTouch);
dateSpinner.setOnKeyListener(Spinner_OnKey);

It seems a little hacked, but it works. Does anyone know a cleaner way to do it? It would not let me setOnClickListener() or setOnItemClickListener() on the spinner.

Upvotes: 19

Views: 35353

Answers (3)

Olumide Oyetoke
Olumide Oyetoke

Reputation: 327

I was able to achieve it very easily. It looks exactly like that of the calendar app :)

Use a TextView and give it a spinner style:

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   style="@android:style/Widget.Holo.Spinner" />

For API 10 and below without the Holo Theme, use:

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

Upvotes: 13

user1938667
user1938667

Reputation:

A button is the best way, you just need to change the button style. I tried to set the default android spinner style to my button, but it doesn't work correctly. So I made my own style (it's a copy of the default spinner style). Here it is:

    `<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false"
              android:drawable="@drawable/spinner_disabled_holo_light" />
        <item android:state_pressed="true"
              android:drawable="@drawable/spinner_pressed_holo_light" />
        <item android:state_pressed="false" android:state_focused="true"
              android:drawable="@drawable/spinner_focused_holo_light" />
        <item android:drawable="@drawable/spinner_default_holo_light" />
    </selector>

`

The images you will find in ..\sdk\platforms\android-%%\data\res\drawable.

This works fine for me. This is a simple way to make a button spinner style, like the spinner on Google Calendar.

Upvotes: 2

xbakesx
xbakesx

Reputation: 13500

I think in general what people do in this case is use a button and style it like a spinner (an approach here, I think a better approach, mostly just setting the style to android.R.attr.spinnerStyle), or they use a spinner but overload the click action to create a dialog.

Of course the hard part there is creating the custom dialog that has nice month/day/year spin-ie-things (they aren't spinners... they are kind of like slot machines or something) in them!

There's a few ways you can go about that, there is some google documentation here, and you can always just lift the android source code (although there are obviously drawbacks).

Upvotes: 12

Related Questions