Building Your First App for Android and iOS on Apple Mac OS X Using Multi-OS Engine

Intel® Developer Zone offers tools and how-to information for cross-platform app development, platform and technology information, code samples, and peer expertise to help developers innovate and succeed. Join our communities for Android, Internet of Things, Intel® RealSense™ Technology and Windows to download tools, access dev kits, share ideas with like-minded developers, and participate in hackathon’s, contests, roadshows, and local events.

This tutorial will guide you to your first cross-platform application using the Multi-OS Engine installed on Mac OSX* which we refer to as local build. You can also develop your Android* and iOS* applications in Android Studio on Windows* but in order to simulate your iOS application, you will need to remotely deploy your app to a Mac system running Xcode* (hence remote build). For this scenario, check our getting started guide with Multi-OS Engine (remote build).

In this tutorial, I will show you how to create a simple Hello World application for Android and iOS with code-sharing between the two applications. In a real-world scenario, most of your application logic will be shared.

Prerequisites

To get started, you need to meet the minimum software requirements below:

1. Android Studio* 1.0 or higher
2. Xcode* 6 or higher
3. Java* Development Kit 1.7 or higher
4. Android SDK

Overall workflow

The workflow to creating Android and iOS apps is relatively simple.

1. In order to create an iOS application in Android Studio, we first need to start with an Android Project.
2. We then create a Multi-OS Engine module (which will be the iOS application)
3. For application-code sharing, we create a module called common (shared Java library)
4. We then add the common module as a dependency for the Android and iOS application
5. Finally, we configure the Gradle* scripts, build and launch our apps.

Creating our first Android and iOS applications with shared logic

In the Project pane, right click anywhere choose New > Intel Multi-OS Module

1. Create an Android Project in Android Studio
2. Enter your Application name, Company Domain and choose a location where you want to save your project. A good practice is to store your projects in a folder called Project under your username. You may wish to follow the exact steps described here to make sure you do not stumble onto any problems. Pay attention to the auto-generated package name (com.mycompany.myfirstapp) which is in lower caps. Click Next.

   

3. Configure your target device and API level settings. If you just want to just get started, simply proceed with the default settings by clicking Next.
4. Choose "Blank Activity" in the Add an activity to Mobile window and click Next.

5. In the Customize the Activity window, you may wish to leave the settings unchanged. Click Finish to accept the default configuration.

6. At this point, Android Studio has created an Android project. In the Project pane, you will notice theapp module. This module is your Android application. We will now proceed with adding a Multi-OS Engine module, which will eventually be your iOS application.

   

7. Click on Hello World application and click Next

   

8. In this window, you will create an Xcode project. Later you may wish to open the iOS project created by Android Studio, in Xcode, especially if you would like to use Xcode’s Storyboard to design your native user interface. Enter the Xcode project name (usually the name of your application), Product name (application name), organization and company ID details.

   In this example, we will enter the following details to match Android S:

   Xcode project name: myfirstappProduct name: myfirstappOrganization Name: mycompanyCompany Identifier: com.mycompany

   
9. Click Next to configure the new module. The module will be an iOS module. Therefore let’s name it "iOS". Click Finish.

   We have now created an iOS application in Android Studio. If Android Studio prompts you to synchronize the Gradle scripts, please do so. In the next steps, we will create a "common" module, which will, as the name suggests, common Java code for our Android and iOS applications.

   Now, let’s proceed with creating a "common" module which will hold our shared application logic (Java). In our simple example, our shared logic will simply be a Java object which has a method called sayHello() that returns a Java String.

10. Again the Project pane, right click and add a new Module:
11. In the New Module window, choose "Java Library" and click Next.
12. We recall that this library will contain all our shared (common) application logic. Therefore, let’s name it "common" and have our first Java class called "AppLogic". Also edit the Java package name as per the patterns that were generated for other modules. In general, it will be like this: company_domain_in_reverse.appname.common, for examplecom.mycompany.myfirstapp.common

    

13. Click finish and let Android Studio refresh the Projects pane and the Gradle scripts.

    We will now add some code to our AppLogic class.

14. Navigate to common > java > com.mycompany.myfirstapp.common and open the AppLogic class. Replace the contents with the following (code in bold are newly added/edited lines):

    package com.mycompany.myfirstapp.common;
    
    public class AppLogic {
      private String myString;
    
      public AppLogic(){
       this.myString = "Hello World from common";
     }
    
      public String sayHello(){
       return this.myString;
    }
    }

    Finally, let’s add the common module as a dependency in the Android and the iOS apps. Note: They are called "app" and "iOS" respectively in the Project pane.

15. Select any module’s root (right now, you have three, namely app, iOS and common). Right click and choose Open Module Settings.

    

16. For both app and iOS modules, add the common module in the Dependencies tabs. To do this, you click on the + sign at the bottom and click Module Dependency and then you choose common in the list.

    

    After you have added the common module as a dependency to the iOS module, the module settings for iOS should look like this:

    

    Do the above for the app module as well:

17. The Java code in the common module will be compiled by the Java compiler. The module has its own Gradle* script for the build process. We need to update our script to tell Gradle which version of Java will be used to compile our module. Open the Gradle script for the common module (Gradle Scripts > build.gradle (Module: common)) and add the following at the end:

    compileJava {
      targetCompatibility = 1.7
      sourceCompatibility = 1.7
    }

    

    Now, let’s code a small Android application that has a button and a text field. When you click on the text field, you call the method sayHello() of the shared AppLogic object.

