ConstraintLayout not showing last child - android

I've defined a ConstraintLayout which consists of 3 parts
a chart
a block containing informations relative to the chart
a refresh rate
defined as follow:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
android:paddingBottom="8dp"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/chartBackgroundColor" />
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/graph_frame">
<!-- title -->
<TextView
android:id="#+id/current_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:text="Current Volt. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Average Volt."
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_title" />
<TextView
android:id="#+id/range_min_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range min. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_title" />
<TextView
android:id="#+id/range_max_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range max. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_min_title" />
<TextView
android:id="#+id/auto_focus_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Auto Focus"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_max_title" />
<TextView
android:id="#+id/lecture_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Lecture"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_title" />
<!-- value -->
<TextView
android:id="#+id/current_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{viewModel.currentVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#+id/current_voltage_title"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.averageVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_value" />
<TextView
android:id="#+id/range_min_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMinVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_value" />
<TextView
android:id="#+id/range_max_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMaxVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_min_value" />
<TextView
android:id="#+id/auto_focus_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoFocusLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_max_value" />
<TextView
android:id="#+id/lecture_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoPlayLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_value" />
<!-- pause -->
<ImageButton
android:id="#+id/pause_button"
android:onClick="#{() -> viewModel.pauseButtonPressed()}"
android:src="#drawable/ic_pause_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/auto_focus_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<!-- auto-focus -->
<ImageButton
android:id="#+id/auto_focus_button"
android:onClick="#{() -> viewModel.autoFocusButtonPressed()}"
android:src="#drawable/ic_pause_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pause_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/information"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
<data>
<variable
name="viewModel"
type="com.imihydronic.hytune.features.oscilloscope.OscilloscopeViewModel" />
</data>
Everything is showing as expected in the preview from Android Studio:
But unfortunately the last block (the refresh rate one) does not appear on a real device:
What am I missing here?
Update:
The layout given above was used for a Fragment. This Fragment was inflated inside a FrameLayout container which in turns was wrapped by a ScrollView. Removing the ScrollView and using Taslim Oseni solution did the work.


I can see that you have three views lined up linearly with id: graph_frame, information and warning. A quick fix would be to constrain each of these three views at both vertical ends (top and bottom). This way all three views would always fit the screen no matter what.
Therefore your code would look this way (I truncated the code to improve readability):
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
android:paddingBottom="8dp"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/information">
...
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/graph_frame"
app:layout_constraintBottom_toTopOf="#+id/warning">
...
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/information"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
I hope this helps. Merry coding!


Use guidelines and constraint children between them.


Use GuideLine Constraint to get this.
I added two horizontal guideline to divide screen in three section.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/chartBackgroundColor" />
</FrameLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp"
app:layout_constraintGuide_percent="0.4" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintBottom_toTopOf="#+id/guideline1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline">
<!-- title -->
<TextView
android:id="#+id/current_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:text="Current Volt. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Average Volt."
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_title" />
<TextView
android:id="#+id/range_min_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range min. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_title" />
<TextView
android:id="#+id/range_max_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range max. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_min_title" />
<TextView
android:id="#+id/auto_focus_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Auto Focus"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_max_title" />
<TextView
android:id="#+id/lecture_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Lecture"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_title" />
<!-- value -->
<TextView
android:id="#+id/current_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{viewModel.currentVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#+id/current_voltage_title"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.averageVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_value" />
<TextView
android:id="#+id/range_min_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMinVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_value" />
<TextView
android:id="#+id/range_max_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMaxVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_min_value" />
<TextView
android:id="#+id/auto_focus_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoFocusLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_max_value" />
<TextView
android:id="#+id/lecture_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoPlayLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_value" />
<!-- pause -->
<ImageButton
android:id="#+id/pause_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> viewModel.pauseButtonPressed()}"
android:src="#drawable/ic_pause_white"
app:layout_constraintBottom_toTopOf="#+id/auto_focus_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<!-- auto-focus -->
<ImageButton
android:id="#+id/auto_focus_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> viewModel.autoFocusButtonPressed()}"
android:src="#drawable/ic_pause_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pause_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp"
app:layout_constraintGuide_percent="0.7" />
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline1"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output :

Related

Recyclerview layout in dialog box

I am facing a problem while opening recyclerview in a dialog box. The layout in the recyclerview is overlapping and cutting when I open this in a dialog box same like this:
But, my original layout is look like this:
and here is the code for my layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="14dp"
android:elevation="10dp"
android:padding="8dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/corner_layout"
android:paddingTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/r_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Admission No."
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/r_d_field_name"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/admission_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45654"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_name"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/r_d_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/p_a_field_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/r_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />
<TextView
android:id="#+id/p_a_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Parents Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/btn_call_st"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/r_d_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_father_mother_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suresh Kumar Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/btn_view_st_profile"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toBottomOf="#+id/st_name" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_view_st_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="100dp"
android:layout_marginBottom="12dp"
android:gravity="center"
android:src="#drawable/view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_call_st"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9"
app:tint="#color/white" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_call_st"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="#E10751"
android:gravity="center"
android:src="#drawable/phone"
app:layout_constraintBottom_toBottomOf="#+id/btn_view_st_profile"
app:layout_constraintEnd_toStartOf="#+id/btn_view_st_profile"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btn_view_st_profile"
app:tint="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

