Archive | Android RSS feed for this section

A Better Android DatePicker Plug-in for Cordova

14 Apr

Cordova (previously PhoneGap) needs no introduction. It’s the best solution to deploy websites developed using HTML, CSS and Javascript as a native app over wide range of mobile devices. Certainly mobile app built using web technologies has it’s own share of advantages and disadvantages, but this is not up for discussion in this post.

I’ve searched quite a few times in past for a way to invoke native DatePicker on Android using Cordova or any of it’s plug-in. Finally, I found one over official PhoneGap Plugins page. For starter, it serves the need as it pops the DatePicker and allows developers to capture the date selected using DatePicker in Javascript.

But as I started using it, there’re following few features I found missing in this plugin, especially in case of newer Android OSes (> 4.0) –

  1. You cannot set Minimum and/or Maximum Date in DatePicker. So, if there’s specific need to have date range, this plugin certainly fails to provide proper solution. It happens on all Android OSes.
  2. On Android OS > 4.0, the DatePicker loses Cancel button. I checked and this issue is with Android ICS itself, but it would be nice to have that button just in case user don’t want to enter anything once DatePicker is popped open.
  3. Also on Android OS > 4.0, user is no really required to press done to set date. Any action performed like clicking hardware back, or clicking outside the DatePicker pop-up, results in selection of date. Again this is default feature to ICS versions but definitely it’s a bad User Experience.

 

I searched over various StackOverflow threads but none of them were able to solve these issues completely, though in parts some of the issues were solved. So, I decided to create my own plugin. Of course, I’ve taken the existing plugin and created my own. You can find revised plugin at my GitHub page.

I tried to address all the issues I listed above. Using this plugin is quite easy, just like any other Cordova plugins. Just follow the instructions in the readme.md file in the project or go through the following steps –

Step 1: Copy and Reference –

Just copy datePickerPlugin.js file to your ‘www’ folder. Create a package com.bikasv.plugins.datepicker and put DatePickerPlugin.java file into this package. Now update your res/xml/config.xml with following lines –

<plugin name="DatePickerPlugin" value="com.bikasv.plugins.datepicker.DatePickerPlugin"/>
 

Step 2: Invoke –

Call following function if you need DatePicker –

    function handleDates(elm, options) {
        event.stopPropagation();
        var currentField = $(elm);
        var opts = options || {};
        var minVal = opts.min || 0;
        var maxVal = opts.max || 0;

        var myNewDate = Date.parse(currentField.val()) || new Date();
        if(typeof myNewDate === "number") {
            myNewDate = new Date (myNewDate);
        }

        window.plugins.datePicker.show({
            date : myNewDate,
            mode : 'date',
            minDate: Date.parse(minVal),
            maxDate: Date.parse(maxVal)
        }, function(returnDate) {
            if(returnDate !== "") {
                var newDate = new Date(returnDate);
                currentField.val(getFormattedDate(newDate));
            }
            currentField.blur();
        });
    }

And following for TimePicker –

    function handleTime(elm) {
        var currentField = $(elm);
        var time = currentField.val();
        var myNewTime = new Date();

        if(time) {
            myNewTime.setHours(time.substr(0, 2));
            myNewTime.setMinutes(time.substr(3, 2));
        }
        plugins.datePicker.show({
            date : myNewTime,
            mode : 'time'
        }, function(returnDate) {
            if(returnDate !== "") {
                var newDate = new Date(returnDate);
                currentField.val(getFormattedTime(newDate));
            }

            currentField.blur();
        });
    }

Step 3: Done –
Now you can see the result. A DatePicker with ability to set Minimum and Maximum date. See following screenshots as it appears on Android 4.0+ devices:
With Max Date With Min Date Time Picker
 

This plugin solves all three issues I’ve mentioned.

  1. You can set Minimum and Maximum date on DatePicker, and this works on all Android OSes.
  2. Cancel button is now present in DatePicker – something which is improvement over stock DatePicker.
  3. Clicking outside the DatePicker will do nothing, neither closes the pop-up nor update the date. Hardware Back button will not update the date as well. Again this is UX improvement over stock DatePicker.

