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.
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
Java
val quadView: QuadView = findViewById(R.id.quad_view)
quadView.setQuadBitmap(bitmap)
QuadView quadView = findViewById(R.id.quad_view);
quadView.setQuadBitmap(quadBitmap);
The
setQuadBitmap() function takes in a Bitmap representing the Quad image as a parameter.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
Java
val quadView: QuadView = findViewById(R.id.quad_view)
quadView.scaleType = ScaleType.FIT_CENTER
quadView.setQuadBitmap(bitmap)
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.FILLYou might want to scale images differently on an Android app based on device orientation and Image orientation. QuadView provides the following scale types-
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.
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.
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).
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
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
Java
val quadView: QuadView = findViewById(R.id.quad_view)
quadView.setOnClickListener {
// Handle QuadView click events.
Toast.makeText(this, "QuadView Click", Toast.LENGTH_LONG).show()
}
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.
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
Java
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)
}
})
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);
});