Refactoring WIP

[Rainer-Lang]

@vikramkakkar I hope you are fine. I suppose you have a lot of work. Do you still maintain this great lib?

[Rainer-Lang]

Any news?

[vikramkakkar]

Hi @Rainer-Lang

You're right, I've been keeping very busy. One of the work projects that has been keeping me tied up is finishing this week. So, I'll have some time to work on this.

I do apologize for not being able to provide any updates to this lib. I had been working on another open-source project that I published a few days back: SublimeNavigationView

I am contemplating a redesign according to the material design guidelines outlined here: http://www.google.com/design/spec/components/pickers.html

Do you think I should keep the current design and add the new one as an option, or replace the old design with the new one?

[Rainer-Lang]

@vikramkakkar Thanks for this update. Seems you had a good start in the new year 2016. :+1: I already saw that you have a new project - and was scared if you maintain this very useful lib..... btw, you don't need to apologize! :)

Redesign: I think Google does a good job in ux - not always, often I struggle with their decissions - but in this case it seems ok.

[vikramkakkar]

@Rainer-Lang Took quite some time, but I finally have something to share. Here's a first look at the material design implementation:

LANDSCAPE

PORTRAIT

There are still some issues with backward compatibility. So, I cannot provide an ETA for this update.

If you have any suggestions regarding the layouts, please let me know.

[Rainer-Lang]

@vikramkakkar WOW - that's more than awesome :) ...maybe the title of this thread isn't right anymore... we should use a fresh/new one to discuss the future :) What do you think? We could also change the title of course.

Swipe is also working for the calendar/day view?

What I really like in the actual version of this lib is, that I can style it pretty well (eg colors). That's great. I hope you will let me do this with the new version too.

ETA: Take your time. Don't rush you. :) But thanks for the nice screens.

btw, what do you think about making such things like: "from date to date", "from date/time to date/time"? Could be solved with tabs "FROM" and "TO". But this please after the release :)

[WasimMemon]

+1 for new design. can you tell me how you can use same design for pre lollipop also. i am using your library with some updates but i don't know how it looks same in all versions. I mean pre lollipop ther is no such controls so how you can display them ? i think with some of appcompat themes ?

[vikramkakkar]

Hi @Rainer-Lang thanks for fixing the title.

Swipe is also working for the calendar/day view?

Yes, swiping from month to month is working fine.

What I really like in the actual version of this lib is, that I can style it pretty well (eg colors). That's great. I hope you will let me do this with the new version too.

Yes, of course! All those attrs are still exposed.

btw, what do you think about making such things like: "from date to date", "from date/time to date/time"? Could be solved with tabs "FROM" and "TO". But this please after the release :)

This was suggested before. And I think there's also an open issue regarding this. Anyway, I did look into this, and I've been working on an implementation involving the new design. But I don't just want simple FROM/TO tabs. Here's what I have until now:

• a click selects a Calendar date
• a long-press initiates the date-range selection process
• after a valid long-press, user can move the pointer around
• while moving, the dates under the pointer get added to the range
• by moving the pointer towards an edge (left or right), user can go to the previous/next month, and keep extending the range
• once the user has found the end date, they can remove the pointer, and the range is selected
• the date header shows the start and the finish date
• to change the range, user can click on start or end date and then select a new start/end date
• to get back to single date selection, user can long-press on the desired date and then remove the pointer without moving to another date.

This all has been implemented. I am currently polishing it. I think I will post a gif with this functionality in action. It should make more sense then :).

What do you think of this approach? I am not a big fan of the FROM/TO design from here: https://github.com/borax12/MaterialDateRangePicker

[vikramkakkar]

Thanks @WasimMemon.

can you tell me how you can use same design for pre lollipop also.

Could you please be a bit more specific?

I mean pre lollipop there is no such controls so how you can display them?

Which control do you mean? If you can give me a specific example, I can explain how I styled that component.

[WasimMemon]

Thanks @vikramkakkar

Could you please be a bit more specific?

I mean using your library date picker looks same in android 4.x also. but i can't understand how that thing works. i mean date picker and time picker with circular pattern was introduced in android 5.0 so how you can display them same in older version also.

Is there any theme or style you have created or you have implemented your own controls to display datepicker/ timepicker same in all version.

[Rainer-Lang]

I just want to mention, that the users have to "find" this long-press. Maybe you could provide a hint which says "for range selection use long-press."+button "got it". So the user sees what to do for range selection and could also bis the little help text. What do you think?

[Rainer-Lang]

I want to mention, that I appreciate this new way for selecting a range. We only have to inform the users what they can do. :-)

[vikramkakkar]

@Rainer-Lang Updates have been posted! Your feedback will be much appreciated. :))

The updated sample app should be up on Play store by tomorrow.

[vikramkakkar]

@WasimMemon

Is there any theme or style you have created or you have implemented your own controls to display datepicker/ timepicker same in all version.

You are absolutely right! SublimePicker implements its own controls to display material-styled date & time picker on lower API versions. By the way, a version update has been posted.

[Rainer-Lang]

@vikramkakkar Pretty cool! Just tested. I like the new design! :-)

