Build an AR App using Google AR Core and SAP Cloud Platform SDK for Android

[SaiNithesh_Gajula]

Hello Everyone, hope you are doing well. In this blog we will learn how to integrate Google AR Core with SAP Cloud Platform SDK for Android.

Let’s begin…

Pre-requisites.

1. Android studio – Download here


2. SAP Cloud Platform SDK for Android – Download here


3. Enable Mobile Services in the SAP Cloud Platform.

Step 1: First let us create sample Android application using SAP Cloud Platform SDK for Android. Launch the Android Studio, and choose “Start a new SAP Cloud Platform Android Project”.

Step 2:  Provide the SCP details as shown below in the screenshot and click on Next.

Step 3: Select the application ID which you created in the SCP Mobile cockpit and click on Next

Step 4: Choose destination and click on Next

Step 5: Provide the project details and click on Next.

Keep the configurations same and click on Finish.

Step 6: Connect to Android Mobile device which supports AR and click on the Run app to install the app.

Step 7: Once app got launched, login to the app with SCP credentials.

Step 8: On successful login you need to provide passcode based in the SCP Mobile configuration and list screen will be launched as shown in below screenshot.

Step 9: Now let’s integrate Google AR Core in this application. Open build.gradle (app level) and make sure the compileOptions are set to Java version 1.8 as shown below.

Also add sceneform plugins in the bottom as shown below in the screenshot and sync the Gradle. Suggested to use latest sceneform version.

//Sceneform UX provides UX resources, including ArFragment//

   implementation "com.google.ar.sceneform.ux:sceneform-ux:1.17.1"

   implementation "com.android.support:appcompat-v7:28.0.0"

Step 10: Open manifest file and necessary code to access CAMERA and to use AR feature.

<uses-permission android:name="android.permission.CAMERA" />

<uses-feature android:name="android.hardware.camera.ar" android:required="true" />

Also add metadata tag as shown below in the screenshot.

 <meta-data android:name="com.google.ar.core"  android:value="required" />

Step 11: Enable Google Sceneform Tools from Setting ---> Plugins

Step 12: Lets create sample data directory to add data Model and which wont be pushed to app apk.

Step 13: Now lets add 3D Model from Poly (you can choose your own model) and choose you model from the site. Here I am going with Featured Car. Download the model in the Obj format.

Unzip the file and add those files to the sample data directory

Step 14: Now we need to import Sceneform Asset by click on the obj file.

Keep the configuration same and click on Finish.

Step 15: Now we need to update sceneform plugin details and sfa path in the build.gradle (app Module)

apply plugin: 'com.google.ar.sceneform.plugin'

sceneform.asset('sampledata/Future_Car.obj', //The “Source Asset Path” you specified during import//

        'default', //The “Material Path” you specified during import//

        'sampledata/Future_Car.sfa', //The “.sfa Output Path” you specified during import//

        'src/main/assets/Future_Car') //The “.sfb Output Path” you specified during import//

Add sceneform dependcies in the build.gradle (Project) and Sync the gradle.

 classpath 'com.google.ar.sceneform:plugin:1.17.1'

We are done with configuration, lets add AR Activity and display the model.

Step 16:  Lets us add new list item as AR Screen and launch AR on click of the item.

Step 17: Now open activity_a_r_screen.xml and change the layout to Relative and update the code as shown below

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".app.ARScreen">



    <Button

        android:id="@+id/btnbackList"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentStart="true"

        android:layout_marginStart="23dp"

        android:layout_marginTop="16dp"

        android:background="@color/transparent"

        android:drawableStart="@drawable/baseline_keyboard_backspace_black_18dp"

        app:layout_constraintTop_toTopOf="parent"

        tools:ignore="MissingConstraints"

        tools:layout_editor_absoluteX="0dp" />



    <fragment

        android:id="@+id/arFragment"

        android:name="com.google.ar.sceneform.ux.ArFragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignParentStart="true"

        android:layout_alignParentTop="true"

        android:layout_alignParentEnd="true"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginStart="0dp"

        android:layout_marginTop="2dp"

        android:layout_marginEnd="0dp"

        android:layout_marginBottom="-2dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintVertical_bias="0.0" />



</RelativeLayout>

.

Step 18: Also update the ARScreen Activity as shown below.

package com.nithesh.saparapp.app;



import android.net.Uri;

import android.os.Build;

import android.os.Bundle;



import com.google.android.material.floatingactionbutton.FloatingActionButton;

import com.google.android.material.snackbar.Snackbar;



import androidx.annotation.RequiresApi;

import androidx.appcompat.app.AlertDialog;

import androidx.appcompat.app.AppCompatActivity;

import androidx.appcompat.widget.Toolbar;



import android.view.View;

import android.widget.Button;



import com.google.ar.core.Anchor;

import com.google.ar.sceneform.AnchorNode;

import com.google.ar.sceneform.rendering.ModelRenderable;

import com.google.ar.sceneform.ux.ArFragment;

import com.google.ar.sceneform.ux.TransformableNode;

import com.nithesh.saparapp.R;



public class ARScreen extends AppCompatActivity {



    private ArFragment arFragment;

    Button navback;



    @RequiresApi(api = Build.VERSION_CODES.N)

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_a_r_screen);



        arFragment = (ArFragment) getSupportFragmentManager().findFragmentById(R.id.arFragment);



        arFragment.setOnTapArPlaneListener((hitResult, plane, motionEvent) -> {

            Anchor anchor = hitResult.createAnchor();



            ModelRenderable.builder()

                    .setSource(this, Uri.parse("Future_Car.sfb"))

                    .build()

                    .thenAccept(modelRenderable -> addModelToScene(anchor, modelRenderable))

                    .exceptionally(throwable -> {

                        AlertDialog.Builder builder = new AlertDialog.Builder(this);

                        builder.setMessage(throwable.getMessage())

                                .show();

                        return null;

                    });

        });



        navback = findViewById(R.id.btnbackList);

        navback.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                finish();

            }

        });



    }



    private void addModelToScene(Anchor anchor, ModelRenderable modelRenderable) {

        AnchorNode anchorNode = new AnchorNode(anchor);

        TransformableNode transformableNode = new TransformableNode(arFragment.getTransformationSystem());

        transformableNode.setParent(anchorNode);

        transformableNode.setRenderable(modelRenderable);

        arFragment.getArSceneView().getScene().addChild(anchorNode);

        transformableNode.select();

    }

}

Step 19 : Now add AR Screen in the main list, add AR Screen string in the string.xml and navigation functionality to AR Fragment.

 case ARScreen:

      intent = new Intent(context, ARScreen.class);

      break;

  ARScreen("ARScreen",R.string.title_activity_a_r_screen , BLUE_ANDROID_ICON);

Step 20: Now click on Run app to install the app.

AR Screen will be launched and once it detects the plane tap on the screen. Then model will be rendered on the plane.

 

 



 

 

Hope you guys like this blog.

Feel free to comment 🙂

 

Regards,

Sai Nithesh.