Search code examples
androidandroid-layoutopengl-esandroid-framelayoutglsurfaceview

Android - How add a Large GLSurfaceView in a FrameLayout center?


I am using two GLSUrfaceView to render video of my own camera and video i receive from server. They are video call data. One small and one large in size. The large GLSurfaceView has two mode, one is Normal Screen mode which is done by filling screen width and calculating the screen height as (DISPLAY_WIDTH * ASPECT_RATIO_OF_IMAGE), and the second mode is full screen mode which is done by filling screen height and calculating the screen width as (DISPLAY_HEIGHT * ASPECT_RATIO_OF_IMAGE). I make the screen large on double tap and again normal in double tap again. But the problem is in large mode the image is cut in the right side only. I want my image to be cut in all side fitting the FrameLayout center at GLSurfaceView center. I am adding my Code part also. See the below image also which describe my need.

    <RelativeLayout
    android:id="@+id/video_call_views_container_outgoing"
    android:layout_width="match_parent"
    android:visibility="gone"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/largeGLSurfaceViewContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical"/>


    <FrameLayout
        android:id="@+id/smallGLSurfaceViewContainer"
        android:layout_width="120dp"
        android:layout_height="170dp"
        android:orientation="vertical"
        android:visibility="gone"/>
</RelativeLayout>

Here is my coding part :

    GLSurfaceView frontCameraGLView = new GLSurfaceView (this);
    GLSurfaceView opponentCameraGLView = new GLSurfaceView (this);


    largeVideoRenderLayoutOutgoing.addView(opponentCameraGLView );
    largeVideoRenderLayoutOutgoing.setOnClickListener(this);
    opponentCameraGLView.setZOrderMediaOverlay(false);

    smallVideoRenderLayoutOutgoing.addView(frontCameraGLView );
    smallVideoRenderLayoutOutgoing.setOnClickListener(this);

largeVideoRenderLayoutOutgoing is the reference of FrameLayout having id largeGLSurfaceViewContainer , smallVideoRenderLayoutOutgoing also refer FrameLayout having id of smallGLSurfaceViewContainer. GLSurfaceView are added to FrameLayout's during onCreate of Activity. The problem is specified in the below image's

The abstract picture of my need

Normal Mode This image is image in the Upeer side is in Normal Mode. And the Below image is in Full Screen Mode. See the left side of these image. They are same but the right is cut in FullScreen mode i mean the last image. I wish that the image should be center fitted so that the image is cut in all side focusing my incoming video's center

Full Screen Mode


Solution

  • If a GLSurfaceView's width is or height is larger than the device screen, it will behave like below: 1. For width larger than device width but height is same as device height: the GLSurfaceView will start drawing from top left corner which co-ordinate will be (0,0) and the extra image will be out of screen right side. So the image center will not be in layout's center. To solve this problem we need to shift image left as leftMargin which value will be half of (imageWidth-deviceWidth). The code's are like

    ViewGroup.MarginLayoutParams marginLayoutParams = (ViewGroup.MarginLayoutParams) glSurfaceView.getLayoutParams();
    int margin = (-1 * (int) ((glSurfaceView.getWidth() - displayWidth) / 2));
    marginLayoutParams.setMargins(margin, 0, 0, 0);
    setLayoutParams(marginLayoutParams);
    

    Please do write a similar code if the heigh of the glsurfaceview is larger than device height. Add a margin on top so that the image is fitted in center of the device