Are there any known bugs in this version?

Date range selection: First I didn't find how to select a range. I had to read this in the readme. I'm not sure what is possible to help the users to find this useful feature.

eg: I select a date range in April, then I switch to May and tap here on a date => the date selection is gone. Maybe it's possible to use this tap as the new start or end date of the selection instead of removing the complete selection.

[vikramkakkar]

Thanks @Rainer-Lang

Are there any known bugs in this version?

Not to my knowledge.

Date range selection: First I didn't find how to select a range. I had to read this in the readme. I'm not sure what is possible to help the users to find this useful feature.

Yes, this is an issue. I like your idea of showing an instructive message with GOT IT button. Implementation will be close to the following:

• The callback interface SublimeListenerAdapter will have these methods:

  public void onUserReadTutorial() { // SublimePicker will invoke this method when the user clicks GOT IT. // client can save the result in SharedPreferences. // Next time, when showShowDateRangeTutorial() is invoked, // client can return false since the user has already read the tutorial. }

  public boolean shouldShowDateRangeTutorial() { // Client will return true or false based on the value stored in // SharedPreferences. }

Do you think this will be enough for users to discover date range selection?

eg: I select a date range in April, then I switch to May and tap here on a date => the date selection is gone. Maybe it's possible to use this tap as the new start or end date of the selection instead of removing the complete selection.

When a date range is selected, the header either shows the START_DATE (which is on the left) as being activated, or the END_DATE (which is on the right). Example

In the screenshot above, the START_DATE (Mon, Oct 10) is activated. In this state, the user is free to click on any date up to the END_DATE (Thu, Oct 27) and the start date for this selection will be updated. So, if I click on 20, the date range selection will become Oct 20 - Oct 27.

But, if I click on Oct 28, SublimePicker reads this as - start date is Oct 28, end date is Oct 27 ==> illegal state ==> change end date to at least the start date - and the range becomes Oct 28 - Oct 28 which is well, a single date ==> update the header. To start date selection again, user has to long-press.

User can also start date range selection any time. For example, if range Oct 10 - Oct 27 is currently selected. And user wants to select Oct 15 - Oct 18, user can long press on Oct 15 and drag to Oct 18 - the user doesn't need to clear the previously selected date range.

If the END_DATE (Thu, Oct27 in the screenshot) is activated, user can select any date after START_DATE, and the range will be updated. If the user clicks a date before START_DATE, the selection will change to single day and the date clicked will be selected.

There's also a RESET button which is shown during a date range selection (in the top-right corner). This button resets the range, selects a single date ==> the START_DATE. Clicking this button in the screenshot will change date selection to SINGLE and select Mon, Oct 10.

In short:

• click on START_DATE in the header to activate it ==> pick a date in the calendar below ==> if picked date is < END_DATE, range is updated ==> if picked date is >= END_DATE, selection mode is changed to SINGLE and clicked date is selected.
• click on END_DATE in the header to activate it ==> pick a date in the calendar below ==> if picked date is > START_DATE, range is updated ==> if picked date is <= START_DATE, selection mode is changed to SINGLE and clicked date is selected.

Well, this is the current behaviour and it was a lot to implement (phew, took me a while!). I find this intuitive. But, we can of course discuss any changes that may be required.

Sorry about the long post :) I realize that all of this should go into the README file.

[Rainer-Lang]

@vikramkakkar I will separate my answers :)

First: Instructive message for range selection But please add a method to reset the GOT IT decision of the user. Because then it's possible that the user could read it again (possible done by the dev eg as an option in settings "Show date range selection text" - something like that). All texts should be ready to change and translation. But I think this is no problem, isn't it?

And YES - I think your suggestion will be fine. But we have to see it - right? ;)

[Rainer-Lang]

Date range selection: I saw it - it is possible to select a date range beyond month borders.

I have a little suggestion for the ui so the user can see better that the range selection ends in a next month: Don't "round" the range selection at the end of one month and the beginning of the other month - make it rectangular. Of course it's great to see the start and end date in the header above the calendar. I can select the start and end date in the header (the text is white) but nothing happens. What about to jump to this selected date or BETTER highlight this date so the user sees that he can now change this date? For me the start/end dates in the header should have more "connection" to the selection in the calendar. Maybe we can discuss this in a separate issue if you want.

To the range selection "reset"-icon: Is it possible to change it - for me as a dev? I'm not sure if this icon really fits....but for now I don't have a better one..... :) So maybe you let the dev define it himself via a method?

Please don't misunderstand my suggestions/ideas. I really appreciate and like your work/lib! :+1:

[Rainer-Lang]

@vikramkakkar

• What about a time range selection? :-D
• Can I disable dates, so the user can't select them?
• Is it possible to define a min/max time?
• Is it possible to define a min/max datetime?

[Rainer-Lang]

ping :)

[vikramkakkar]

Hi @Rainer-Lang, work's keeping me busy.

Okay, I worked on the date range selection tutorial for a bit. Here's what I have: Link. I am not sure if the explanation would be easy enough for the user to understand. What do you think?

[CCorrado]

This looks very cool man!