Develop Reference

Blinking Video/SurfaceView when resizing to PiP mode

I'm working on PiP mode in my app. In fact it is working pretty fine, but I have a problem with blinking/disappearing video for a split second.
I have VideoActivity in "fullscreen"/normal mode. I'm calling enterPictureInPictureMode(); and Activity is collapsing to small PiP-frame. At the moment when animation is ending shrinking layout then video get transparent for a split second/one frame. Also exacly in this frame whole PiP-frame gets shadow under (elevation). When I touch this small PiP-frame it expands a bit to big PiP-frame (not fullscreen) and this anim is smooth, but when auto-collapse to small PiP-frame it blinks again on the end... Everytime when Activity is animating to small PiP-frame (no matter if is collapsing from big PiP-frame or fullscreen Activity) one-frame transparency-blink occurs when reaching final "small bounds". No impact to sound, video is playing steady, no calls to onPlayerStateChanged.
With newer API version we can create animation with bounds and thats how I know the video view is blinking... Using no-attribute method makes whole layout collapses and I can see blink only on area with video/player/surface view (black stripes above and below video). When I use newer method and setSourceRectHint I can see whole PiP-frame disapears without respecting black background of its parent. In fact I've added dummy View with fixed size, background color and centerInParent like PlayerView - it blinks/hides just like player when is placed below (first in parent) PlayerView layer, but placed above doesn't blink at all and is showing above PlayerView even when it disappears for split sec.
How to fix that blink or maybe though set black background, not transparent...
if (Build.VERSION.SDK_INT >= 26) {
Rect bounds = new Rect();
playerView.getVideoSurfaceView().getDrawingRect(bounds);
int toTop = (playerView.getMeasuredHeight() - bounds.height()) / 2,
toLeft = (playerView.getMeasuredWidth() - bounds.width()) / 2;
bounds.top += toTop;
bounds.left += toLeft;
bounds.bottom += toTop;
bounds.right += toLeft;
enterPictureInPictureMode(new PictureInPictureParams.Builder().
setSourceRectHint(bounds).
setAspectRatio(new Rational(bounds.width(), bounds.height())).
build());
} else
enterPictureInPictureMode();
xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/activity_video_player_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#android:color/black"
app:controller_layout_id="#layout/exo_custom_control_view"
app:fastforward_increment="10000"
app:rewind_increment="10000"
app:show_timeout="100" />
...
PS. Above problem also appears when using usual VideoView played in WebView and got into fullscreen by VideoEnabledWebChromeClient. But in this case blink reveals for a split second part of WebViews content
edit: I've just found a workaround for blinking ExoPlayer - by replacing SurfaceView with TextureView, adding app:surface_type="texture_view" - but I'm reading that TextureView is a bit less efficient and also this is not fixing VideoView blink (fullscreen from WebView)
edit2: can confirm blinks on Android 8 (Xiaomi) and 9 (Pixel)

Showing initially full image with PhotoView in Android

I am developing an Android app. In my application, I need zoom image features like in Facebook. So, I used this library - https://github.com/chrisbanes/PhotoView. But I am having problem with showing full image when the image is first loaded.
This is how I set PhotoViewAttacher to ImageView
photoViewAttacher = new PhotoViewAttacher(imageView);
photoViewAttacher.setZoomable(true);
photoViewAttacher.update();
This is the xml layout of imageview
<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
What I am trying to do is I want the image to show fit to the screen if the image is bigger then screen size. No matter how big it is. But image can be smaller than screen size. I just want to show full image at initial. But the above code gives me this result.
As you can see in the screenshot, it cannot show the whole image. It showing only partially. If I want to see other area of image, I want to scroll or swipe because the image does not fit to screen initially. So that I tried to change the XML to show the whole area of image initially. This is the XML I changed to.
<ImageView
android:id="#+id/item_details_image"
android:scaleType="centerInside"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
As you can see I changed the height from match_parent to wrap_content. Scale type as well. When I changed to that, it shows the full image initially like this.
It shows full image but smaller. It is totally ok for me. That is what I want to have. The problem is with zoom feature. When I zoom up, the image cannot go bigger than the image height. See the screenshot below.
As you can see above, it is not showing full image when I zoom up. ImageView height is not changing.

<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
You Need to match_parent both height or width

CWAC-CAMERA position preview on top of available preview area when useFullBleedPreview = false

I'm trying to use CameraFragment from cwac-v9-camera to create custom Camera fragment taking and previewing Square images.
I want Preview and taken Picture to be completelly identical, so:
1. I useFullBleedPreview = false
2. I want preview picture to take full width and need to place my preview picture in the very top of the preview area, so I can cover rest of image with some view, to make it square.
The problem is that CameraView draws image in the center of camera preview area, and adds white lines on the top and buttom.
Is there any way to control where lobrary draws the preview picture?

