Viewing the app using Genymotion for Android

While it's possible to install the Google Android simulator, many developers have an inconsistent experience on a Mac. 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 the Android model and version, supporting networking from within the app, and allowing SD card simulation.

In this section, you will learn how to set up 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/studio/index.html.

   Note

   You might be asked to install other libraries if your machine doesn't have the correct dependencies. If that is the case, you should run sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6 from the command line to install.

2. Run Android Studio.
3. You need to install all the required packages, such as Android SDK. Just click Next twice at the setup wizard screen and click on the Finish button to start the packages' installation.
   
4. After the installation is completed, you need to install additional packages and other SDK versions. On the Quick Start screen, select Configure, as illustrated:
   
5. After this, select SDK Manager, as shown:
   
6. It's good practice to install the 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. Click on the Install packages… button.
8. Check the box on Accept License and select Install.
9. The SDK Manager will give you an SDK Path on the top. Make a copy of this path because you need to modify the environment path.
10. Go to the terminal and type the following command:

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

11. This 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 next step is to install and configure Genymotion. Download and install Genymotion and Genymotion Shell from genymotion.com.
16. Run Genymotion.
17. Click on the Add button to start adding a new Android device, as illustrated:
    
18. Select a device that you want to simulate. In this case, let select Samsung Galaxy S5, as follows:
    
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 that 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 have to go through the same process over. 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 easy to add another virtual device in Genymotion and connect to it.