18. For the Android app, open the activity_main layout (app>res>layout>activity_main.xml). If you see XML code, simply click on the Design tab at the bottom to switch to a graphical interface. There should already be a Hello World text field there. Let’s add a button by dragging a button from the palette to the phone. Double click on the button and rename it to "Click Me!". Pay attention that the ID of the button is called "button". Android locates elements on the screen by their IDs. The existing Hello World text has the ID textView. You can see this either in the Component Tree pane or in the XML file (to view the XML code, click on Text tab at the bottom)

    

19. Next in our MainActivity (app > package com.mycompany.myfirstapp > MainActivity), we import our common module and add some logic to our newly-created button (See code snippet 1). The bold lines are pieces of code that are added. For classes like Button and View which are provided in the Android SDK, you can always press Option+Enter to auto-import the relevant packages.

20. Optional: You can test the new Android app on a real device or on an Emulator. You do this by editing the configurations of the Android app. In the configurations menu, you can choose the target device. Please consult in the official Android documentation for more information on executing an app on a real device or on a virtual device.

    

Now, let us create the iOS app.

1. From the Projects page, open the AppViewController java file. (iOS > java > com.mycompany.myfirstapp > ui > AppViewController). Edit the code to import the common module and add the necessary logic to the button. Note: a button was automatically created when the Hello World Multi-OS Engine Module was added. See code snippet 2 below for the whole code. The bold lines are lines that were added/edited.

2. The code for our iOS app is ready. From there, let’s execute the iOS app in the iOS Simulator. To do that, choose iOS from the dropdown menu as in the screenshot below:

   

   

3. Voilà! You now have a classic Hello World application running on Android and iOS with code sharing.

   This was cool! Where do I go from here? You may wish to check out our more advanced samples in the sample folder: /Applications/Intel/INDE/multi_os_engine/samples

   Feel free to play around. If you have any difficulties, do not hesitate to ask your questions on our dedicated forum. Also, watch out for our blogs for updates and features regarding the Multi-OS Engine.

Code Snippets

Code snippet 1 – Android (MainActivity.java)

package com.mycompany.myfirstapp;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.Menu;
	import android.view.MenuItem;import android.view.View;
	import android.widget.Button;
	import android.widget.TextView;
	/* Import our common module */
	import com.mycompany.myfirstapp.common.*;
	public class MainActivity extends AppCompatActivity {
	   AppLogic al = new AppLogic();
	   Button button;
	   TextView tv;
	   @Override
	   protected void onCreate(Bundle savedInstanceState) {
	     super.onCreate(savedInstanceState);
	     setContentView(R.layout.activity_main);
	     button = (Button) findViewById(R.id.button);
	     tv = (TextView) findViewById(R.id.textView);
	     button.setOnClickListener(new View.OnClickListener() {
	       @Override
	       public void onClick(View v) {
	         tv.setText(al.sayHello());
	       }
	     });
	   }
	   @Override
	   public boolean onCreateOptionsMenu(Menu menu) {
	     // Inflate the menu; this adds items to the action bar if it is present.
	     getMenuInflater().inflate(R.menu.menu_main, menu);
	     return true;
	   }
	   @Override
	   public boolean onOptionsItemSelected(MenuItem item) {
	     // Handle action bar item clicks here. The action bar will
	     // automatically handle clicks on the Home/Up button, so long
	     // as you specify a parent activity in AndroidManifest.xml.
	     int id = item.getItemId();
	     //noinspection SimplifiableIfStatement
	     if (id == R.id.action_settings) {
	       return true;
	     }
	     return super.onOptionsItemSelected(item);
	   }
	}

Code snippet 2 – iOS – AppViewController.java

package com.mycompany.myfirstapp.ui;
	import com.intel.inde.moe.natj.general.NatJ;
	import com.intel.inde.moe.natj.general.Pointer;
	import com.intel.inde.moe.natj.general.ann.Generated;
	import com.intel.inde.moe.natj.general.ann.Owned;
	import com.intel.inde.moe.natj.general.ann.RegisterOnStartup;
	import com.intel.inde.moe.natj.objc.ObjCRuntime;
	import com.intel.inde.moe.natj.objc.ann.ObjCClassName;
	import com.intel.inde.moe.natj.objc.ann.Property;
	import com.intel.inde.moe.natj.objc.ann.Selector;import com.mycompany.myfirstapp.common.AppLogic;
	import ios.NSObject;
	import ios.uikit.UIButton;
	import ios.uikit.UILabel;
	import ios.uikit.UIViewController;
	@com.intel.inde.moe.natj.general.ann.Runtime(ObjCRuntime.class)
	@ObjCClassName("AppViewController")
	@RegisterOnStartup
	public class AppViewController extends UIViewController {
	   AppLogic al = new AppLogic();
	   static {
	     NatJ.register();
	   }
	   @Generated("NatJ")
	   @Owned
	   @Selector("alloc")
	   public static native AppViewController alloc();
	   @Generated("NatJ")
	   @Selector("init")
	   public native AppViewController init();
	   @Generated
	   protected AppViewController(Pointer peer) {
	     super(peer);
	   }
	   public UILabel statusText = null;
	   public UIButton helloButton = null;
	   @Override
	   @Selector("viewDidLoad")
	   public void viewDidLoad() {
	     statusText = getLabel();
	     helloButton = getHelloButton();
	   }
	   @Selector("statusText")
	   @Property
	   public native UILabel getLabel();
	   @Selector("helloButton")
	   @Property
	   public native UIButton getHelloButton();
	   @Selector("BtnPressedCancel_helloButton:")
	   public void BtnPressedCancel_button(NSObject sender){
	     statusText.setText(al.sayHello());
	   }
	}