Getting Started

Render a Quad image using the QuadView on a Leia Light-field device.

This section shows you how to set up and use the Android Media SDK to display an image in 4V in your Android project.

For this tutorial, we will simply load a Quad image from your project's resource directory into the QuadView.

Setup Resources

You can download the Quad image used for the tutorial below.

1MB

optician_2x2.jpg

image

Place this image in your project's drawable resource directory, like shown below.

Optionally, you can also use any Quad image of your choice.

Setup Your Environment

To include the Android Media SDK to your project, add the following dependency to your app's build.gradle file. This adds Leia's Android Media SDK to your project.

dependencies {
    implementation "com.leiainc:androidmediasdk:0.0.2"
}

Optionally, you can also customize the modules you want to add to your project. The different modules and their use cases are discussed here.

Add the QuadView to your XML Layout file

  <com.leiainc.androidsdk.core.QuadView
    android:id="@+id/quad_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

The QuadView is a reusable Android view which allows you to easily render a quad with just one line of code.

Link the QuadView to your Activity or Fragment

Obtain the reference to the QuadView in your Activity or Fragment using findViewById()

Kotlin

val quadView: QuadView = findViewById(R.id.quad_view)

Java

QuadView quadView = findViewById(R.id.quad_view);

Load the image into the QuadView

Now, all we need to do is set the Optician2x2.jpg image placed in our resource directory into the QuadView. The QuadView takes in a Bitmap representing a Quad as an input.

Kotlin

val quadView: QuadView = findViewById(R.id.quad_view)
        
/* Get Bitmap for Quad in the resource directory */
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.optician_2x2)
        
/* Set the Quad Bitmap in the QuadView */
quadView.setQuadBitmap(bitmap)

Java

QuadView quadView = findViewById(R.id.quad_view);
        
/* Get Bitmap for Quad in the resource directory */
Bitmap bitmap = BitmapFactory.decodeResource(resources, R.drawable.optician_2x2);
        
/* Set the Quad Bitmap in the QuadView */
quadView.setQuadBitmap(bitmap);

• Use the BitmapFactory.decodeResource() function to obtain the Bitmap for the Quad image in the resource directory.

• Use QuadView#setQuadBitmap() function to set the bitmap obtained from the previous step.

You're all set! The QuadView will handle rendering the image. However, at this point, if you run the app, the image will appear in 2D. We still have to turn on the backlight to view the image in 4V.

Toggle the Backlight

The last step is to switch on the backlight to view the image in 4V. We can request toggling backlight using the LeiaDisplayManager .

Place the following line of code in your Activity/Fragment's onResume() function.

Kotlin

override fun onResume() {
   super.onResume()
   val displayManager: LeiaDisplayManager? = LeiaSDK.getDisplayManager(applicationContext)
   displayManager?.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_3D)
}

Java

@Override
protected void onResume() {
    super.onResume();
    LeiaDisplayManager displayManager = LeiaSDK.getDisplayManager(this);
    displayManager.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_3D);
}

This will turn on the backlight on a Leia Light-field device.

To turn off the backlight, you can call the same line of code with BacklightMode.MODE_2D.

Kotlin

override fun onPause() {
   super.onPause()
   val displayManager: LeiaDisplayManager? = LeiaSDK.getDisplayManager(applicationContext)
   displayManager?.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_2D)
}

Java

@Override
protected void onPause() {
    super.onPause();
    LeiaDisplayManager displayManager = LeiaSDK.getDisplayManager(this);
    displayManager.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_2D);
}

Its good practice to turn off the backlight in your activity's onPause() function. This ensures the backlight is turned off when the user exits the app or the device is sleeping.

You can learn more about controlling the backlight here.

Build your app

If you followed the steps above correctly, you should be able to view the image in 4V. If you had trouble following the steps, you can always checkout the sample app on Github.

Render Quad Sample App