Category: Android

VNC to your rooted Android via USB

VNC to an Android is no big deal provided the platform is completely open and based on Linux. There are already some VNC servers for Android out there and droid VNC server is one you can download straight from the Market.

Usually you would VNC to your Android device via WiFi as it’s the easiest way, but in the occasion that WiFi is not available, you can also do this via USB connection… though it’s a bit hacky 🙂

First, you need to make sure the followings are installed:

  1. A VNC server in your Android device. I use droid VNC server which can be found in the Android App Market on the device.
  2. Any VNC client on your computer such as RealVNC viewer.
  3. The USB driver for your Android device. For example, HTC devices need to install HTC Sync to get the proper USB driver installed (you can uninstall HTC Sync after installing it if you don’t plan to use it).
  4. Latest version of JDK (note: not JRE).
  5. Latest version of Android SDK.
  6. Make sure <strong>Android SDK Platform-tools</strong> is installed from the SDK manager. If not, you can install it in the <strong>Available packages</strong> section.
    Install Android SDK Platform-tools from Android SDK and AVD Manager

After you’ve installed the above, try these steps:

  1. Make sure your Android device is rooted.
  2. Turn on USB debugging mode in your device: Settings > Applications > Development > USB debugging.
  3. Connect your device to Windows and let it install the drivers automatically. You should be able to see at least an Android USB device showing up in the Windows Device Manager.
    Android USB Device showing up in Windows Device Manager
  4. Start the VNC server on your device and note down the VNC port it is using. For droid VNC server, the default port is 5901.
  5. Start a command prompt in Windows and execute the following:
    cd C:\Program Files\Android\android-sdk-windows\platform-tools
    adb forward tcp:5901 tcp:5901
  6. Start your VNC client and connect to localhost:5901.

You may need to repeat step 5 each time before you need to connect to your device, so it’s a good idea to make a BAT file for it.

This is it. If you are lucky enough, then you’ll be VNCing to your device now. However, connecting via USB doesn’t provide any perceivable improvements on performance. So unless WiFi is really not available, I recommend going with the “normal” way.

RealVNC Viewer connecting to Android

Journey through the clickable elements for Android

Before going into the topic, I have to say, mobile browser compatibility issues are much uglier than desktop browsers. I should have appreciated the days when I was a desktop web guy:)

When there are more and more mobile devices with large touch screen available, a lot of companies are making touch friendly version of their websites for those devices. For example, Google Reader for iPhone and Android devices, and mobile portal of St. George Bank.

One thing you would notice is that they all use large clickable area for the finger to press. These are usually not implemented with buttons or images, rather using the anchor tag <a>.

Of course there are many ways to implement this, but when it comes to Android devices, things are becoming a bit tricky.

You see, when you pressed on a clickable element in the Android browser, you usually see the orange border telling you that you have pressed the element and the browser is doing it’s work right now:
Android browser highlighting pressed hyperlink

Ideally this should happen when you press on anywhere of the clickable element including the empty area. But the fact is, it doesn’t work so for all the implementations. In fact, it only works with 1 hacky implementation. Let’s us view the following 4 examples in the default Android browser:

Method 1

Wrapping a <a> with 100% width/height in <div>

Method 2

Wrapping a <span> displayed as block in <a>



<a>
    <span style="display: block">
        Contents...
    </span>
</a>


Method 3

Wrapping a <div> in <a>


<a style="display: block;">
    <div>
        Contents...
    </div>
</a>

The large empty area in the above examples are intended for your finger to press on them. If you really try these on the default Android browser, you’ll notice only Method 3 is a fully working implementation, as the browser still highlights the entire clickable block when pressing on the empty area. This is bad because method 3 is a non-standard compliance implementation (wrapping the block level element <div> in the line level element <a>), which means there’s no guarantee for the browser to support it in any future versions.

So it’s pretty clear that there’s only 2 options ahead: you either disregard the standard and go with the visually correct method (3) or stick to the standard and leaving a less perfect user experience on your website hopping it would be fixed in the Android browser one day.