DateSlider 1.1 an alternative DatePicker for Android

Warning:

This is a post about the outdated version of the DateSlider. You can find the new version in this post.

Update: check out the project site at google code

We just have launched the DateSlider project at google code. check it out here!

Update to version 1.1!

As suggested by our reader wrecker the look of the DateSlider was enhanced by introducing a two-row layout of the individual bars to fit in more information in less space and make the widget make more compact.
In addition, Sundays are coloured red so that the users has a better feel for where in the week he currently is.

What is it?

As already explained in my last post, I am very unsatisfied with the DatePicker that the Android SDK has to offer. This is why I thought of creating my own custom Dialog Framework for creating customised date selectors. The code of the old version was completely rewritten and refurbished and now is faster to load, compatible with android version >= 1.5, and much more flexible with respect to localization and what kind of information is displayed and how it is displayed.

Furthermore I created a series of Dialogs implementing the DateSlider Framework which can be used as they are for your applications or which can be adapted to fit your individual needs. In either case, it should be easy and straight forward to use.

Here a list of Dialogs I provide in the Framework:

DefaultDateSlider

This Date picker is most similar to the Slider of the previous version. The main difference, however, is that you can see the day of the week while scrolling through the days

This is the standard DateSlider which will resembles the old date picker the most. You can see, however, that some things have changed visually. The current time units are highlighted with a bold and darker font face which aids the understanding of which date is currently selected.

Alternative DateSlider

This date picker contains a year scroller as well to simplify greater time travels.

The alternative DateSlider contains an additional bar containing the year. This allows for quick travels through time and can be used for selecting a birthday for example.

Month and Year DateSlider

This DateSlider does not contain a Day field and can be used for coarser date selecting purposes.

The Month and Year DateSlider leaves out the day scroller and can be used for cases like credit card expiration date dialogs.

TimeSlider

This custom time picker dialog allows for an efficient time selection

The DateSlider Framework is flexible enough to support times as well. Therefore it is no problem to easily create a time selector.

The DateTime Slider

This datetime picker allows to select both, time and date from one box.

With this dialog you can select the date as well as a time in one box. Moreover it shows that you can tweak the date picker such that only certain time intervals are offered. Therefore you can reduce the amount of possible input drastically.

More DateSlider!

This DateSlider shows what bits you can modify easily.

As the DateSlider operates with standard Calendar Objects it is no problem to use the users locale information to show dates in his language

The DateSlider works and is tested on all major android realeses. i.e. version 1.5, 1.6, 2.1, and 2.2

Video of the look and feel of the old version

How to use the DateSlider?

The DateSlider is as easy to use as the standard DatePicker. The only difference is, that the DateSlider takes a Calendar instance as input and returns another Calendar instance as output. To see how all the different date sliders above are implemented take a look into the demo.java which is provided in the download package.

The implementation principle is always the same and works like this:

public class Demo extends Activity {

static final int DEFAULTDATESELECTOR_ID = 0;

	private TextView dateText;

    @Override
    public void onCreate(Bundle savedInstanceState) {
    	// load and initialise the Activity
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        dateText = (TextView) this.findViewById(R.id.selectedDateLabel);
        Button defaultButton = (Button) this.findViewById(R.id.defaultDateSelectButton);

        // set up a listener for when the button is pressed
        defaultButton.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {
				// call the internal showDialog method using the predefined ID
				showDialog(DEFAULTDATESELECTOR_ID);
			}
        });
    }

    // define the listener which is called once a user selected the date.
    private DateSlider.OnDateSetListener mDateSetListener =
        new DateSlider.OnDateSetListener() {
            public void onDateSet(DateSlider view, Calendar selectedDate) {
            	// update the dateText view with the corresponding date
                dateText.setText(String.format("The chosen date:%n%te. %tB %tY", selectedDate, selectedDate, selectedDate));
            }
    };

    @Override
    protected Dialog onCreateDialog(int id) {
    	// this method is called after invoking 'showDialog' for the first time
    	// here we initiate the corresponding DateSlideSelector and return the dialog to its caller

        switch (id) {
        case DEFAULTDATESELECTOR_ID:
			// get todays date and the time
	        final Calendar c = Calendar.getInstance();
            return new DefaultDateSlider(this,mDateSetListener,c);
        }
        return null;
    }
}

No surprises, really!

How to install the DateSliders

Just copy the java files in the src into your project. The core java files are the ScrollLayout.java and the DateSlider.java. The other java files are implementation of the DateSlider class and are optional.
Moreover you need to copy the slider_nosnap.png file from the res folder and the dateslider.xml, dialogtitle.xml and scroller.xml.
Please also copy the dateSliderTitle of the strings.xml.
This should be it!

Download the outdated version

You can download the DateSlider Version 1.1 here.

This entry was posted in Mobile Apps and tagged , , , , , , , . Bookmark the permalink.

