Viewing the app using Genymotion for Android

Although it's possible to install the Google Android simulator, many developers have inconsistent experiences on a Mac computer. There are many commercial and free alternatives that offer more convenience and a wide range of device support. Genymotion provides some unique advantages such as allowing users to switch Android model and version, supporting networking from within the app, and allowing SD card simulation.

In this recipe, you will learn how to set up an Android developer environment (on a Mac in this case) first. Then you will install and configure Genymotion for mobile app development.

How to do it...

1. The first step is to set up the Android environment properly for development. Download and install Android Studio from https://developer.android.com/sdk/index.html.
2. Run Android Studio.
3. You need to install all required packages such as the Android SDK. Just click on Next twice at the Setup Wizard screen and select the Finish button to start packages installation.
   
4. After installation is complete, you need to install additional packages and other SDK versions. At the Quick Start screen, select Configure:
   
5. Then select SDK Manager:
   
6. It's a good practice to install a previous version such as Android 5.0.1 and 5.1.1. You may also want to install all Tools and Extras for later use.
   
7. Select the Install packages... button.
8. Check the box on Accept License and click on Install.
   
9. The SDK Manager will give you SDK Path on the top. Make a copy of this path because you need to modify the environment path.
10. Go to Terminal and type:

    $ touch ~/.bash_profile; open ~/.bash_profile
    

11. It will open a text editor to edit your bash profile file. Insert the following line where /YOUR_PATH_TO/android-sdk should be the SDK Path that you copied earlier:

    export ANDROID_HOME=/YOUR_PATH_TO/android-sdk
    export PATH=$ANDROID_HOME/platform-tools:$PATH
    export PATH=$ANDROID_HOME/tools:$PATH
    

12. Save and close that text editor.
13. Go back to Terminal and type:

    $ source ~/.bash_profile
    $ echo $ANDROID_HOME
    

14. You should see the output as your SDK Path. This verifies that you have correctly configured the Android developer environment.
15. The second step is to install and configure Genymotion. Download and install Genymotion and Genymotion Shell from Genymotion.com.
16. Run Genymotion.
17. Select the Add button to start adding a new Android device.
    
18. Select a device you want to simulate. In this case, let's select Samsung Galaxy S5:
    
19. You will see the device being added to "Your virtual devices". Click on that device:
    
20. Then click on Start.
    
21. The simulator will take a few seconds to start and will show another window. This is just a blank simulator without your app running inside yet.
    
22. Run Genymotion Shell.
23. From Genymotion Shell, you need to get a device list and keep the IP address of the device attached, which is Samsung Galaxy S5. Type devices list:
    
24. Type adb connect 192.168.56.101 (or whatever the IP address was you saw earlier from the devices list command line).
25. Type adb devices to confirm that it is connected.
26. Type ionic platform add android to add Android as a platform for your app.
27. Finally, type ionic run android.
28. You should be able to see the Genymotion window showing your app.
    

Although there are many steps to get this working, it's a lot less likely that you will have to go through the same process again. Once your environment is set up, all you need to do is to leave Genymotion running while writing code. If there is a need to test the app in different Android devices, it's simple just to add another virtual device in Genymotion and connect to it.