Develop Reference

StylePlayerView controller xml overriding play and pause button not working

I updated my project exoplayer dependency, and i was updating my code with StylePlayerView (customized layout from exoplayer) reference, but when i executed my code the overrating about this 2 buttons PLAY and PAUSE, are not working, y use PLAY_PAUSE and works, but i want to customize this icons.. so if someone can help me, i really apreace it.
psdt.- And sorry about mi english because i speak spanish.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout 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:id="#+id/customized_controller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/transparentBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/exo_rew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/replay"
android:layout_gravity="center"
style="#style/ExoMediaButton.Rewind"
android:src="#drawable/ic_replay_10" />
<ImageButton
android:id="#+id/exo_play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:visibility="gone"
android:layout_gravity="center"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/pause"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Pause"
android:src="#drawable/ic_pause" />
<ImageButton
android:id="#+id/exo_ffwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/fast_forward"
android:layout_gravity="center"
style="#style/ExoMediaButton.FastForward"
android:src="#drawable/ic_forward_30" />
</LinearLayout>
<TextView
android:id="#+id/exo_duration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#+id/exo_progress"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buffered_color="#color/grey_accent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/exo_duration"
app:layout_constraintStart_toEndOf="#+id/exo_position"
app:played_color="#color/blueLight"
app:unplayed_color="#color/whiteSecondary"
tools:ignore="SpeakableTextPresentCheck" />
<ImageView
android:id="#+id/bt_fullscreen"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/full_screen"
android:src="#drawable/ic_fullscreen_24"
app:layout_constraintBottom_toTopOf="#+id/exo_progress"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/bt_close_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:contentDescription="#string/close"
android:paddingHorizontal="8dp"
android:src="#drawable/ic_chevron_left"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txvChapterTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingHorizontal="8dp"
android:text="#string/title"
android:textColor="#color/whitePrimary"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toStartOf="#+id/lnSettings"
app:layout_constraintStart_toEndOf="#+id/bt_close_player"
app:layout_constraintTop_toTopOf="#+id/bt_close_player" />
<LinearLayout
android:id="#+id/lnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/bt_close_player">
<ImageView
android:id="#+id/bt_settings"
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="#string/title_settings"
app:srcCompat="#drawable/ic_settings_24" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

I solved this issue for me by overriding the style and drawables. I created a new style on my values file like below:
<style name="ExoStyledControls.Button.Center.PlayPause">
<item name="android:src">#drawable/exo_styled_controls_pause</item>
<item name="android:contentDescription">#string/exo_controls_play_description</item>
<item name="android:padding">#dimen/exo_icon_padding</item>
</style>
<drawable name="exo_styled_controls_pause">#drawable/exo_styled_control_pause</drawable>
<drawable name="exo_styled_controls_play">#drawable/exo_styled_control_play</drawable>
The drawables exo_styled_control_play and exo_styled_control_pause should contain your own drawable code.
Do not forget to invalidate cache and restart if it doesn't work right away.

You can modify the values.xml file in the library.
Go to Project -> Gradle: com.~~.Exoplayer-ui:2.18.0#aar -> res -> values.xml
See values.xml in project view
Search for exo_styled_controls_play or exo_styled_controls_pause
and edit here ----> #drawable/"your image"
This is where you can find the line of code

Android ConstraintLayout vs <include /> issue

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.

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.

l have RelativeLayout Problem within different devices

