Develop Reference

How can I work with camera cutouts and PlayerView

I have a simple Fragment that has an ExoPlayer PlayerView.
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/black"
android:fitsSystemWindows="false">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/videoView"
app:surface_type="texture_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:controller_layout_id="#layout/custom_player_controls" />
</androidx.appcompat.widget.LinearLayoutCompat>
This is what it looks like when I play a super wide video:
On the left you can see the space for the camera cutout. If I set the LinearLayoutCompat to have a background of some other color then it is really obvious that the LinearLayoutCompat is occupying the entire space, even where the cutout is. So why isn't the PlayerView taking that space?
I don't see any calls to set the PlayerView size, I just call setPlayer() and pass it my ExoPlayer instance.
Edit: I did another test. I put a view before the PlayerView and that view doesn't have the gap but PlayerView has a gap before that view.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/black"
android:fitsSystemWindows="false">
<View
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#color/amber_200"
/>
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/videoView"
app:surface_type="texture_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:controller_layout_id="#layout/custom_player_controls" />
</androidx.appcompat.widget.LinearLayoutCompat>
This is what it looks like:
Edit: After a bit of playing around I figured out the widths of the screen and of the PlayerView are the same. So I checked margins and didn't see a difference but I see there is a padding. No idea whether that is coming from:
Doing this fixes my issue but I'm not sure if that is a good solution:
binding.videoView.setPadding(0,0,0,0)

Add this in your layout file (xml)
android:fitsSystemWindows="false"
And this in your Themes
<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="p">shortEdges</item>

SurfaceView rotation issue on Android 6

I have a simple activity running my OpenCV application. The app should detect objects from camera and visualize them on a custom SurfaceView. I want to lock the device orientation in portrait mode and rotate my widgets programmatically as the standard camera app does.
Here is the activity layout. It includes OpenCV CameraView and a fragment widget shown above it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.chessking.android.vision.ui.widget.ExtendedCameraView
android:id="#+id/track_camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent"
opencv:camera_id="any"
opencv:show_fps="true"/>
<FrameLayout
android:id="#+id/track_fragment_container"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<fragment
android:id="#+id/track_board_preview"
class="com.chessking.android.vision.ui.BoardWidgetFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<Button
android:id="#+id/track_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="16dp"
android:text="#string/scan_action"/>
</RelativeLayout>
Custom SurfaceView is presented in the fragment layout. It is com.convekta.android.chessboard.ChessPanel
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/board_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/boardBackground"
android:orientation="vertical">
<include layout="#layout/widget_board_clock_both" />
<com.convekta.android.chessboard.ChessPanel
android:id="#+id/board_panel"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/board_background_transparent"
app:chessPanelBackground="#color/board_background_transparent"
app:chessPanelBorderColor="#color/board_border"
app:chessPanelBorderWidth="1dp"/>
<com.convekta.android.chessboard.NotationView
android:id="#+id/nota"
android:layout_width="match_parent"
android:layout_height="20dp"
android:clipChildren="false"
android:fadeScrollbars="false" />
</LinearLayout>
When I need to rotate the widget layour, I change rotation property of the board_layout.
boardLayout.rotation = degrees.toFloat()
The problem is the rotation works on Android 9, but the canvas is misplaced on Android. Here are screenshots from Android 6 emulator, in portrait mode the app looks normal, in landscape SurfaceView jumps out of its layout.

In the <activity> tag of AndroidManifest.xml, add the line android:screenOrientation="portrait"

iframe is not display correclty in android webview

I am using Webview to display iframe in android. Below is my java code
String html = "<p><blockquote><iframe height=\"740\" src=\"https://docs.google.com/document/d/e/2PACX-1vSCZgt7yvY-9aB3RSvQqhYXE0EZ_Lp7AMTMmxlGfJP04iHBjX4A7dVVrc-b9OBX3kLWp_dLyUvNjhLa/pub?embedded=true\" width=\"100%\"> </iframe></blockquote></p>";
webview.loadData(html, "text/html",null);
below is my xml
<LinearLayout
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="match_parent">
<WebView
android:id="#+id/webViewPage"
android:background="#color/colorWhite"
android:layout_width="fill_parent"
android:paddingBottom="53dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
But when we run code its look like below screen
How its show margin or padding from left and right?
How can we resolve this issue?

u should make your WebView heght and width are match_parent
<LinearLayout
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="match_parent">
<WebView
android:id="#+id/webViewPage"
android:background="#color/colorWhite"
android:layout_width="match_parent"
android:paddingBottom="53dp"
android:layout_height="match_parent"
/>
</LinearLayout>