If you constrain both left and right, you need to set width=0dp
<TextView
android:id="#+id/st_name"
android:layout_width="0dp" <-- change to 0dp
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />

How to get the middle part of the activity to be scrollable?

I am trying to get something like this in one of my activities:
attraction detailed view
I want the image to be fixed at the top, the middle bit with the text to be scrollable as description and short description will have quite a lot of text, and the buttons to be fixed to the bottom. only the middle one is permanent visibility, the margin ones are hidden or visible depending type of attraction listed.
I tried to enclose in linear layouts but didnt work, most probably my mistake.
My xml file is :
<?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="#color/colorAccent"
tools:context=".DetailedViewActivity">
<TextView
android:id="#+id/textViewDetailedName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/share_bold"
android:text="#string/name"
android:textAlignment="center"
android:textColor="#color/colorDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
<TextView
android:id="#+id/textViewDetailedAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoAddress" />
<TextView
android:id="#+id/textViewDetailedPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPostCode" />
<TextView
android:id="#+id/textViewDetailedShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoShortDesc" />
<TextView
android:id="#+id/textViewDetailedDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoDescription" />
<TextView
android:id="#+id/textViewDetailedPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPrice" />
<TextView
android:id="#+id/textViewDetailedInfoAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedName" />
<TextView
android:id="#+id/textViewDetailedInfoPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedAddress" />
<TextView
android:id="#+id/textViewDetailedInfoShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedPostCode" />
<TextView
android:id="#+id/textViewDetailedInfoDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedShortDesc" />
<TextView
android:id="#+id/textViewDetailedInfoPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedDesc" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="270dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image" />
<Button
android:id="#+id/btnReadReviews"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/read_reviews"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnBook"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/book"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/btnPostReview"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/add_review"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can wrap all scroll views into ScroolView and use another ConstraintLayout inside the ScroolView. You can found an example here

Android - Put ellipsis if there's collision between Text Views

I would like to check if there's a collision between Text Views, if there is, ellipsis should be displayed instead of them colliding with each other.
I already tried this, but it doesn't work on mine (probably because of the font family that I'm currently using, too many spaces)
Here's some of the XML code, (I'm using Constraint layout):
<?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"
tools:context=".SettingsActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="55dp"
android:layout_marginBottom="55dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="30dp"
tools:context=".SettingsActivity">
<TextView
android:id="#+id/screenText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:text="Screen"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/songsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:text="Songs"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor3" />
<Spinner
android:id="#+id/fontSizeInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
android:divider="#8e8e8e"
app:layout_constraintBottom_toBottomOf="#+id/fontSizeText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/fontSizeText" />
<Spinner
android:id="#+id/fontFamilyInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/fontFamilyText"
app:layout_constraintEnd_toEndOf="#+id/fontSizeInput"
app:layout_constraintTop_toTopOf="#+id/fontFamilyText" />
<Spinner
android:id="#+id/searchUsingInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/searchUsingText"
app:layout_constraintEnd_toEndOf="#+id/darkModeInput"
app:layout_constraintTop_toTopOf="#+id/searchUsingText" />
<Spinner
android:id="#+id/displayOrderInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingRight="32dp"
android:singleLine="true"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/displayOrderText"
app:layout_constraintEnd_toEndOf="#+id/searchUsingInput"
app:layout_constraintTop_toTopOf="#+id/displayOrderText"
android:paddingEnd="32dp" />
<TextView
android:id="#+id/fontSizeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="12dp"
android:text="Font Size"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/screenText" />
<View
android:id="#+id/SplitLine_hor1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fontSizeText" />
<View
android:id="#+id/splitLine_hor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fontFamilyText" />
<View
android:id="#+id/splitLine_hor2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/copyTextText" />
<View
android:id="#+id/splitLine_hor3"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/darkModeText" />
<View
android:id="#+id/splitLine_hor4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchUsingText" />
<View
android:id="#+id/splitLine_hor5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/displayOrderText" />
<View
android:id="#+id/splitLine_hor7"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/swipeHymnText" />
<TextView
android:id="#+id/fontFamilyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Font Family"
app:layout_constraintStart_toStartOf="#+id/fontSizeText"
app:layout_constraintTop_toBottomOf="#+id/SplitLine_hor1" />
<TextView
android:id="#+id/copyTextText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Copy Texts"
app:layout_constraintStart_toStartOf="#+id/fontFamilyText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor" />
<TextView
android:id="#+id/darkModeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Dark Mode"
app:layout_constraintStart_toStartOf="#+id/copyTextText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor2" />
<TextView
android:id="#+id/searchUsingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Search Using"
app:layout_constraintStart_toStartOf="#+id/darkModeText"
app:layout_constraintTop_toBottomOf="#+id/songsText" />
<TextView
android:id="#+id/displayOrderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Display Order"
app:layout_constraintStart_toStartOf="#+id/searchUsingText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor4" />
<TextView
android:id="#+id/swipeHymnText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Swipe Through Songs"
app:layout_constraintStart_toStartOf="#+id/displayOrderText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor5" />
<Switch
android:id="#+id/copyTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/copyTextText"
app:layout_constraintEnd_toEndOf="#+id/fontFamilyInput" />
<Switch
android:id="#+id/darkModeInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/darkModeText"
app:layout_constraintEnd_toEndOf="#+id/copyTextInput" />
<Switch
android:id="#+id/swipeHymnInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/swipeHymnText"
app:layout_constraintEnd_toEndOf="#+id/displayOrderInput" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Try nesting a horizontal linear layout inside your constraint layout. Place it where your
fontFamilyInput spinner is currently located. Next, place your fontFamilyText TextView and your fontFamilyInput spinner (in that order) inside the linear layout.
You can now use weights inside the two child views to declare where on the screen the text view stops and the spinner begins.
However, remember that this is just one approach.