the following is my recyclerView cell xml layout and screenshots of how it shows
it shows aligned on some devices but shows on other devices not aligned and the list_consultation_section_two not shown and list_consultation_section_three is centered for no reason
any ideas why this happens?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/list_certificate_item_parent"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_150dp"
android:layout_marginBottom="#dimen/dimen_4dp"
android:background="#drawable/layout_bg">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/list_consultation_section_one"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="#dimen/dimen_8dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_image_view"
android:layout_width="#dimen/dimen_80dp"
android:layout_height="#dimen/dimen_80dp"
android:src="#drawable/ic_user_default_image_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/consultation_over_image_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_16dp"
android:src="#drawable/ic_consultation_over_ar"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintEnd_toEndOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view"
app:layout_constraintTop_toTopOf="parent" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_status_online_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_consultation_online"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_status_offline_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_consultation_offline"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:id="#+id/list_consultation_section_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#id/list_consultation_section_three"
android:layout_toEndOf="#+id/list_consultation_section_one">
<TextView
android:id="#+id/my_consultation_doctor_name_text_view"
style="#style/subtitle1Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_8dp"
android:layout_marginTop="#dimen/dimen_8dp"
android:layout_marginEnd="#dimen/dimen_8dp"
android:text="#string/dr"
android:textColor="#color/blue_174c6c" />
<TextView
android:id="#+id/my_consultation_doctor_specialty_text_view"
style="#style/Body2Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/my_consultation_doctor_name_text_view"
android:layout_marginStart="#dimen/dimen_8dp"
android:layout_marginEnd="#dimen/dimen_8dp"
android:text="استشارى اطفال"
android:textColor="#color/gray_aaacad" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/list_consultation_section_three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/my_consultation_date"
style="#style/Body2Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_4dp"
android:layout_marginEnd="#dimen/dimen_12dp"
android:text="2/11/2019"
android:layout_centerHorizontal="true"
android:textColor="#color/gray_aeb1b1" />
<TextView
android:id="#+id/my_consultation_messages_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/my_consultation_date"
android:layout_marginStart="#dimen/dimen_4dp"
android:layout_marginTop="#dimen/dimen_4dp"
android:layout_marginEnd="#dimen/dimen_12dp"
android:background="#drawable/my_consultation_messages_number_bg"
android:padding="#dimen/dimen_12dp"
android:textColor="#color/white"
android:layout_centerHorizontal="true"
tools:text="0" />
</RelativeLayout>
</RelativeLayout>
it works fine with Xiaomi Redmi Note 8 (API 28),OPPO A3fW (API 22)(totally different APIs versions)
and doesn't work with Lenovo tab-7504x (API 24)
l know the solutions it works OK at all devices if l set fixed size for list_consultation_section_three
but l just wanna understand why?
]

Try to make list_certificate_item_parent LinearLayout instead of RelativeLayout and give it weight, try this code below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:id="#+id/list_certificate_item_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="5"
android:layout_height="#dimen/dimen_150dp"
android:layout_marginBottom="#dimen/dimen_4dp"
android:background="#drawable/layout_bg">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/list_consultation_section_one"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_margin="#dimen/dimen_8dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_image_view"
android:layout_width="#dimen/dimen_80dp"
android:layout_height="#dimen/dimen_80dp"
android:src="#drawable/ic_user_default_image_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/consultation_over_image_view"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginBottom="#dimen/dimen_16dp"
android:src="#drawable/ic_consultation_over_ar"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintEnd_toEndOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view"
app:layout_constraintTop_toTopOf="parent" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_status_online_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_consultation_online"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/consultation_status_offline_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_consultation_offline"
app:layout_constraintBottom_toBottomOf="#+id/consultation_image_view"
app:layout_constraintStart_toStartOf="#+id/consultation_image_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:id="#+id/list_consultation_section_two"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:layout_toStartOf="#id/list_consultation_section_three"
android:layout_toEndOf="#+id/list_consultation_section_one">
<TextView
android:id="#+id/my_consultation_doctor_name_text_view"
style="#style/subtitle1Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_8dp"
android:layout_marginTop="#dimen/dimen_8dp"
android:layout_marginEnd="#dimen/dimen_8dp"
android:text="#string/dr"
android:textColor="#color/blue_174c6c" />
<TextView
android:id="#+id/my_consultation_doctor_specialty_text_view"
style="#style/Body2Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/my_consultation_doctor_name_text_view"
android:layout_marginStart="#dimen/dimen_8dp"
android:layout_marginEnd="#dimen/dimen_8dp"
android:text="استشارى اطفال"
android:textColor="#color/gray_aaacad" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/list_consultation_section_three"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/my_consultation_date"
style="#style/Body2Style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_4dp"
android:layout_marginEnd="#dimen/dimen_12dp"
android:text="2/11/2019"
android:layout_centerHorizontal="true"
android:textColor="#color/gray_aeb1b1" />
<TextView
android:id="#+id/my_consultation_messages_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/my_consultation_date"
android:layout_marginStart="#dimen/dimen_4dp"
android:layout_marginTop="#dimen/dimen_4dp"
android:layout_marginEnd="#dimen/dimen_12dp"
android:background="#drawable/my_consultation_messages_number_bg"
android:padding="#dimen/dimen_12dp"
android:textColor="#color/white"
android:layout_centerHorizontal="true"
tools:text="0" />
</RelativeLayout>

