VR with native android

Overview

When your two of the most interesting things come together, results are nothing but pure fun! This is the case for me here. With Google’s help, VR apps can be developed in native android.

Google has provided a VR SDK for android developers to take a dive into the Virtual Reality. Integrating basic VR functionality with this SDK is easier than falling asleep!

Here is a link for you to quickstart – https://developers.google.com/vr/develop/android/get-started

Let’s get ready for experiencing VR practically, but watch out!

Practical

We’ll concentrate on very basics i.e. loading image and video in VR.
Here’s what you need to get started:

• A VR cardboard
• An android device with OS 4.4+
• A 360 image and a 360 video

You can use google’s app – Cardboard Camera (https://play.google.com/store/apps/details?id=com.google.vr.cyclops&hl=en_IN) to capture 360 images.

It’ll produce an image with .vr.jpg extension. But, the SDK supports .jpg. So, we’ll have to convert it and that can be done using this tool – https://storage.googleapis.com/cardboard-camera-converter/index.html

I have captured a view from my vicinity using this app and got it converted to .jpg. This is an image consisting of vertically stacked panoramas. We can also have single image panorama loaded in VR.

I also have a demo 360 video.

Place these files in assets folder.

The views provided by VR SDK to load 360 media are so light that they can be used within a fragment. Here, for simplicity, we’ll use them with activities. We’ll have 2 activities, 1 for 360 image and another for 360 video.
First of all, include libraries in gradle file for image and video.

implementation 'com.google.vr:sdk-panowidget:1.10.0'
implementation 'com.google.vr:sdk-videowidget:1.10.0'

I have 2 buttons in my MainActivity.java which redirect me to ImageActivity.java (for 360 image) and VideoActivity.java (for 360 video).

Skipping the regular navigation code, let’s have a look at core part.

1) 360 image

Place VrPanoramaView in xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center"
   tools:context=".ImageActivity">

   <com.google.vr.sdk.widgets.pano.VrPanoramaView
       android:id="@+id/vr_image"
       android:layout_width="match_parent"
       android:layout_height="300dp"
       android:layout_margin="5dp"
       android:scrollbars="none" />

</LinearLayout>

In java file, load the image from assets after converting it into bitmap.

private void loadImage() {
   VrPanoramaView.Options viewOptions = new VrPanoramaView.Options();
   viewOptions.inputType = VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER;

   try (InputStream istr = getAssets().open("image.jpg")) {
       vrImageView.loadImageFromBitmap(BitmapFactory.decodeStream(istr), viewOptions);
       BitmapFactory.decodeStream(istr);
   } catch (IOException e) {
       Log.e("", "Could not decode default bitmap: " + e);
   }
}

One thing to note here is video options. I have used STEREO_OVER_UNDER type. We have 2 options :

• STEREO_OVER_UNDER – for image which contains equally sized panoramas, stacked vertically (as the pic captured by me).
• MONO – for image containing a single panorama.

2) 360 video

Place VrPanoramaView in xml.

<com.google.vr.sdk.widgets.video.VrVideoView
   android:id="@+id/vr_video"
   android:layout_width="match_parent"
   android:layout_height="300dp"
   android:layout_margin="5dp"
   android:scrollbars="none" />

Now, just load the video from assets into the view.

private void loadVideo() {
   try {
       vrVideoView.loadVideoFromAsset("video.mp4",
               new VrVideoView.Options());
   } catch (IOException e) {
       e.printStackTrace();
   }
}

We also get a listener for video view. We can loop it by manual coding.

vrVideoView.setEventListener(new VrVideoEventListener() {
   @Override
   public void onCompletion() {
       vrVideoView.seekTo(0);          //loop
   }
});

We can even sync a seek bar with video view, depending on our requirements.

Both the views provide an option for Cardboard mode. Here is the screenshot.

That’s it…! Didn’t it finish before blinking an eye?

Video

VR at Yudiz

Talking about native app development, we are concentrating on implementing more detailed concepts of VR and are trying to integrate it with AR technologies, like portals.

Conclusion

An innumerable amount of apps can be imagined when such 2 vast concepts, VR and android native collaborate with each other. As this is the future of mobile application development, building such apps, right from the start of an era, will be a lot beneficiary.