Found any bugs or have any suggestions? Create an issue over GitHub issues page.

Project Link …

Advertisements

Take control of your Android – Tasker!

2 Aug

With my growing love towards great open world of Android and it’s being hard to cover them in one, I decided to start a blog series – Take control of Android. This series will primarily deal with the various tools and methods that helps to automate practically any task on Android. Also, there will be some tools discussed that will add ease of use and remote access to Android. Even if you happen to know a few things, I surely hope you’ll learn something new in this series.

Today, the app in discussion is Tasker – arguably best task automation tool available on Android platform. Tasker is not free though, and you’ve to shell out Rs. 346.94 to get your hands on it. But I must say, it’s totally worth it’s price and you won’t regret buying it.

Once downloaded and installed, you can create Profiles which contains Tasks to be automated. One example is shown below –

Now, although Tasker is automating tool and is supposed to do repeated task with ease, the app itself is not that easy to use. There is small, not much I assure you, learning curve associated with this app. So, let me walk you through Tasker by creating one simple automated task.

For our purpose, let’s create a task to send SMS when we create Missed Call from our Favorite contact. Remember, this task will only send the SMS when a call is missed by the person who is in your favorite contact list. For everyone else, no action will be performed. So, let’s get started.

Click + on Profiles menu and give it some name. A new window will pop up asking to select First Context. First context is the condition which will be satisfied to execute the task. In our case this is a missed call from favorite contact.

Now select State in the menu and then select Phone and finally Missed Call.

Now select favorite contacts, either by typing C:FAV or by using search icon above the text box. Click check mark, and you’ll be presented with Tasks screen.

Now click new task, and in next screen click + icon. You’ll now be presented with Action categories.

Choose Phone option here and scroll to bottom to select Send Sms option. Now type in the number of contact to whom SMS is to be sent, and the message and click the check mark. You’ll see the new Task created. Now click the check mark of this screen to have your profile configured.

Now, whenever you receive a missed call, the phone will automatically send the predefined text to the given contact.

You can add multiple tasks to the profile as well. Also, you can further customize the task by having Exit Task (task which will be performed once the main task is performed), moving the existing task to Exit Task, Change Task or Unlink Task. Just long press the task menu and you’ll get these options.

One of the coolest features of Tasker is the ability to export task in various formats, but the most promising being able to export them as an app. Just long press any of the task and select Export. Now select As App in next screen.

For app creation Tasker App Factory is required. If you haven’t installed it already, Tasker prompts you to install it. Also, the task must have an icon for this process to complete.

Once prerequisite is met, the export process will be started. Once the process finishes, the app will be ready and an icon will be shown, which on click, installs the new app.

This was just one example to simplify your life by automating the task, Taskers have many such arsenals under it’s belt. For example, for me, it automatically turns on the WiFi and disables the mobile internet when I reach home or the office. For rest of the places, it does the opposite.

Although, Tasker is very handy, very powerful and very versatile app, there’s a few gripes while using the app. I’d like you to know it before you spend your hard earned money on this app –

  • Tasker doesn’t catch the location with ease. So, the location based tasks may fail sometimes.
  • There are too many screens involved in creating single profile.
  • Corollary to above, developers might have provided with pre-defined profiles, those which are very commonly used.
  • Help should be bundled with the app rather than being online. Demo examples would be great.
  • Has a learning curve that can fend away novice users.

There are areas where Tasker shines compared to other automation apps (their review will come soon) –

  • Unlike some, Tasker is completely offline utility and doesn’t require external server to host tasks.
  • Already feature-rich Tasker, can further be enhanced with the help of plugins, which is abundant.
  • Memory usage of Tasker is quite less and doesn’t drain the battery much.

It’s clear that Tasker is quite powerful utility and it’s stated flaw is not as much as it’s benefits. But if you still want to have review of other similar tools before buying Tasker, I suggest you to check this blog in a while. I’ll covering a lot of automation tools.

%d bloggers like this: