In my earlier blog, I have discussed about how to setup the Android development platform in Eclipse. This blog will cover the steps to run the SAPUI5 in Android devices.

Steps to deploy and run SAPUI5 in Android devices using Phone Gap.


     Download the phone gap(2.9.0) from the following URL. http://phonegap.com/download


1.JPG


   Copy the contents to your local directory and unzip them.

2.JPG

Open the Eclipse Project for Android, explained in my earlier blog, Select the “Assets” folder and create a new folder named “WWW” under it

3.JPG

Copy the cordova.js, cordova-2.9.0.jar folders that you have download from the phonegap 2.9.0 folder to your project(WWW and libs folder respectively) as shown in the below picture. The path to the phoneGap 2.9.0 would be “phonegap-2.9.0\lib\android”


4.JPG

Right click on the Libs folder and make sure the project has the correct build path as shown


5.JPG

In the MainActivity.java file, perform the below changes,

6.JPG

7.JPG

     Copy and paste the following content into the “AndroidManifest.xml.

< supports-screens android:largeScreens=”true”

android:normalScreens=”true”

android:smallScreens=”true”

android:resizeable=”true”

android:anyDensity=”true” />

<uses-permission android:name=”android.permission.VIBRATE” />

<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />

<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />

<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />

<uses-permission android:name=”android.permission.READ_PHONE_STATE” />

<uses-permission android:name=”android.permission.INTERNET” />

<uses-permission android:name=”android.permission.RECEIVE_SMS” />

<uses-permission android:name=”android.permission.RECORD_AUDIO” />

<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />

<uses-permission android:name=”android.permission.READ_CONTACTS” />

<uses-permission android:name=”android.permission.WRITE_CONTACTS” />

<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />

<uses-permission android:name=”android.permission.GET_ACCOUNTS” />

<uses-permission android:name=”android.permission.BROADCAST_STICKY” />


8.JPG


Add the config changes attribute in the same file as highlighted below

9.JPG

Download the contents of SAPUI5 from SDN site.  http://scn.sap.com/community/developer-center/front-end

Copy the required mobile libraries from the downloaded contents as shown below and move it to WWW folder in your eclipse. I have other resources as well as it was required for my project.

10.JPG

11.JPG

Now copy your SAPUI5 developed application in to WWW folder of the project.

12.JPG

     Open the index.HTML file and add the cordova.js and Jquery files as shown

     <script type=“text/javascript” src=“resources/sap/ui/thirdparty/jquery/jquery-1.7.1.js”></script>

     <script type=“text/javascript” src=“resources/sap/ui/thirdparty/jqueryui/jquery-ui-position.js”></script>

     <script type=”text/javascript” src=”cordova.js”></script>

     Index.html file will look as below

13.JPG

    I have selected the Android Virtual device(AVD) and able to launch the SAPUI5 application.

14.JPG

/wp-content/uploads/2014/06/15_475603.jpg

Using the below option you can generate the .Apk file from Eclipse.


/wp-content/uploads/2014/06/16_475604.jpg


Thanks,

S.Rajkumar.


To report this post you need to login first.

21 Comments

