Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history 
Rearranged the sample images into a table to save space
  • Loading branch information
@chrisonline
chrisonline authored Jan 18, 2017
1 parent 18a1d65 commit 8e76069
Showing 1 changed file with 75 additions and 72 deletions.
147 changes: 75 additions & 72 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,85 +13,88 @@ SublimePicker provides a single point of entry to all three pickers. What I mean
Gradle dependency
-----------------

`compile 'com.colapps.sublimepickerlibrary:sublimepickerlibrary:2.1.2'`
`compile 'com.colapps.sublimepickerlibrary:sublimepickerlibrary:2.1.3'`

Walkthrough
-----------
Following screenshots have been taken from the sample application: [<img alt="Get it on Google Play" height="45px" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png" />][1]

Launching into **DatePicker**:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_v2.png?raw=true" width="497" height="1000" />
</p>

Version 2 allows date-range selection using `SublimeOptions#setCanPickDateRange(boolean)`. Picking date range is _one fluent gesture_ which begins with a long-press on the intended start-date, followed by a drag onto the intended end-date. The range can span as many days, months or years, as needed. During a drag, approaching the left/right edge of date picker scrolls the previous/next month into view.

Date range selection:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_v2.png?raw=true" width="497" height="1000" />
</p>

Landscape:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_land_v2.png?raw=true" width="800" height="397" />
</p>

Date range selection spanning multiple months:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_spanned_v2.png?raw=true" width="497" height="1000" />
</p>

Button at bottom-left corner can be used to switch to **TimePicker**:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/time_picker_v2.png?raw=true" width="497" height="1000" />
</p>

Landscape:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/time_picker_land_v2.png?raw=true" width="800" height="397" />
</p>

The overflow button at top-right opens the **RecurrencePicker**:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_picker_v2.png?raw=true" width="497" height="1000" />
</p>

Choosing **Custom...** from this menu brings you to **RecurrenceOptionCreator**:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_v2.png?raw=true" width="497" height="1000" />
</p>

Picking **Until a date** from the bottom spinner & clicking on the date shows a stripped down version of DatePicker:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_end_date_v2.png?raw=true" width="497" height="1000" />
</p>

**Sample Application**:

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_v2.png?raw=true" width="497" height="1000" />
</p>

Results of the selection in **sample application** (single date):

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_single_date_v2.png?raw=true" width="497" height="1000" />
</p>

Results of the selection in **sample application** (date range):

<p align="center">
<img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_date_range_v2.png?raw=true" width="497" height="1000" />
</p>
<table><thead>
<tr>
<th align="center">Date Picker</th>
<th align="center">Date Range Selection</th>
<th align="center">Date Range Multiple Months</th>
</tr>
</thead><tbody>
<tr>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_v2.png?raw=true" alt="Launching into **DatePicker**" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_v2.png?raw=true" alt="Monitor" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_spanned_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/date_picker_date_range_spanned_v2.png?raw=true" alt="Date range selection spanning multiple months" style="max-width:100%;"></a></td>
</tr>
<tr>
<td align="center"><em>Launching into DatePicker</em></td>
<td align="center"><em>Date Range Selection Mode</em></td>
<td align="center"><em>Date Range Selection Months</em></td>
</tr>
</tbody></table>

Button at bottom-left corner can be used to switch to TimePicker:

<table><thead>
<tr>
<th align="center">Time Picker</th>
<th align="center">Recurrence Picker</th>
</tr>
</thead><tbody>
<tr>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/time_picker_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/time_picker_v2.png?raw=true" alt="Swtich to TimePicker" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_picker_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_picker_v2.png?raw=true" alt="The overflow button at top-right opens the RecurrencePicker" style="max-width:100%;"></a></td>
</tr>
<tr>
<td align="center"><em>The overflow button at top-right opens the RecurrencePicker</em></td>
<td align="center"><em>Quick Selection or Custom</em></td>
</tr>
</tbody></table>

<table><thead>
<tr>
<th align="center">RecurrencePicker</th>
<th align="center">Custom View</th>
<th align="center">Until Date - DatePicker</th>
</tr>
</thead><tbody>
<tr>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_picker_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_picker_v2.png?raw=true" alt="The overflow button at top-right opens the RecurrencePicker" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_v2.png?raw=true" alt="Choosing Custom... from this menu brings you to **RecurrenceOptionCreator" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_end_date_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/recurrence_option_creator_end_date_v2.png?raw=true" alt="Choosing Custom... from this menu brings you to **RecurrenceOptionCreator" style="max-width:100%;"></a></td>
</tr>
<tr>
<td align="center"><em>Quick Recurrence Options and Custom</em></td>
<td align="center"><em>Options including Forever, Count and Until Date</em></td>
<td align="center"><em>Until a date shows a stripped down version of DatePicker</em></td>
</tr>
</tbody></table>

<table><thead>
<tr>
<th align="center">Sample Application</th>
<th align="center">Results single date</th>
<th align="center">Results date range</th>
</tr>
</thead><tbody>
<tr>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_v2.png?raw=true" alt="Sample Application" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_single_date_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_single_date_v2.png?raw=true" alt="Results of the selection in sample application (single date)" style="max-width:100%;"></a></td>
<td align="center"><a href="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_date_range_v2.png?raw=true" target="_blank"><img src="https://github.com/vikramkakkar/SublimePicker/blob/master/img/sampler_results_date_range_v2.png?raw=true" alt="Results of the selection in sample application (date range)" style="max-width:100%;"></a></td>
</tr>
<tr>
<td align="center"><em>View of the sample application</em></td>
<td align="center"><em>Results of the selection in sample application (single date)</em></td>
<td align="center"><em>Results of the selection in sample application (date range)</em></td>
</tr>
</tbody></table>

**How-to**s will be added in a day or two...

Expand Down

0 comments on commit 8e76069

Please sign in to comment.