when 2 frame layouts are stacked, only the bottom layout is visible in Android 12 devices

Question

I'm creating a video call app using DeepAR and Agora, I created a video call UI with framelayout (Local view) on top and another framelayout (remote view - full screen) at the bottom.

On connecting the call, the top framelayout (local view) becomes invisible, only the bottom remote view is visible.

This happens only in Android 12 & above devices, on all other versions below 12 both framelayout is visible and working during the call.

Here is my XML layout

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_gray">

    <FrameLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="0dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"/>

    <FrameLayout
        android:id="@+id/localPreview"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_gravity="end"
        android:layout_margin="40dp"
        android:background="@drawable/rounded_edge_frame"
        android:elevation="10dp"
        app:cardCornerRadius="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

I'm already using the below while setting view to remote view layout

  local.removeAllViews();
  local.addView(surfaceView);
  local.invalidate();
  local.requestLayout();
  local.bringToFront();

Answer 1

It seems Android 12 there is no fix to get the desired result. So I added

android:hardwareAccelerated="false"

to my activity and this fixed the issue