Projecting ODK Collect onto another screen

This guide helps the users to project ODK collect onto a screen. There are various methods available to do this, some of the methods are discussed below:

Using Vysor

Vysor is an extension for the Google Chrome browser that connects to an app on your smartphone. This extension enables you to control your phone from your PC or Mac using the mouse/trackpad and keyboard.

Before proceeding further make sure USB Debugging mode is enabled:

Enable USB Debugging Mode on Android

  1. Go to Settings, choose About phone.
  2. Scroll down and tap Build number seven times.
Image showing build number
  1. Go back to Settings and there you will find Developer options in the menu.
Image showing developer options
  1. Scroll down and enable USB debugging mode.
Image showing USB debugging mode
  1. Confirm the action when prompted.

Note

Windows users should make sure that they have downloaded Universal ADB Drivers.

Follow the instructions given below to use Vysor:

  1. Make sure you have Google chrome installed, if not download it from here.
  2. Download Vysor extension.
  3. Click on Add To Chrome
Vysor download
  1. Confirm your action by clicking on Add app.
Vysor add app button

Warning

On Windows, You may get an error WebGL is not supported

Image on WebGL error

To fix this, follow the procedures given below:

First, we need to enable hardware acceleration:

  1. Go to chrome://settings, scroll down and click on Advanced.
Image showing advanced settings

  1. In the System section, ensure the Use hardware acceleration when available is enabled. You'll need to relaunch Chrome for any changes to take effect. Click on RELAUCH
Image showing hardware acceleration option

  1. Then, we need to enable WebGL, go to chrome://flags, scroll down and search for WebGL 2.0. From the drop-down list choose Enabled.
Image showing enabled WebGL 2.0

Now you can return to Vysor extension and install it again.

  1. After adding the extension, you would be able to see it in the chrome toolbar, if it is not visible there go to chrome://apps and you would be able to see there.
Image showing vysor app
  1. Launch the extension and connect your phone through USB.
Image showing options after launching vysor
  1. Click on Find Devices, select your device and click on Select.
Image showing options to find and select devices.
  1. After clicking Select, Vysor would be automatically downloaded to your phone, and you will be able to see your phone screen.
phone screen on vysor
  1. Click on the Collect app and there you go, you have successfully projected your phone screen.
Image showing collect-app after launching vysor

Using Android Studio

Android Studio is the official IDE for Android. It provides tools for building apps for every type of Android device. Android Emulator can be used to test your app virtually on any Android device configuration.

Follow the procedures given below to run your app on the emulator:

  1. Download Android Studio with SDK according to your platform.
  2. Here is a tutorial on how to set up Android Studio according to different platforms.
  3. After installing, launch Android Studio and click on Start a new Android Studio project or if you have an existing project click on Open an existing Android Studio project.
Image showing Android studio screen
  1. To create a new project follow further steps but if you have an existing project skip to the step 9.
  2. Choose your project location and fill out the Application name and click on Next.
Image showing new project window
  1. Select the Phone and Tablet option and choose your Minimum SDK. Click on Next.
Image showing Target Android Devices window
  1. Select an Activity, Empty Activity is preferable. Click on Next.
Image showing window having various activities
  1. In Customize the Activity window, don't change the default options and click on Finish.
Image showing Customize Activity window
  1. After few minutes, you will be able to see the Android Studio main window, click on Image showing avd manager icon icon, alternatively, you can click on Tools then select Android, from the drop-down menu select AVD Manager.
Image showing Android Studio main window
  1. If you are an existing user list of all virtual devices would appear on the screen, to create a new virtual device, click on + Create Virtual Device…
Image showing list of virtual devices.
  1. In the Select Hardware window, choose a device definition for your virtual device. I have chosen Nexus 5, click on Next.
Image showing hardware window
  1. Select a system image, I have chosen Lollipop version.Click on Next.
Admin settings menu
  1. Enter your AVD Name, choose startup orientation and click on Finish.
Configuration verification menu

14 Now you would be able to see your virtual device in Android Virtual Device Manager. Click on image showing run icon to run your Android emulator.

Image showing updated virtual devices

Note

Please wait for some time as Android emulator takes very long time to start.

  1. After the emulator is started, you would be able to see the screen of your emulator. :
Image showing emulator screen.
  1. Now click on Image showing SDK manager icon to see the location of Android SDK.
Image showing SDK manager in the Android main window.
  1. Open the terminal and move to the platform-tools of the SDK directory.
$ cd platform-tools
  1. Copy the collect.apk into platform-tools folder. You can download the apk file from here.
  2. Type the following command to see the list connected devices:
$ adb devices

You should be able to see the emulator along with its port number, e.g emulator-5554, Here 5554 is the port number. If the emulator is not present in the list, restart the emulator.

To install apk file, in the emulator type the following command:

$ adb install collect.apk

If the command is successfully executed, you will find your file in the launcher of your emulator.

Image showing collect app on the emulator screen Image showing collect app on the emulator screen

Using Command Line

You can also run the emulator using command line. Follow the steps given below to start your emulator using the command line:

Note

If SDK installation has been put in another drive or folder instead of in its default location of $USER_HOME or $HOME. Make sure you have set the environment variables according to that. In the command line type the following command to set environment variables.

set ANDROID_SDK_ROOT=path\sdk\
  1. Open the terminal and move to the emulator folder of the SDK directory.
$ cd emulator
  1. For the list of available virtual devices, type the following command:
$ emulator -list-avds

Tip

If you are not able to locate emulator.exe file in SDK folder. Type the following command to know the location of the file:

$ which emulator

On Windows:

> where emulator
  1. Use emulator to start the emulator. Here avd_name is the name of Android virtual device that you have created.
$ emulator -avd avd_name

Note

  1. You can use sdkmanager command to update, install, and uninstall packages for the Android SDK. This method is not recommended as it is not user-friendly and also takes time.

    To create an emulator you need to download system image for a particular API level.

$ sdkmanager --verbose "system-images;android-19;google_apis;x86"
  • The --verbose option or -v option shows errors, warnings and all messages.
  • system-images;android-19;google_apis specifies the system image package for the Android virtual device.
  • android-19 specifies the API level. You can choose different API level if you want.
  1. To create and manage Android Virtual device from the command line, you can use avdmanager.

    After downloading system image, you can use the following command to create an emulator.

$ avdmanager -v create avd --name testAVD -k "system-images;android-19;google_apis;x86" -g "google_apis"
  • The create avd option creates a new Android virtual device.
  • --name option is a required option which is used to specify name of the AVD. Here, the name of the AVD is testAVD.
  • The -g specifies the sys-img tag to use for the AVD.
  • -k specifies package path of the system image for the AVD.

See also

You can also use Genymotion as an alternative as it is very fast as compared to custom android emulators. It is also easy to use and configure, and it is available free of cost for personal use.