QuadView Overview

Overview of available APIs in the QuadView

In the previous section, we learnt how to display a Quad image using the QuadView. The QuadView is a reusable Android view and provides APIs to customize the rendering of images on a Leia Lightfield device.

QuadViews can be used to display Quad images as well as play Quad Videos in 4V. It automatically displays media in 4V when the backlight is turned on, and in 2D when the backlight is turned off.

Loading an image

In order to render an image in 4V, it must have 4 viewpoints. The Quad format (2x2) format has 4 images in a grid where each image represents a single view point. The QuadView interlaces these views to display them in 4V in conjunction with the display's backlight.

As seen in the previous section, you can display a Quad image easily using a QuadView.

Kotlin

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

Java

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

The setQuadBitmap() function takes in a Bitmap representing the Quad image as a parameter.

Scaling Images

In addition to rendering an image, QuadView also provides APIs to customize the way your image is scaled on screen. This is very similar to Scale Types provided by an ImageView.

Scale the image by specifying the scale type the QuadView must use.

Kotlin

val quadView: QuadView = findViewById(R.id.quad_view)
quadView.scaleType = ScaleType.FIT_CENTER
quadView.setQuadBitmap(bitmap)

Java

QuadView quadView = findViewById(R.id.quad_view);
quadView.setQuadBitmap(quadBitmap);
quadView.setScaleType(ScaleType.FIT_CENTER); 

By default, the scale type for a QuadView is set to ScaleType.FILL

You might want to scale images differently on an Android app based on device orientation and Image orientation. QuadView provides the following scale types-

1) ScaleType.FIT_CENTER

Maintains the original image's aspect ratio, but will also ensure that image fits entirely inside the view. At least one axis (X or Y) will fit exactly. The result is image centered inside the view.

2)ScaleType.FILL

Scales width and height of image independently, so that it matches the view exactly. This may change the aspect ratio of the source image. By default, the QuadView is set to scale to this type if not specified explicitly.

3)ScaleType.CROP_FILL

Scales the image uniformly and maintains the image's aspect ratio, so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

4)ScaleType.CROP_FIT_SQUARE

Center crop the resource texture to the 1:1 square aspect ratio is greater than view aspect ratio. Stretches the cropped square to fill the shorter side of the surface and center on the other axis

Basic View Functionality

The QuadView extends the View class and therefore inherits all default functionality available with any Android view. For example, you can listen to click events on a QuadView just like any other view

Kotlin

val quadView: QuadView = findViewById(R.id.quad_view)
quadView.setOnClickListener { 
    // Handle QuadView click events.
    Toast.makeText(this, "QuadView Click", Toast.LENGTH_LONG).show()
}

Java

QuadView quadView = findViewById(R.id.quad_view);
quadView.setOnClickListener(view -> {
    // Handle QuadView click events.
    Toast.makeText(this, "QuadView Click", Toast.LENGTH_LONG).show();
});

You can also animate views to provide a fluid UI/UX experience in your Android app.

The QuadView currently doesn't support scaling animations. You might see Aliasing while using scale animations on a QuadView.

Playing Quad Videos using a QuadView

In addition to images, you can also use the QuadView to play a Quad video in 4V. QuadView offers easy integration with ExoPlayer, a popular application level media player for Android.

We can play a Quad Video using ExoPlayer by passing in the SurfaceTexture obtained from the QuadView, as shown below.

Kotlin

val quadView: QuadView = findViewById(R.id.quad_view)
quadView.getInputSurfaceTexture(object : SurfaceTextureReadyCallback {
    override fun onSurfaceTextureReady(surfaceTexture: SurfaceTexture) {
        val player: SimpleExoPlayer = Builder(getContext()).build()
        // prepare player ...
        
        // set surface for ExoPlayer
        player.setVideoSurface(Surface(surfaceTexture))
        player.prepare(videoSource)
    }
})

Java

QuadView quadView = findViewById(R.id.quad_view);
quadView.getInputSurfaceTexture(surfaceTexture -> {
    SimpleExoPlayer exoPlayer = SimpleExoPlayer.Builder(getContext()).build();
    // prepare player ...
    
    // set surface for exoplayer
    exoPlayer.setVideoSurface(new Surface(surfaceTexture));
    exoPlayer.prepare(videoSource);
});

You can find a detailed guide on how to play videos using ExoPlayer here.