36 Responses to DateSlider 1.1 an alternative DatePicker for Android

  1. Pingback: DateSlider – An Alternative to the DatePicker for Android | Codeus Blog

  2. Pingback: Rabbies Yahrtzeit and Zmanim for Android v 1.0.4 - KosherDev

  3. Wrecker says:

    After a bit of playing the code, I have managed to get what I wanted.. See screenshot: http://i.imgur.com/YkQPDl.jpg

    Do you plan on putting the code somewhere on a public code hosting?

  4. Daniel says:

    Very nice indeed! Looks very pretty and compact. I definitely will adapt the code to support layouts rather than just textviews (probably even today). And then, sure, I think it might be best for the android community to make code available on some code hosting page. I’ll keep you informed!

  5. Wrecker says:

    Thanks! I actually did what you said.. Extracted an interface from TimeTextView and then implemented my version of TimeTextView that extends LinearLayout & implements interface. The rest of the code only needed minor adjustments. If you are interested I can put the code up somewhere later.

  6. Daniel says:

    Great! In the meantime I made probably more or less similar changes to the TimeView -Interface, and added a nice extra – Sundays now are coloured red! I’ll update the pictures in a bit.
    Moreover, I have set up a google code project -> http://code.google.com/p/android-dateslider/

  7. Wrecker says:

    Nice!!

  8. Black says:

    Thanks a lot~
    I’m trying to implement a customized DatePicker, this will be very helpful~
    Thank you!

  9. Ton van Overbeek says:

    Used your sliders successfully in my app for personal use (converter between UTC and TAI). Ran into a few hic ups which I have entered as Issues on the google code project site. Solved them myself in a kind of brute force way. Can you provide my code if you want it, but I am not an experienced Java coder, so I am pretty sure there are more elegant solutions.
    Anyway, a bug thanks for your implementation. It really looks very nice and much much better than the default Date and TimePicker.

    • Daniel says:

      Thank you very much, Ton. I’ll try to patch the issues as soon as possible. Haven’t really considered the cases you are mentioning. So thanks for testing!

  10. Roger says:

    Hey Daniel, thanks and congratulations for the DateSlider, it’s pretty awesome and usefull. I’m using it on my application, and by now I’m trying to implement something different using it. How can we keep in contact so you can help me take off some doubts about it? Thanks.

  11. yoyo says:

    thanks for your share.it’s a nice widget.
    and i want to use it in my project.
    but there is a few problems which i have no idea to deal with:
    when use dateslider in a demo project ,it works fun.the speed is fluency.even though the log print a lot of gc.
    then using the demo in my project ,the speed of the app is slow.bad user experience.
    and my project runing fluency alone.so the question is when i took them together,bad speed.(conclusion:separate them,both runing well,together low speed)
    if you can give me some advise ?

    • Daniel says:

      Hello yoyo,
      thanks for your feedback.
      To be honest with you, I don’t really see what might be the cause for your problem. I have not encountered this behaviour before. Especially as it doesn’t require that many resources.
      Maybe you can try to use a simpler dateslider like the month/year dateslider and see whether your issue persists.
      Maybe, your application runs some threads in the background that cause the whole process to slow down?

  12. hakane says:

    Hey Daniel,
    Thanks for great widget and share. I added it into my app in almost no time and it works like a charm. As my app is doing very well I think this is good testing for the widget as well and if I come across any bug (which I don’t expect) I’ll let you know. I’m planning small cosmetic changes and amendments though, and I can send the code when I complete if you want.
    Great job!!!

    • Daniel says:

      Hi Hakane,

      great to know, that the DateSlider seems to work that smoothly :)
      So which app did you use it in? Would be very happy to see the DateSlider in action!
      And yes, please tell me if the widget causes problems, I’ll be happy to try and fix it

      cheers, Daniel

  13. amit says:

    This date slider must be implemented in the android system as default instead of the old plus minus one. (cause it sucks)
    why don’t you use it in the cyanogenmod roms?
    It’s a must.

  14. eug says:

    Hello Dan,

    I was able to install the DateSlider.apk and run it without any problems as stand alone project from Demo.java.

    Now, I’m trying to add DateTimeSlider to replace a TextView within my app to the view that was supposed to add that date that was written manually through a standard QUERTY input.

    All files compiled without any errors, but as soon as I execute the add view, the emulator barks at with the following message:
    “The application x (process com.x) has stopped unexpectedly. Please try again. Force close”

    I’m not sure why this is.

    Any help will be appreciated.

    Thanks.

    Eugene.

    • Daniel says:

      Hi Eugene,

      I haven’t tried to place the dateslider components outside a dialog yet. So I guess that there might be some conflicts, if you try to substitute an ordinary view with a dateslider component.
      However, your current error message is not very helpful. I guess that the output of the LogCat will be more helpful. Maybe I will be able support you, if you give me this bit of information.

      Daniel

      • eug says:

        Thanks Dan for your quick response.

        Regarding not having tested “the dateslider components outside a dialog yet.” I’m not sure that’s what I want to do.

        Can you think of any other way I can use the dialog box to add to my activity view?

        As per your request, here is the copied error when it barks about the add view from the LogCat:

        05-04 18:48:12.066: DEBUG/AndroidRuntime(255): Shutting down VM
        05-04 18:48:12.066: WARN/dalvikvm(255): threadid=3: thread exiting with uncaught exception (group=0x4001aa28)
        05-04 18:48:12.066: ERROR/AndroidRuntime(255): Uncaught handler: thread main exiting due to uncaught exception
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.X.Activity}: java.lang.NullPointerException
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2401)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2417)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread.access$2100(ActivityThread.java:116)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1794)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.os.Handler.dispatchMessage(Handler.java:99)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.os.Looper.loop(Looper.java:123)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread.main(ActivityThread.java:4203)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at java.lang.reflect.Method.invokeNative(Native Method)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at java.lang.reflect.Method.invoke(Method.java:521)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:791)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:549)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at dalvik.system.NativeStart.main(Native Method)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): Caused by: java.lang.NullPointerException
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at com.x.AddTaskActivity.java:142)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at com.x.AddTaskActivity.java:55)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1123)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2364)
        05-04 18:48:12.096: ERROR/AndroidRuntime(255): … 11 more
        05-04 18:48:12.127: INFO/Process(64): Sending signal. PID: 255 SIG: 3
        05-04 18:48:12.137: INFO/dalvikvm(255): threadid=7: reacting to signal 3
        05-04 18:48:12.317: INFO/dalvikvm(255): Wrote stack trace to ‘/data/anr/traces.txt’
        05-04 18:48:21.829: WARN/ActivityManager(64): Launch timeout has expired, giving up wake lock!
        05-04 18:48:21.903: WARN/ActivityManager(64): Activity idle timeout for HistoryRecord{438ee328 com.x.taskmanager/.AddTaskActivity}

        Thanks again for your time and support.

        Please email me if you need further logs.
        Eugene.

        • daniel says:

          According to the log, the issue does not (obviously) lie within the dateslider code, but in line 142 of your AddTaskActivity.java where you refer to an object which is not yet instantiated.

          • eug says:

            Ok Dan,

            thanks again, so how would I instantiate the button from another activity view outside of Demo?

            Any help on how to integrate it from AddTaskActivity would be appreciated.

            Can you please email me?
            Thanks again in advance.
            Eugene.

  15. Darius says:

    Hi,
    thank you for your widget!

    I am trying to do Time Picker with your widget, and I am using TimeSlider.
    But I have a problem… I don’t know how to change time range.

    For example:

    Choose hours from: 0,1,2,3,4,5,6,7,8,9,10.
    And minutes : 0,20,40

    Like min and max value + interval.

    Is there any way to do this?

    Thank you in advance!
    Darius

    • Daniel says:

      Hi Darius,

      thanks for your comment!
      Currently the DateSlider does not support what you are looking for. But the feature you are asking for will be implemented in Version 1.2 which will come out this month. I’ll keep you posted!

      cheers,
      Daniel

  16. Sergio says:

    Hi Daniel,

    Congratulations on a great piece of code. Looks good, works even better. I’ve got only one question : I’m using the MonthYearDateSlider and would like to reset the selected date when a user click on a “Reset” button. Any way to do this?

    Thanks!

  17. Daniel says:

    Hello Sergio,

    if you get the latest version from the repository on the google-code page you’ll find an “updateCalendar” function which allows you to set the date to any value you want.

    Hope this helps,
    Daniel

  18. Pingback: Anonymous

  19. Starbelly Software says:

    Hi, I am planning on using your DateSlider in an Android app I am currently developing. Any need to mention you in the about box, link to your website, twitter page, etc. Please contact me via email and let me know.

  20. Ivo says:

    Hello Daniel,
    Great widget! Congratulations!
    I was wondering if you know how to display date in format dd/mm/yyyy (e.g. 19/05/2011), and how to pass this value to another activity, in order to perform a difference (in years) between choosen date and today (e.g. 19/05/2011 – 20/05/2010 = 1).
    Thanks!

  21. Ivo says:

    Hello again,
    it’s just to say that I found out a way to display the format I wanted. It’s
    “%1$td/%1$tm/%1$tY”. And concerning data passing, it’s okay as well.
    I parsed the string to date and then made the date difference. Thanks anyways!

  22. I am now using this DateSlider in my recently launched app: ToDo https://market.android.com/details?id=com.starbellysw.todo

  23. Sophie says:

    Any update on setting min and max date functionality? When will 1.2 come out? Looking forward to the new changes! Thanks!

    • Daniel says:

      The new version is out now! In fact, I am working on a new blog entry right now, but the code is available on the google-code page already

Leave a Reply

Your email address will not be published.


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>