You need to change the width=\"100%\" to a value because It will not load correctly.
Just say width=\"100px\" by example and you will see that the borders are gone.

ScrollView Scrollbartrack visibility

I want to remove the shadow(scrollbartrack) shown below scrollbarthumb.
But unable to do it. I tried to set android:scrollbarTrackVertical="#null"
Please ignore the black part.

You can do it using XML or code.
In XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/yourScroll"
android:scrollbars="none" <!-- add this -->
>
or in your code:
yourScrollView.setVerticalScrollBarEnabled(false);
yourScrollView.setHorizontalScrollBarEnabled(false);
Edit
You have changed the question with your new image , for that task add drawable image as your requirement to android:scrollbarThumbVertical
<ScrollView
android:scrollbarThumbVertical="#drawable/line" <--like this-->
android:id="#+id/my_scroll"
android:layout_width="match_parent"
android:layout_height="500dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp">
</LinearLayout>
</LinearLayout>
</ScrollView>
Note : My drawble image contain transparent area(in left and right sides) ,thats why its bit right from the edge

Android: Adjusting MediaController to fit system UI doesn't work with Action Bar

I have an Activity that shows a video using VideoView with a custom MediaController. The system UI is hidden until the user taps the screen to show the MediaController (just like in YouTube or Photos app).
The following method takes care of hiding the system UI:
private void hideSystemUi() {
int flags = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
View.SYSTEM_UI_FLAG_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
getWindow().getDecorView().setSystemUiVisibility(flags);
}
And the layout of the Activity:
<FrameLayout android:id="#+id/root"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:keepScreenOn="true">
<com.google.android.exoplayer.AspectRatioFrameLayout
android:id="#+id/video_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<SurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</com.google.android.exoplayer.AspectRatioFrameLayout>
</FrameLayout>
I then add the MediaController to video_frame via code like so:
mMediaController.setAnchorView(findViewById(R.id.video_frame));
Testing with Nexus 5, I noticed that when showing the MediaController, the soft navigation bar is overlapping the MediaController UI. I managed to fix it by adding the following attribute to the root of MediaController layout:
android:fitsSystemWindows="true"
So far so good. This worked perfectly fine as long as my Activity theme was Theme.AppCompat.NoActionBar. Now that I'm refactoring the app, getting it as per Material design guidelines for featuring, I have to show the ActionBar.
So I changed the theme to Theme.AppCompat and guess what? The system UI once again overlaps the MediaController. It seems that android:fitsSystemWindows="true" has absolutely no affect anymore.
I've tried to set android:fitsSystemWindows="true" directly to the Activity theme itself and it seemed to solve the overlapping issue, but then I got another issue where the VideoView was padded in a totally weird way from random direction, instead of scaling to fit the screen as it used to be.
I've spent hours on that and still can't figure out a clean solution.
Please note that I need a solution that works for Tablets and Phones together.
And as you probably know, on tablets, the soft navigation bar appears at the bottom of the screen while in landscape mode.
I prefer to solve the issue via XML if possible.

After examining Android Studio's Fullscreen Activity template, I noticed that in the FullscreenActivity layout they are using android:fitsSystemWindows="true" in a little bit different way than me.
Here's the layout that comes with the template (activity_fullscreen.xml):
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0099cc"
tools:context=".FullscreenActivity">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<TextView android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:textColor="#33b5e5"
android:textStyle="bold"
android:textSize="50sp"
android:gravity="center"
android:text="#string/dummy_content"/>
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:id="#+id/fullscreen_content_controls"
style="?metaButtonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent">
<Button android:id="#+id/dummy_button"
style="?metaButtonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/dummy_button"/>
</LinearLayout>
</FrameLayout>
</FrameLayout>
I noticed that they have an additional FrameLayout container set with android:fitsSystemWindows="true" that wraps the actual layout container (in my case this was the MediaController) at the bottom of the screen.
Once I added a FrameLayout to wrap my MediaController layout as shown in the above code snippet my problem is gone! Really weird that I need to have additional layout container to solve this issue. Especially when Android Studio is saying now that I have "Useless Parent".
So to summarize, here is the fully working solution of how my Activity layout looks like:
<FrameLayout android:id="#+id/root"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:keepScreenOn="true">
<com.google.android.exoplayer.AspectRatioFrameLayout
android:id="#+id/video_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<SurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</com.google.android.exoplayer.AspectRatioFrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:id="#+id/controller_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="horizontal">
</LinearLayout>
</FrameLayout>
</FrameLayout>
and I hook up the MediaController to controller_frame instead of video_frame as I did previously:
mMediaController.setAnchorView(findViewById(R.id.controller_frame));