Android ConstraintLayout vs <include /> issue

Question

I have two layouts files (fragment_eo_video.xml and fragment_ir_video.xml) that share a large part of components for this reason I decided to create a new layout file (fragment_video.xml) with the common part which I include in the two original files. This's the final structure:

fragment_eo_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <it.robint.tux.components.ZoomPanTextureView
        android:id="@+id/video_surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <include layout="@layout/fragment_video" />

</androidx.constraintlayout.widget.ConstraintLayout>

fragment_ir_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
       android:id="@+id/video_surface"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:contentDescription="@string/todo"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

    <include layout="@layout/fragment_video" />

</androidx.constraintlayout.widget.ConstraintLayout>

And finally fragment_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
        android:id="@+id/silhouette_surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:alpha="0.5"
        android:contentDescription="@string/silhouette"
        android:rotation="0"
        android:scaleType="fitXY"
        android:visibility="invisible"
        app:srcCompat="@drawable/silhouette"
        tools:layout_editor_absoluteX="124dp"
        tools:layout_editor_absoluteY="-4dp" />

    <TextView
        android:id="@+id/video_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="visible" />

    <TextView
        android:id="@+id/video_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@id/compass"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/command_ratio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="5dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/speed"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/video_close"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="5dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/close_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/video_snapshot"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/snapshot_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ToggleButton
        android:id="@+id/mic_toggle"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="end|center_vertical"
        android:layout_margin="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:background="@drawable/mic_selector"
        android:textOff=""
        android:textOn=""
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/compass" />

    <ToggleButton
        android:id="@+id/play_toggle"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="end|center_vertical"
        android:layout_margin="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/play_selector"
        android:textOff=""
        android:textOn=""
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ToggleButton
        android:id="@+id/light_toggle"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/light_selector"
        android:textOff=""
        android:textOn=""
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/compass" />

    <it.robint.tux.components.CompassView
        android:id="@+id/compass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        app:backgroundColor="#00000000"
        app:degrees="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lineColor="#FFFFFF"
        app:markerColor="#FF0000"
        app:rangeDegrees="180.0"
        app:showMarker="true"
        app:textColor="#FFFFFF"
        app:textSize="15sp" />

    <TextView
        android:id="@+id/battery_id"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:gravity="center"
        android:text="@string/def_battery_source"
        android:textColor="#ffffff"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@id/battery"
        app:layout_constraintTop_toTopOf="parent" />

    <eo.view.batterymeter.BatteryMeterView
        android:id="@+id/battery"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        app:batteryMeterChargeLevel="80"
        app:batteryMeterChargingColor="#4caf50"
        app:batteryMeterColor="#0277bd"
        app:batteryMeterCriticalChargeLevel="15"
        app:batteryMeterCriticalColor="#d84315"
        app:batteryMeterIndicatorColor="@android:color/transparent"
        app:batteryMeterIsCharging="false"
        app:batteryMeterTheme="rounded"
        app:batteryMeterUnknownColor="#e0e0e0"
        app:layout_constraintEnd_toStartOf="@id/rssi"
        app:layout_constraintTop_toTopOf="parent" />

    <it.robint.tux.components.SignalStrengthView
        android:id="@+id/rssi"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        app:fillColor="#ffffffff"
        app:frameColor="#ff333333"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:level="20"
        app:levelTextColor="@android:color/primary_text_dark_nodisable"
        app:safeFillColor="#FF8BC34A"
        app:safeLevel="50"
        app:showLevelText="true"
        app:warnFillColor="#ffFFEB3B"
        app:warnLevel="25" />

    <TextView
        android:id="@+id/target_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginBottom="5dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@id/target_distance"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/target_distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginBottom="5dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/compass"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/speed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="5dp"
        android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/compass"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Inside layout designer everything seems to work fine but if I start the application the streaming of video displayed on video_surface won't display. I think the main problem is the nesting of CostraintLayout objects (in the original code the silhouette_surface just follows video_surface but on the same xml level). I cannot undestand how to fix it: I tried using <merge /> tag as mentioned here but it doesn't work (layout designer report a number of errors since elements between <merge> cannot use layout_contraint... attributes). There's a way to do what I need?

--- UPDATE ---

I tried also this following comments:

<it.robint.tux.components.ZoomPanTextureView
    android:id="@+id/video_surface"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@id/hud"
    app:layout_constraintEnd_toEndOf="@id/hud"
    app:layout_constraintStart_toStartOf="@id/hud"
    app:layout_constraintTop_toTopOf="@id/hud" />

<include layout="@layout/fragment_video"
    android:id="@+id/hud"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Same result, i.e. video_source is not visibile.

Answer 1

You shouldn't use match parent on both views.

Secondly you should add android:layout_width and height to the include layout. Then you can add constraints to the included layout.