How do I add appropriate constraints in GUI to make layout look like it does in design view?

I am struggling with how to use the GUI to make a constraint layout. I have watched and done tutorials, but applying them I am stuck. Any suggestions how to make my screen shot look as it is with constraints?
Here is what I have so far implemented via GUI:
<android.support.constraint.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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.udacity.sandwichclub.DetailActivity">
<ImageView
android:id="#+id/image_iv"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/sandwich_picture_content_description"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="#+id/description_tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.031" />
<TextView
android:id="#+id/origin_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/detail_error_message"
app:layout_constraintBaseline_toBaselineOf="#+id/origin_label_tv"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/origin_label_tv"
android:layout_width="95dp"
android:layout_height="22dp"
android:labelFor="#id/origin_tv"
android:text="#string/detail_place_of_origin_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="304dp" />
<TextView
android:id="#+id/also_known_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/detail_error_message"
app:layout_constraintBaseline_toBaselineOf="#+id/also_knwon_label_tv"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/also_knwon_label_tv"
android:layout_width="91dp"
android:layout_height="16dp"
android:labelFor="#id/also_known_tv"
android:text="#string/detail_also_known_as_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="414dp" />
<TextView
android:id="#+id/ingredients_tv"
android:layout_width="395dp"
android:layout_height="72dp"
android:text="#string/detail_error_message"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="545dp" />
<TextView
android:id="#+id/detail_ingredients_label_tv"
android:layout_width="84dp"
android:layout_height="18dp"
android:labelFor="#id/ingredients_tv"
android:text="#string/detail_ingredients_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="519dp" />
<TextView
android:id="#+id/description_tv"
android:layout_width="395dp"
android:layout_height="72dp"
android:text="#string/detail_error_message"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="651dp" />
<TextView
android:id="#+id/detail_description_label_tv"
android:layout_width="85dp"
android:layout_height="18dp"
android:labelFor="#id/description_tv"
android:text="#string/detail_description_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="625dp" />

Android Layout - Position issue

I'm new to Android and I'm building small app in order to get the basics. I'm facing a dumb issue which, apparently, I can't seem to be able to fix.
I'm building a screen that looks like this on the designer
However, when starting the emulator, the design looks like this:
Can you please advice me what I'm doing wrong? My xml file is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.example.todorivanov.mytaskmanager.MainActivity">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
Thanks a lot!

you need to use relative or Linear Layout to achieve what you are looking for. Following is the code for RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.example.todorivanov.mytaskmanager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation = "horizontal"
android:id = "#+id/buttons">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
</LinearLayout>
<CalendarView
android:id="#+id/calendarView"
android:layout_below = "#+id/buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
close any other tags ..
now you'll get the calenderView under the buttons just like the editor preview but you may need to adjust the padding/margin according to your requirements.
Hope this helps..

use Relative layout and code like this
Edited with suggestion of performance as said by Rotwang
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:text="Add task"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_below="#+id/btnOld"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
output