I have the same issue and spent a day on this CWAC library (by the way, it is absolutely great). I would like to share my research and hopefully you (and me) would get a working solution soon.
Test Platform: Sony Xperia Z, Android 4.2.2
Test Resolution: 1080x1920.
Available Preview: 1280x720, 960x720, 720x480, 704x576, 640x480, 480x320, 320x240, 176x144.
Target Preview size: 1080x1080, a square, of course :D
Test done inside CameraHost.getPreviewSize() of my custom CameraHost.
If I provide a square view/size to the super class function here, I got 704x576. It is 11:9 (or 1.22222~) which is closest to 1:1 or 1.0. However, it looks blurry when enlarge to 1080 width and also distorted.
1280x720 is 16:9 (1.777~). The device camera got this by cropping the top and bottom (please note that camera is talking in landscape mode).
960x720 is 4:3 (1.333~). This is the full resolution of the device camera. It is my target resolution, where I only want the 720x720 inside 960x720 towards the top edge(portrait) or left edge(landscape).
In your custom CameraHost (extends SimpleCameraHost), limit the preview size:
#Override
public Size getPreviewSize(int orientation, int w, int h, Parameters p) {
Size size = super.getPreviewSize(orientation, 720, 960, p);
ViewGroup.LayoutParams params = cameraView.getLayoutParams();
params.width = 1080;
params.height = 960 * 1080/720;
cameraView.setLayoutParams(params);
return size;
}
layout.xml:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.commonsware.cwac.camera.CameraView
android:id="#+id/cameraView"
android:layout_width="match_parent"
android:layout_gravity="top|center_horizontal"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.android.widget.SquareView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:background="#99e0e0e0">
(your elements to cover up the extra area)
</LinearLayout>
</LinearLayout>
</FrameLayout>
Following is the result and comparing with the system camera, using 4:3.
Note:
I suppose you know how to create your own SquareView so I won't post the code of it here. You can read more here: Simple way to do dynamic but square layout
The piece of code in #4 is just test code - you need to figure out how it can be adapt for all devices.
Do NOT accept click event by the CameraView for focusing. Use the SquareView instead.

Is there any way to control where lobrary draws the preview picture?
It draws the image where the CameraView is. Where precisely within that space it resides depends upon the aspect ratio of the CameraView and the aspect ratio of the preview image and cannot be determined ahead of time.

Android: Cannot set VideoView background to transparent

I have a VideoView playing a video whose shape is not rectangular, (i.e. a rotating cylinder with rounded corners). The videoview is displayed within a LinearLayout that has a background colour. I would like the background of the videoview to be transparent in order to give the effect that the cylinder is rotating on top of the background colour without any black corners.
This is what I get:
and this is what I want to get:
Of course, you could ask, why don't I just set the background colour of the video to match the background colour of the container, but the reason I want to achieve this is because my next step is to have an image or a pattern as the background of the container. My layout xml is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00aaff"
android:orientation="vertical" >
<VideoView
android:id="#+id/surface_view"
android:layout_width="254dp"
android:layout_height="200px" />
</LinearLayout>
While experimenting, I tried to set a background to the videoview, but that had as a result to obscure the videoview entirely.
Thank you.

VideoView is opening a separate Window above the current one. This is because it is based on the SurfaceView. And we cannot set alpha or perform animations with it because it is not syncronized with your other UI elements.
So:
You should use a video player based on TextureView and animate transparent background by "set alpha" to TextureView
You can use these libraries and get a Video Player based on TextureView
https://github.com/Danylo2006/VideoList
https://github.com/sprylab/texturevideoview

9-patch drop shadow technique works for image view but not camera preview

I use to following 9-patch image to create drop shadow effect.
It works pretty well for the following image view.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center" >
<ImageView
android:id="#+id/image_test"
android:background="#drawable/dropshadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pic1"
/>
</LinearLayout>
I am able to get a perfect shadow dropped effect. Note that, there is a 1 pixel wide red line at picture right/bottom. I purposely place the 1 pixel wide red line around picture right/ bottom, to proof there are no pixel from 9-patch image cover up my original picture.
However, when I try to apply the exact same technique on camera preview view, things getting complicated. I do a slight modification on API Demo example com.example.android.apis.graphics.CameraActivity
I modify the GUI view, by performing the following modification.
class Preview extends ViewGroup implements SurfaceHolder.Callback {
// ...
Preview(Context context) {
// ...
mSurfaceView.setBackgroundDrawable(getResources().getDrawable(drawable.dropshadow));
this.setBackgroundColor(Color.WHITE);
// ...
}
}
I get the following outcome. Note that, shadow effect begin to appear, before end of picture right edge and bottom edge. Its distance is 9 pixels before reaching end of edge.
I am pretty sure I am having correct image filename dropshadow.9.png for both project. However, I lack of idea why the latter doesn't work as expected?

This is because you are using a SurfaceView which provides you with a dedicated drawing surface that will not respect the content boundaries you have defined in your nine patch image.
A possible workaround would be to place your camera's SurfaceView on top of a slightly larger view that holds the drop shadow as a background.