You must be Logged on to comment or reply to a post.

  1. Nageswar Gurram

    Hello RajKumar,

    Your post is very helped me, thanks a lot.I followed everything as you discussed above to develop SAPUI5 Mobile App for Android platform, but I am getting issue with “super.loadUrl(“file:///android_asset/www/index.html”);”

    In LogCat it is showing many error messages like,

    Unable to open asset Url: file:///android_asset/www/collaboration/library-preload.json

    Please find attached screenshot for better understanding.

    Could you please suggest me how can I avoid this issue.

    Note: I added sapui5-mobile-static,sapui5-sdk-static,sapui5-static


    Thanks in advance.

    Nag.scr1.PNG

    (0) 
    1. Rajkumar Shanmuganathan Post author

      Hello,

      Could you check whether you have the library-preload.json file available in the path resources->sap->m->library-preload.json.

      Also, make sure that you SAPUI5 mobile UI elements are part of the above file as well. I was able to make it work only with the view type .js

      Thanks,

      S.Rajkumar.

      (0) 
      1. Nageswar Gurram

        Hello Rajkumar,

        Thank you, I have avoided above issue . I am getting another issue “file:///android-asset/www/resources/sap-ui-core.js:Line 117: Uncaught TypeError: Cannot read property ‘Label’ of defined”.

        I have include all UI library , but I am facing problem with sap-ui-core.js.

        Could you please help me.

        Thanks ,

        Nag

        ss.PNG

        (0) 
      2. Nageswar Gurram

        Hello Rajkumar,

          Thank you so much, my application is working fine now.

        Could you please  suggest me how can I use oData service into this application(SAPUI5 Mobile App for cross Androidplatform using PhoneGap).

        Thanks,

        Nag

        (0) 
  2. Vishesh Agrawal

    Hi RajKumar,

    Thanks for the Post it really helps.

    I did all the steps u said but i am facing a issue with cordova  i guess.

    I get this error in my emulator as soon as i start the app.

    cordova.PNG

    Below is the error i get in console:-

    /wp-content/uploads/2014/10/cordova1_555478.png

    i have uploaded the cordova.js file and cordova.jar as u mentioned and checked it is also shown correctly in build path.

    Can u help me out over here..?

    Thanks in advance
    Vishesh

    (0) 
    1. Nageswar Gurram

      Hello Vishesh,

           Try to keep your cordova.jar file in build path of your project and please make sure that  are you kept the  cordova.jar file in the lib folder of your project as well.

      Thanks and Regards,

      Nag

      (0) 
      1. Vishesh Agrawal

        Hi Nag,

        I have kept cordova.jar in the lib folder as well. i checked and i also have preload.json but still i get the same error.

        Any idea how to proceed as i am stuck.?

        Thanks and Regards,

        Vishesh.

        (0) 
        1. Idan Ben-Moshe

          Hi,

          I am having the same problem:

          “ALERT: (ERROR) initializing Cordova: Class not found”

          I have checked the cordova.jar file in the build path and in the in the lib folder, it seems fine.

          Is there any solution by now?

          Thank you,

          Idan Ben-Moshe

          (0) 
          1. Vishesh Agrawal

            Hi Idan,

            I was not able to find any solution. As it was my side project so was didnt got much time to focus on it.

            In case you find any solution please share it..

            Thanks,

            Vishesh

            (0) 
    1. Rajkumar Shanmuganathan Post author

      Hello Anju,

      The error seems to be more likely on the application side. Try to check the application independently on the eclipse or any UI5 runtime before taking to the device.

      Thanks,

      S.Rajkumar.

      (0) 
      1. Mantri Shekar

        Hello Rajkumar,

        I tried to follow your blog post for developing and application and run in android environment.

        I am getting the following error. Can you please try to resolve my below issue

        error initializing cordova class not found

        (0) 
  3. Anju A Pillai

    Hi Raj,

    This code is working fine in sapui5 application pjct but error strikes only when creating a phonegap application. No idea how to resolve.

    Regards

    Anju

    (0) 
  4. Ashwin Narayan

    Hi Raj,

    I just got into the industry as a fresher.. the project given to me is to create a mobile application with SAP U I5. First I want to know what will be my mobile hardware requirements ???? It will be an application for utility metering…

    Regards,

    (0) 
  5. Yatisha Varshney

    Hi Rajkumar,

    Very helping blog it is.

    But facing some issues while using sap.viz .It is giving me error and showing blank page in mobile.What should i do ? I have to display charts in SAP UI5.Do i need to add other resources?

    Please suggest the way forward.

    (0) 
  6. Nadia Rohmawati

    Thank you for this helpful article. I have followed your steps but I have a problem here. I can’t find sapui5-mobile-static, sapui5-sdk-static, sapui5-static packages. Can you show me how to download that package? Because there is just OpenUI5 in SAP Developer Center. Please help me. Thank you anyway.

    (0) 
    1. Michael Appleby

      Hi Nadia,

      Please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 

Leave a Reply