How can I make FrameLayout for Video have round corners with Agora?

Question

At the moment, I tried with this but didn't work.

val surfaceView = RtcEngine.CreateRendererView(baseContext)
        surfaceView.apply {
            clipToOutline = true
            clipBounds = Rect(15,15, 15, 15)
            outlineProvider = CircularOutlineProvider(15)
            setZOrderMediaOverlay(true)
        }
        binding.localVideoViewContainer.apply {
            addView(surfaceView)
            clipToOutline = true
            clipBounds = Rect(15,15, 15, 15)
            outlineProvider = CircularOutlineProvider(15)
        }

class CircularOutlineProvider(val c: Int):ViewOutlineProvider() {
  override fun getOutline(view:View, outline:Outline) {
    outline.setRoundRect(c, c, view.width - c, view.height - c, view.width/2f)
  }
}

<FrameLayout
    android:id="@+id/local_video_view_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="true"
    android:clipToOutline="true"
    tools:background="@color/gray_7f"/>

I even tried with setting background with drawable file like this, but didn't work.

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#CCCCCC"/>    

    <stroke android:width="2dp"
        android:color="#999999"/>

    <padding android:left="2dp"
         android:top="2dp"
         android:right="2dp"
         android:bottom="2dp"/> 

    <corners android:radius="8dp" />
</shape>

<FrameLayout
    android:width="match_parent"
    android:height="wrap_content"
    android:background="@drawable/rounded_shape"/>

plus, WebView also has similar issue. Is that related?

score 0 · Answer 1 · answered May 06 '22 at 05:50

0

it is related, some videos (SurfaceView) and web content (WebView) are rendered on native side "under" framework without respecting its layout. these Views are in fact "cutting a hole" in layout in place where they are positioned and some smart alghorithms are drawing on these rectangles no matter of other framework-level Views or framework-related decorations, native side is overwriting this

you can try to use TextureView if possible with your player, its like v2 of SurfaceView, its respecting (partially) framework drawn params and XML attributes, thats for shure, so maybe also drawables/Views covering it

answered May 06 '22 at 05:50

snachmsm

17,866
3
32
74

can you explain more about `cutting a hole`? I tried with TextureView but, it doesn't have `setZOrderMediaOverlay(true)`. Agora Document only provides SurfaceView and it says it needs to use `setZOrderMediaOverlay(true)`. I used TextureView and it seems like the other user can't get the stream. – c-an May 06 '22 at 07:06
make some `match_parent`/`match_parent` `FrameLayout` as root layout, set some `background="#9800FF"`, put in it `SurfaceView` with fixed size, e.g. 100dp x 100dp and `layout_gravity="center"` (centered on screen). now add yet another child to root, e.g. `View` 150dp x 150dp with background #0098FF, also centered. second child is declared after SV and is bigger, so it should cover whole SV, hide it, right? wrong, SV playing video is still visible, kind-of drawn always-drawn-on-top, no matter of other `View`s/`drawable`s covering it – snachmsm May 06 '22 at 08:46
yes, that's true. But I have no idea, how I can do it with TextureView.. – c-an May 07 '22 at 11:05
imho all you can do is to request `TextureView` support from authors... or maybe there is some chance that you can obtain bare stream from API for own decoding and frames rendering, probably also on `SurfaceView`, but with possibility for cutting edges from video somewhere in runtime (still they won't be really transparent with `SurfaceView`, at most solid color in there) – snachmsm May 08 '22 at 15:28

score 0 · Answer 2 · answered Jun 27 '23 at 08:44

Use a CardView instead of FrameLayout and set corner radius, then add remoteSurfaceView from agora to it.

<androidx.cardview.widget.CardView
                android:id="@+id/small_video_container"
                android:layout_width="134dp"
                android:layout_height="134dp"
                app:cardCornerRadius="70dp"
                app:cardBackgroundColor="@android:color/transparent"
                android:layout_gravity="center"/>

How can I make FrameLayout for Video have round corners with Agora?

2 Answers2