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, ie video_source is not visibile.
1 answers
solution1
1 2020-07-02 16:31:36
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.
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.
Related Question
ConstraintLayout issue on android 6
ConstraintLayout issue with circleci on Android
Android Compose ConstraintLayout issue
z order in issue in ConstraintLayout Android
Android studio ConstraintLayout RTL issue
ConstraintLayout vs. android.support.constraint.ConstraintLayout
Android add other layout in ConstraintLayout using include tag
ConstraintLayout for Android
ConstraintLayout Problems using <include>
Using <include> with <merge> in ConstraintLayout
Related Tags