Writing your own VR View for Android Devices

Understanding VR View with hands on it.

After writing articles about Object Detection in Image in iOS and Scanning and Detecting 3D Object on real-time in iOS, now we are going to learn to embed a 360-degree photosphere in an Android Application using VR View Technology.

Requirements

Let’s start

Grab the device ( and install the Cardboard Camera app if not installed ) and start the Cardboard Camera app. This app will take a pretty good panoramic picture with a stereoscopic effect.

Click on the camera button and follow the prompts to take a picture. It will take a few seconds to process the image and save it.

Now Transfer this image to the computer. You can find this image in DCIM/CardboardCamera folder.

Supported image and video formats

Now we have an image, but unfortunately, it is not quite in the format we need. VR View has specific image configuration requirements:

  • VR view images can be stored as png, jpeg, or gif. We recommend you use jpeg for improved compression.
  • For better results image dimensions should be powers of two (e.g. 2048 or 4096).
  • 2:1 aspect ratio (e.g. 4096 x 2048) is preferable for mono images and stereo images should have 1:1 aspect ratio.
  • The images need to be equirectangular images. If you have images in other formats such as a cubemap, they need to be converted to equirectangular in order to be displayed in VR view.

Formatting the image

Jumping into the code now

  • Open app/build.gradle in Android Studio and scroll to the bottom of the file to the dependencies section and add the google vr components.

Save the file and click the “Sync Now” alert to re-sync the Gradle project.

  • Add VrPanoramaView to the first_activity.xml layout

Add the following line to onPause(), onResume() and onDestroy()

Load the image asynchronously

Since the image is large we don’t want to load it in the main UI thread when the application starts. We want to load it asynchronously. For more details about image loading best practices see here.

I have written a method to load image from assets folder of the. You can write to load from any location on phone.

And its working fine..!!!

Code is available at github repo.

Thank you for reading !!!

Would you like to buy me a cup of coffee?

I'd appreciate even your little contribution to my work, it helps me keep this Open Source updated. If this project helped you or your business and if you feel like donating some bucks, you can Paypal me — ankitdroiddeveloper@gmail.com


I am available to talk and follow on Twitter , Github , Dev Community , LinkedIn , Facebook, Medium, BeBee .


Hope you found this story useful and interesting. Feel free to share your feedback and comments and don’t forget to clap 👏. Do you know you can do this multiple times.!!


Further Reading

  • Android
  • iOS
  1. Exploring user requests for your app’s services that originate from Siri — Enable the Siri capability iOS 12 — {Part 1} — Take Me There
  2. Exploring user requests for your app’s services that originate from Siri — Enable the Siri capability iOS 12 — {Part 2} — Take Me There
  3. Scanning and Detecting 3D Objects in iOS using ARKit — Take me there
  4. Simpler ways of creating and using Segue in Xcode — Take me there
  5. Interactive Controls in Notifications in iOS 12 — Take me there