Try adding this to your TextView MaxEms determins the number of character before ellipsis is shown
android:ellipsize="end"
android:maxEms="15"
android:singleLine="true"

Android ConstraintLayout - Top constraint for two layout

I am stuck with ConstraintLayout and confused to use which property to do as I want.
As per the following image, I wanted to give top-constraint of Details to either TextView of OrderTakenBy or OrderCollectedBy as per the height of that view.
Scenario:
If I give top constraint of Detail view as the bottom of OrderTakenBy TextView, It will overlap (as below image) the view of OrderCollectedBy Textview if it gets more lines. Vice versa.
Note: Order Taken By or Order Collected By may contain two or three lines.
So what can I do for top constraints which can work for both dynamic heights?
Edited:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.AccountMasterAddActivity"
tools:showIn="#layout/activity_account_master_add">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_no"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/supplierNameTextView"
app:layout_constraintTop_toBottomOf="#+id/supplierNameTextView" />
<TextView
android:id="#+id/orderNoTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="#string/hint_supplier_name"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/supplierNameTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:gravity="end"
android:text="#string/hint_order_date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/supplierNameTextView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/orderDateTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6"
tools:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_taken_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/orderNoTextView"
app:layout_constraintTop_toBottomOf="#+id/orderNoTextView" />
<TextView
android:id="#+id/orderTakenByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="TextView TextView"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="#string/hint_order_collected_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderDateTextView"
app:layout_constraintStart_toStartOf="#+id/orderDateTextView"
app:layout_constraintTop_toTopOf="#+id/textView8" />
<TextView
android:id="#+id/orderCollectedByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10"
tools:text="TextView TextView TextView TextView TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/hint_details"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderCollectedByTextView"
app:layout_constraintStart_toStartOf="#+id/orderTakenByTextView"
app:layout_constraintTop_toBottomOf="#+id/orderCollectedByTextView" />
<TextView
android:id="#+id/detailsTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:autoLink="phone"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView12"
app:layout_constraintTop_toBottomOf="#+id/textView12"
tools:text="TextView" />
<TextView
android:id="#+id/productLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Products"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/detailsTextView"
app:layout_constraintStart_toStartOf="#+id/detailsTextView"
app:layout_constraintTop_toBottomOf="#+id/detailsTextView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/productLabel"
app:layout_constraintStart_toStartOf="#+id/productLabel"
app:layout_constraintTop_toBottomOf="#+id/productLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>
Anyone can help?

You can use the Barrier To overcome this issue.
A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.
Here is the Documentation for Barrier
Add Order Taken By or Order Collected By as app:constraint_referenced_ids="view1,view2" and set the Detail view top to the bottom of the Barrie.
XML Reference:
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="411dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="order_taken_by,order_collected_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="21dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New"
android:textSize="#dimen/_16sp"
app:layout_constraintTop_toBottomOf="#+id/barrier"/>
Here is the output:

Use bottom barrier
Use Deatils textview top constraint to barrier and barrier reference to OrderTakenBy, OrderCollectedBy textview.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/OrderTakenBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse sdgjklsdj jgkjskg"
app:layout_constraintEnd_toStartOf="#+id/OrderCollectedBy"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/OrderCollectedBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospital fhkhsf "
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OrderTakenBy"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="OrderCollectedBy, OrderTakenBy" />
<TextView
android:id="#+id/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="lorem_ipsum"
android:gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>

I think you can wrap order taken by and order collected by in another constraint layout or to check programmatically the height(after setting the text) of the TextView's and change programmatically the top constraint.

ConstraintLayout left align the middle element of two horizontal chains?

I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?

Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<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/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above:

Categories

Resources