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>

put the logo webview - Android

I want to put a logo on the corner of the webview. Because I don't want users to download pdf while pdf is loading. So I want to add a logo to the top right corner of the webview. But when I add the logo it stays under the webview and is not visible. How can I show it on top of the webview and in the top right corner?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="...">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Home" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
tools:openDrawer="end"
android:layoutDirection="ltr">
</com.google.android.material.tabs.TabLayout>
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
<WebView
android:id="#+id/webviewAntreman"
android:layout_below="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>

Ok so I noticed you already received some answers for your question but both seemed to miss some points I noticed hence decided to post an answer.
First, as #Ryan's answer mentioned you will need to put your ImageView after WebView in order for it to be drawn on top, otherwise it would always be below.
Second, upto this your ImageView should be on top-left, but since you require it to be on the Top-Right corner you will need to add
android:layout_alignEnd="#+id/webviewAntreman"
So your ImageView code written after the WebView woul be something like this.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:layout_alignEnd="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
As a note, android:elevation as in #Rumit's answer requires minimum API level 21, so if your app supports version below Android 5.0 this property won't work on those otherwise it's fine.
In the rare case none of this works, make use of a FrameLayout for what you need to achieve

Put the ImageView tag after the WebView tag in the XML. Views are drawn with the last one on top.

You can try with android:elevation="5dp" property on ImageView to elevate it from WebView.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:elevation="5dp"
android:layout_width="100dp"
android:layout_height="100dp" />

Android Custom TabLayout: Icon overlays content

I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!

I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>

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));

Issue with sherlock actionbar

Image as seen in ICS
Where as when run in Gingerbread
XML code for the fragment
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background"
android:id="#+id/homelayout" >
<ImageView
android:id="#+id/homepageLogo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"
android:alpha="255"
android:scaleType="fitXY" />
</LinearLayout>
Any reason for such strange behavior?

try changing
android:layout_width="match_parent"
android:layout_height="match_parent"
to
android:layout_width="wrap_content"
android:layout_height="wrap_content"
in your ImageView. I don't know how you use your XML, but by the looks of it you might also want to change te same parameters in the LinearLayout to "wrap_content". Now you are telling the ImageView to (probably) fill the whole area.
// Alex

The problem is observed only when you dynamically request for the actionbar from the code.
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
If you do it using styles, this problem is not seen.