I am converting the starter Android sample Camera2Video example: https://github.com/googlesamples/android-Camera2Video
When running the example by itself the rotation works well, and the controls are always visible. However when I embed the same code inside a Cordova plugin, the controls dissapear when rotated.
Here is the layout xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.camera2video.AutoFitTextureView
android:id="@+id/texture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_below="@id/texture"
android:background="#4285f4">
<ImageButton
android:id="@+id/video"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="Record"
android:padding="20dp"
android:src="@drawable/record" />
<ImageButton
android:id="@+id/info"
android:contentDescription="Info"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:padding="20dp"
android:src="@drawable/gallery" />
</FrameLayout>
</RelativeLayout>
And here is the layout-land xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.camera2video.AutoFitTextureView
android:id="@+id/texture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_below="@id/texture"
android:layout_toRightOf="@id/texture"
android:background="#4285f4"
android:orientation="horizontal">
<ImageButton
android:id="@+id/video"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="Record"
android:padding="20dp"
android:src="@drawable/record" />
<ImageButton
android:id="@+id/info"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:contentDescription="Info"
android:padding="20dp"
android:src="@drawable/gallery" />
</FrameLayout>
</RelativeLayout>
Also there is code to detect the rotation.
I'm sure it's a simple fix, I just can't figure it out!
My full plugin code: https://github.com/kmturley/cordova-plugin-media-custom
I solved this using the following code:
layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextureView
android:id="@+id/texture"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#66000000"
android:orientation="vertical">
<ImageButton
android:id="@+id/video"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_gravity="center"
android:contentDescription="Record"
android:padding="20dp"
android:src="@drawable/record"
android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY" />
<ImageButton
android:id="@+id/info"
android:contentDescription="Info"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_gravity="center_vertical|right"
android:padding="20dp"
android:src="@drawable/gallery"
android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY" />
</FrameLayout>
</RelativeLayout>
layout landscape xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextureView
android:id="@+id/texture"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#66000000"
android:orientation="horizontal">
<ImageButton
android:id="@+id/video"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_gravity="center"
android:contentDescription="Record"
android:padding="20dp"
android:src="@drawable/record"
android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY" />
<ImageButton
android:id="@+id/info"
android:contentDescription="Info"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_gravity="center_horizontal|bottom"
android:padding="20dp"
android:src="@drawable/gallery"
android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY" />
</FrameLayout>
</RelativeLayout>
You can see it working on my cordova plugin here:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.