I have the below Constraint Layout that works well on a Pixel 4 XL.
It seems to scale for a number of different devices in AVD when tested.
Albeit, when a friend of mine tried it on Pixel 5 it appeared all squashed and overlapped. I'm still getting my head around Constraint Layouts and screen scaling and was wondering if somebody could do me a huge favour and cast an eye over the below Layout file to see where I might be going wrong please? Many thanks! Please let me know if you require any additional info/screenshots etc. More than happy to provide them.
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/minabackground"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gauge2"
android:layout_width="143dp"
android:layout_height="143dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="40dp"
android:layout_marginTop="59dp"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
app:gaugeEndValue="800"
app:gaugePointEndColor="#color/md_blue_800"
app:gaugePointStartColor="#color/md_blue_300"
app:gaugeStartAngle="135"
app:gaugeStartValue="0"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeSweepAngle="270"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toStartOf="#+id/gauge3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<TextView
android:id="#+id/explainguage1"
android:layout_width="143dp"
android:layout_height="34dp"
android:layout_marginStart="40dp"
android:layout_marginBottom="5dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLines="2"
android:text="PRICE VS 24HR L/H:"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/gauge2"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/explainguage"
android:layout_width="143dp"
android:layout_height="34dp"
android:layout_marginEnd="40dp"
android:layout_marginBottom="5dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLines="2"
android:text="PRICE VS ATL/ATH:"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/gauge3"
app:layout_constraintEnd_toEndOf="#+id/imageView2" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gauge3"
android:layout_width="143dp"
android:layout_height="143dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:layout_marginEnd="40dp"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
app:gaugeEndValue="800"
app:gaugePointEndColor="#color/md_blue_800"
app:gaugePointStartColor="#color/md_blue_300"
app:gaugeStartAngle="135"
app:gaugeStartValue="0"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeSweepAngle="270"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<TextView
android:id="#+id/priceresult"
android:layout_width="104dp"
android:layout_height="45dp"
android:layout_marginStart="9dp"
android:layout_marginLeft="9dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLength="5"
android:text=""
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
tools:layout_conversion_absoluteHeight="75dp"
tools:layout_conversion_absoluteWidth="117dp" />
<TextView
android:id="#+id/percentageresult"
android:layout_width="105dp"
android:layout_height="45dp"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLength="5"
android:text=""
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/priceresult"
app:layout_constraintTop_toTopOf="#+id/imageView3"
tools:layout_conversion_absoluteHeight="75dp"
tools:layout_conversion_absoluteWidth="117dp" />
<TextView
android:id="#+id/dailylow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:maxLength="5"
android:text="0.00"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge2"
app:layout_constraintEnd_toEndOf="#+id/gauge2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/gauge2"
app:layout_constraintTop_toTopOf="#+id/gauge2"
app:layout_constraintVertical_bias="0.491" />
<TextView
android:id="#+id/dailyhigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:maxLength="5"
android:text="0.00"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge2"
app:layout_constraintEnd_toEndOf="#+id/gauge2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/dailylow"
app:layout_constraintTop_toTopOf="#+id/gauge2"
app:layout_constraintVertical_bias="0.491" />
<TextView
android:id="#+id/slash"
android:layout_width="16dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="/"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge2"
app:layout_constraintEnd_toStartOf="#+id/dailyhigh"
app:layout_constraintHorizontal_bias="0.555"
app:layout_constraintStart_toEndOf="#+id/dailylow"
app:layout_constraintTop_toTopOf="#+id/gauge2"
app:layout_constraintVertical_bias="0.491" />
<TextView
android:id="#+id/alltimelow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:maxLength="5"
android:text="0.00"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge3"
app:layout_constraintEnd_toEndOf="#+id/gauge3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/gauge3"
app:layout_constraintTop_toTopOf="#+id/gauge3"
app:layout_constraintVertical_bias="0.491" />
<TextView
android:id="#+id/alltimehigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:maxLength="5"
android:text="0.00"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge3"
app:layout_constraintEnd_toEndOf="#+id/gauge3"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/alltimelow"
app:layout_constraintTop_toTopOf="#+id/gauge3"
app:layout_constraintVertical_bias="0.491" />
<TextView
android:id="#+id/slash2"
android:layout_width="16dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/gauge2"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="/"
android:textColor="#color/lightgrey"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/gauge3"
app:layout_constraintEnd_toStartOf="#+id/alltimehigh"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/alltimelow"
app:layout_constraintTop_toTopOf="#+id/gauge3"
app:layout_constraintVertical_bias="0.491" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/largeroundedbox2"
tools:visibility="visible" />
<TextView
android:id="#+id/marketcap"
android:layout_width="200dp"
android:layout_height="52.39dp"
android:layout_centerHorizontal="true"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="150dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/circsupply"
android:layout_width="200dp"
android:layout_height="52.39dp"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="44dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/volume"
android:layout_width="200dp"
android:layout_height="52.39dp"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="96dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/volumeheader"
android:layout_width="197dp"
android:layout_height="52.39dp"
android:layout_marginStart="6dp"
android:layout_marginLeft="6dp"
android:layout_marginBottom="96dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:text="24HR VOLUME:"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/circsupplyheader"
android:layout_width="197dp"
android:layout_height="52.39dp"
android:layout_marginBottom="44dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:text="CIRC SUPPLY:"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.028"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/marketcapheader"
android:layout_width="197dp"
android:layout_height="52.39dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="6dp"
android:layout_marginLeft="6dp"
android:layout_marginBottom="150dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLines="2"
android:text=""
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="66dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/smallpricebox" />
<TextView
android:id="#+id/explainprice"
android:layout_width="228dp"
android:layout_height="36dp"
android:layout_marginStart="-1dp"
android:layout_marginTop="30dp"
android:fontFamily="#font/syncopatereg"
android:gravity="center"
android:maxLines="2"
android:text="CURRENT PRICE + 24HR CHANGE:"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="182dp"
android:layout_height="67dp"
android:layout_marginTop="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:srcCompat="#drawable/minapluslogo" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4"
app:srcCompat="#drawable/marketdataheader" />
<com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
android:layout_width="45dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:numberOfDots="2"
app:selectedDotIndex="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
You have a lot of hardcoded large dp values. width/height/margins/padding will all result in different outputs per device. You are on the right track using a ConstraintLayout, but you are also not letting it do its job by having all of theses large dp values.
For example imageView2 looks fine, no large dp values and its size is effectively defined by what its constrained too.
But looking at gauge2.
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gauge2"
android:layout_width="143dp" <-- You are assuming the screen is this wide.
android:layout_height="143dp" <-- You are assuming the screen is this tall.
android:layout_centerHorizontal="true"
android:layout_marginStart="40dp" <-- You are assuming you have that much space from the Left.
android:layout_marginTop="59dp" <-- You are assuming you have that much space from the Top.
android:paddingLeft="10dp" <-- This I would say is fine its small enough that it wont be a problem along with the rest of the padding.
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
...
/>
Setting small dp values for small adjustments is fine and will keep everything looking good across most screens.
But when using the ConstraintLayout allow it to place things where they need to go through proper constraints, and then do the fine tuning with the dp values.
Remove hard code values instead of height and width use padding will scaling for different screen sizes
Related
I want to position text views directly under a seekbar in Android. Unfortunately the shown layout in the emulator does not look correct altough in the layout editor the layout looks correct. You can see this on the screenshots
There are two problems:
The textview on the left of the seekbar is to high altough in the layout editor it is on the same level as the seekbar
The labels for each point of seekbar are all too much on shifted onto the right side.
Here you have the XML-layout code:
<?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">
<TextView
android:id="#+id/textView50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="50"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView40"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView60"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="60"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView50"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="245dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RButton"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.016"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.395" />
<ImageButton
android:id="#+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
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.83"
app:srcCompat="#mipmap/comment" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<Button
android:id="#+id/o_button"
android:layout_width="163dp"
android:layout_height="72dp"
android:background="#drawable/custom_button"
android:text="Button"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.87" />
<RadioGroup
android:id="#+id/radioGroup_Size"
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_constraintVertical_bias="0.4"
app:layout_constraintHorizontal_bias="0.871"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/r_Button_Small"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/small"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.322"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="50dp"
app:layout_constraintVertical_bias="0.584" />
<RadioButton
android:id="#+id/r_Button_Medium"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:checked="true"
android:text="#string/Medium"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.583" />
<RadioButton
android:id="#+id/r_Button_Large"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/Large"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.584" />
</RadioGroup>
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="130dp"
android:layout_marginLeft="120dp"
android:layout_marginEnd="70dp"
android:layout_marginRight="80dp"
android:popupBackground="#5fe0f5"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/spinner2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.4" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:popupBackground="#5fe0f5"
android:textSize="120sp"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="#id/spinner1"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="#id/spinner1"
app:layout_constraintTop_toBottomOf="#+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.44" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:text="Spinner 1"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/spinner1"
app:layout_constraintHorizontal_bias="0.102"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewS" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="28dp"
android:layout_marginRight="28dp"
android:text="Spinner 2"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/spinner2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<SeekBar
android:id="#+id/seekBar"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView9"
app:layout_constraintVertical_bias="0.45" />
<TextView
android:id="#+id/textView30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="57dp"
android:layout_marginLeft="57dp"
android:text="30"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toStartOf="#+id/textView12"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="40"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView30"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView70"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="70"
app:layout_constraintBottom_toTopOf="#+id/o_button"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
app:layout_constraintStart_toEndOf="#+id/textView60"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Can you tell me why this problem occurs? For me it is quite strange because in the layout editor everything is being displayed correctly and I do not understand why generally there are sometimes differences between the layouteditor and the layout on an emulator in Android. I'd appreciate every commment and would be thanful for your help.
Hey I see here there are some constraint issues what you have set and what you are trying to achieve :-
In this :-
<SeekBar
android:id="#+id/seekBar"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView9"
app:layout_constraintVertical_bias="0.45" />
You can see you have set your Seekbar textview top and bottom constraints to app:layout_constraintBottom_toTopOf="#+id/textView2" and app:layout_constraintTop_toBottomOf="#+id/textView9" change that to app:layout_constraintTop_toTopOf="#id/seekBar" and app:layout_constraintBottom_toBottomOf="#id/seekBar" This will make your Seekbar textview in center of your actual seekbar.
Now coming to the values section I see that you haven't set your views in your proper aligned manner so it's really hard to find which text view is set where from your xml code. Although I would suggest you take a constraint or linear layout with the same width of your seekbar and below seekbar and then set the text in that layout using constraintWidthPercent(if using constraint layout) according to the max values you have in your seekbar.
I am currently working on an application and am trying to allow it to support multiple phone screen sizes (it will not support anything larger than a Google Pixel 3 XL). Also, just for context, I'm using a ConstraintLayout.
For the background of the layout I'm using an image. On top of the background, I have interact-able elements meticulously placed to match the position they're supposed to correspond with on the background. This, however, doesn't translate well across all displays, as the layout elements and the background become distorted and misaligned. My solution to this was to try to make different layouts for phones which would be applied based on their resolution (layouts were made for phones with these screen dimensions: 1080x1920, 1080x2160, 1440x2560, 1440x2880, 1440x2960).
However, these don't seem to auto-apply to any of the devices I've tested on. I'm assuming this is because phones don't have any specifications and this only really applies to tablets, watches, etc. I just recently thought of transferring everything from my UI into my layout and to just implement everything using ImageViews, but this doesn't work either, since when the phone
screen size changes, all elements lose their proper placement within the screen. I've tried almost everything and can't quite think of anything else to do in order to make my app cater to all screen sizes.
I'll provide one of my more complicated layouts for reference. Really hoping for some help on this one. Thanks!
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"
android:orientation="vertical"
android:background="#drawable/a1440x2960_tt">
<TextView
android:id="#+id/display"
android:layout_width="wrap_content"
android:layout_height="74dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="152dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:fontFamily="#font/freesansbold"
android:text="00 : 00 . 00"
android:textColor="#color/black"
android:textSize="60dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/resetbtn"
android:layout_width="83dp"
android:layout_height="34dp"
android:layout_marginStart="268dp"
android:layout_marginLeft="268dp"
android:layout_marginTop="264dp"
android:background="#color/transparent"
android:stateListAnimator="#null"
android:textAllCaps="false"
android:textColor="#color/stopbtn"
android:textSize="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/pausebtn"
android:layout_width="92dp"
android:layout_height="35dp"
android:layout_marginStart="156dp"
android:layout_marginLeft="156dp"
android:layout_marginTop="264dp"
android:background="#color/transparent"
android:stateListAnimator="#null"
android:textAllCaps="false"
android:textColor="#color/stopbtn"
android:textSize="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/goalMinutes"
android:layout_width="96dp"
android:layout_height="66dp"
android:layout_marginStart="48dp"
android:layout_marginLeft="48dp"
android:layout_marginTop="156dp"
android:background="#null"
android:fontFamily="#font/freesansbold"
android:inputType="numberPassword"
android:text="00"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="50dp"
app:layout_constraintStart_toStartOf="#+id/splashdebugoutput"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/goalMilli"
android:layout_width="93dp"
android:layout_height="66dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="156dp"
android:background="#null"
android:fontFamily="#font/freesansbold"
android:inputType="numberPassword"
android:text="00"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="50dp"
app:layout_constraintStart_toStartOf="#+id/goal_dot"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/goalSeconds"
android:layout_width="82dp"
android:layout_height="66dp"
android:layout_marginTop="156dp"
android:background="#null"
android:fontFamily="#font/freesansbold"
android:inputType="numberPassword"
android:text="00"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="50dp"
app:layout_constraintStart_toEndOf="#+id/goal_colon2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/goal_dot"
android:layout_width="16dp"
android:layout_height="67dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="156dp"
android:fontFamily="#font/product_bold"
android:text="."
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="50dp"
app:layout_constraintStart_toEndOf="#+id/goalSeconds"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/goal_colon"
android:layout_width="18dp"
android:layout_height="43dp"
android:layout_marginStart="28dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="457dp"
android:fontFamily="#font/product_bold"
android:text=":"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="24dp"
app:layout_constraintStart_toStartOf="#+id/tempoSeconds"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/goal_colon2"
android:layout_width="16dp"
android:layout_height="67dp"
android:layout_marginTop="152dp"
android:fontFamily="#font/product_bold"
android:text=":"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="50dp"
app:layout_constraintStart_toEndOf="#+id/goalMinutes"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/minmarker"
android:layout_width="15dp"
android:layout_height="21dp"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
android:layout_marginTop="64dp"
android:fontFamily="#font/product_regular"
android:text="M"
android:textColor="#color/black"
android:textSize="17dp"
app:layout_constraintStart_toStartOf="#+id/goalMinutes"
app:layout_constraintTop_toTopOf="#+id/goalMinutes" />
<TextView
android:id="#+id/secmarker"
android:layout_width="12dp"
android:layout_height="20dp"
android:layout_marginStart="148dp"
android:layout_marginLeft="148dp"
android:layout_marginTop="64dp"
android:fontFamily="#font/product_regular"
android:text="S"
android:textColor="#color/black"
android:textSize="17dp"
app:layout_constraintStart_toStartOf="#+id/goalMinutes"
app:layout_constraintTop_toTopOf="#+id/goalMinutes" />
<TextView
android:id="#+id/millimarker"
android:layout_width="27dp"
android:layout_height="19dp"
android:layout_marginStart="246dp"
android:layout_marginLeft="246dp"
android:layout_marginTop="64dp"
android:fontFamily="#font/product_regular"
android:text="MS"
android:textColor="#color/black"
android:textSize="17dp"
app:layout_constraintStart_toStartOf="#+id/goalMinutes"
app:layout_constraintTop_toTopOf="#+id/goalMinutes" />
<TextView
android:id="#+id/splashdebugoutput"
android:layout_width="wrap_content"
android:layout_height="37dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Spinner
android:id="#+id/course"
android:layout_width="118dp"
android:layout_height="36dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="233dp"
android:layout_marginRight="233dp"
android:background="#color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/resetbtn"></Spinner>
<Spinner
android:id="#+id/length"
android:layout_width="118dp"
android:layout_height="38dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="68dp"
android:layout_marginRight="68dp"
android:background="#color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/resetbtn"></Spinner>
<Button
android:id="#+id/startbtn"
android:layout_width="86dp"
android:layout_height="35dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/transparent"
app:layout_constraintEnd_toStartOf="#+id/pausebtn"
app:layout_constraintHorizontal_bias="0.741"
app:layout_constraintStart_toStartOf="#+id/splashdebugoutput"
app:layout_constraintTop_toBottomOf="#+id/goalMinutes" />
<EditText
android:id="#+id/tempoSeconds"
android:layout_width="30dp"
android:layout_height="47dp"
android:layout_marginStart="68dp"
android:layout_marginLeft="68dp"
android:layout_marginTop="448dp"
android:backgroundTint="#color/black"
android:maxLength="1"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="0"
android:inputType="numberPassword"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/texthint"
android:textSize="15dp"
android:verticalScrollbarPosition="right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/tempoMilliTens"
android:layout_width="29dp"
android:layout_height="48dp"
android:layout_marginTop="448dp"
android:backgroundTint="#color/black"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="0"
android:inputType="numberPassword"
android:maxLength="1"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/texthint"
android:textSize="15dp"
app:layout_constraintStart_toEndOf="#+id/goal_colon"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/tempoMilliHundreds"
android:layout_width="30dp"
android:layout_height="48dp"
android:layout_marginTop="448dp"
android:backgroundTint="#color/black"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="0"
android:maxLength="1" android:inputType="numberPassword"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/texthint"
android:textSize="15dp"
app:layout_constraintStart_toEndOf="#+id/tempoMilliTens"
app:layout_constraintTop_toTopOf="parent" />
<CheckBox
android:id="#+id/splitAuto"
android:layout_width="174dp"
android:layout_height="26dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:button="#color/transparent"
android:background="#null"
android:scaleX="1.35"
android:scaleY="1.35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/course" />
<CheckBox
android:id="#+id/splitManual"
android:layout_width="174dp"
android:layout_height="26dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:button="#color/transparent"
android:scaleX="1.35"
android:background="#null"
android:scaleY="1.35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitAuto" />
<ImageView
android:id="#+id/checked1"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="153dp"
android:layout_marginRight="151dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/course" />
<ImageView
android:id="#+id/checked2"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginTop="87dp"
android:layout_marginEnd="153dp"
android:layout_marginRight="148dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/length" />
<ImageView
android:id="#+id/checked1u"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="153dp"
android:layout_marginRight="148dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/course" />
<ImageView
android:id="#+id/checked2u"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginTop="87dp"
android:layout_marginEnd="153dp"
android:layout_marginRight="152dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/length" />
<EditText
android:id="#+id/secInput"
android:layout_width="69dp"
android:layout_height="39dp"
android:layout_marginStart="132dp"
android:layout_marginLeft="132dp"
android:layout_marginTop="76dp"
android:backgroundTint="#color/black"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="Sec."
android:inputType="numberPassword"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/black"
android:textSize="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitAuto" />
<EditText
android:id="#+id/milliInput"
android:layout_width="69dp"
android:layout_height="39dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="132dp"
android:layout_marginRight="132dp"
android:backgroundTint="#color/black"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="Milli."
android:inputType="numberPassword"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/black"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#id/secInput"
app:layout_constraintTop_toBottomOf="#+id/splitAuto" />
<EditText
android:id="#+id/offset"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:backgroundTint="#color/black"
android:ems="10"
android:fontFamily="#font/product_regular"
android:hint="Time Offset Per Length"
android:inputType="numberPassword"
android:textAlignment="center"
android:textColor="#color/black"
android:textColorHint="#color/black"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.507"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitAuto" />
<Button
android:id="#+id/add"
android:layout_width="101dp"
android:layout_height="35dp"
android:layout_marginStart="292dp"
android:layout_marginLeft="292dp"
android:layout_marginTop="124dp"
android:background="#color/transparent"
app:layout_constraintStart_toStartOf="#+id/splashdebugoutput"
app:layout_constraintTop_toBottomOf="#+id/splitManual" />
<Button
android:id="#+id/remove"
android:layout_width="101dp"
android:layout_height="35dp"
android:layout_marginTop="4dp"
android:background="#color/transparent"
app:layout_constraintEnd_toEndOf="#+id/add"
app:layout_constraintTop_toBottomOf="#+id/add" />
<ListView
android:id="#+id/splitList"
android:layout_width="113dp"
android:layout_height="95dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="140dp"
android:divider="#color/black"
android:dividerHeight="1dp"
android:scrollbarThumbVertical="#drawable/gray_scroll_style"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"></ListView>
<TextView
android:id="#+id/txtData"
android:layout_width="136dp"
android:layout_height="69dp"
android:layout_marginStart="132dp"
android:layout_marginLeft="132dp"
android:text="1"
android:visibility="invisible"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/debugOutput2"
android:layout_width="96dp"
android:layout_height="69dp"
android:text="TextView"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Seems like you have a lot of hard coded density pixels there. Have you tried using dimen.xml?
I'm doing a homework task.
I already tried with relative or liner, event constraint layout
but preview is always different from the real preview in my phone.
My phone is Xiaomi Redmi Note 5a (55 inch, 1280 x 720 pixel)
My device
Android Studio preview
<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=".Register"
tools:layout_editor_absoluteY="25dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:background="#drawable/ic_header" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="27dp"
android:layout_height="30dp"
android:background="#drawable/ic_header_back"
tools:layout_editor_absoluteX="15dp"
tools:layout_editor_absoluteY="15dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="20dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="16dp" />
<EditText
android:id="#+id/editText3"
android:layout_width="328dp"
android:layout_height="34dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="72dp" />
<EditText
android:id="#+id/editText10"
android:layout_width="330dp"
android:layout_height="34dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
tools:layout_editor_absoluteX="15dp"
tools:layout_editor_absoluteY="395dp" />
full code : https://pastebin.com/U9YdKK1m
You see this layout differently because you are using fixed size on your views, and different phones got different screen size - so using fixed size will make your layout non-responsive to all devices.
If you want to use constraintLayot you can simply use chains to order your views vertically:
<?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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="27dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.571" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/editText10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<EditText
android:id="#+id/editText10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/radioButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton"
app:layout_constraintBottom_toBottomOf="#+id/radioButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/radioButton2"
app:layout_constraintTop_toTopOf="#+id/radioButton2" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="RadioButton"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/radioButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this :
This is my first time programming in android studio and I need help in figuring out how to compare options selected by the user based on the radio buttons and query an api to pull data from a website. Below is the code of the layout.The results are supposed to be displayed on another page, thank you.
<?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"
android:background="#0663ba"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="#+id/button"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#000000"
android:text="#string/search"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText"
android:layout_width="172dp"
android:layout_height="50dp"
android:layout_marginBottom="32dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="#string/zip_code"
android:inputType="textPostalAddress"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView2"
android:layout_width="175dp"
android:layout_height="44dp"
android:layout_marginBottom="48dp"
android:layout_marginStart="8dp"
android:fontFamily="sans-serif"
android:text="#string/select_date_range"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/radioGroup6"
android:layout_width="144dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:textColor="#FFFFFF"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/radioGroup7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/imageButton">
<RadioButton
android:id="#+id/radioButton8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="true"
android:text="#string/_1_week"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton9"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/_2_weeks"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/_3_months"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</RadioGroup>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="44dp"
android:layout_marginBottom="28dp"
android:layout_marginStart="16dp"
android:text="#string/select_crime_type"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/radioGroup7"
android:layout_width="144dp"
android:layout_height="0dp"
android:layout_marginBottom="11dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:textColor="#FFFFFF"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/radioGroup6">
<RadioButton
android:id="#+id/radioButton13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/rape"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton15"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/assault"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton14"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/murder"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</RadioGroup>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="33dp"
android:text="#string/search_for_criminal_or_victim"
android:textAlignment="viewStart"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/editText3"
app:layout_constraintEnd_toEndOf="#+id/radioGroup7"
app:layout_constraintTop_toBottomOf="#+id/radioGroup7" />
<EditText
android:id="#+id/editText3"
android:layout_width="195dp"
android:layout_height="45dp"
android:layout_marginBottom="66dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="#string/enter_full_name"
android:inputType="textPersonName"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="147dp"
android:layout_marginBottom="76dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:backgroundTint="#a91818"
android:scaleType="fitCenter"
android:src="#drawable/new_crime_img"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/radioGroup6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
On my ListView some lines are not RTL aligned.
After scrolling and redrawing the lines are correct.
My layout of the line item:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clFrontView"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<ImageView
android:id="#+id/ivCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/circle"
tools:ignore="ContentDescription"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
tools:ignore="ContentDescription"
app:layout_constraintTop_toTopOf="#id/ivCircle"
app:layout_constraintBottom_toBottomOf="#id/ivCircle"
app:layout_constraintStart_toStartOf="#id/ivCircle"
app:layout_constraintEnd_toEndOf="#id/ivCircle"
app:layout_constraintLeft_toLeftOf="#id/ivCircle"
app:layout_constraintRight_toRightOf="#id/ivCircle" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Line of Text"
android:textSize="18sp"
android:maxLines="2"
app:layout_constraintLeft_toRightOf="#id/ivCircle"
app:layout_constraintStart_toEndOf="#id/ivCircle"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"/>
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Wed, 01.05.2018 10:10"
android:textColor="#FF909090"
android:textSize="12sp"
android:drawablePadding="5dp"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine2" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Every 2nd Friday"
android:textColor="#FF909090"
android:textSize="12sp"
android:drawablePadding="5dp"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTime" />
</android.support.constraint.ConstraintLayout>
First start it looks like this, the first line is not RTL:
After scrolling down and again up to the top it is correct:
build.gradle dependency:
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
These changes may work:
<ImageView
android:id="#+id/ivCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bg_circle_win"
app:layout_constraintBottom_toBottomOf="#+id/civContactImage"
app:layout_constraintStart_toStartOf="#+id/civContactImage"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:layout_constraintEnd_toEndOf="#+id/civContactImage"
app:layout_constraintTop_toTopOf="#+id/civContactImage"
tools:ignore="ContentDescription" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:maxLines="2"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
tools:text="Line of Text" />
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#+id/tvTextLine"
tools:text="Wed, 01.05.2018 10:10" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#+id/tvTime"
tools:text="Every 2nd Friday" />
I hope to work. good luck
Try this maybe it could solve the problem. Small testing changes are there you can remove them according to your need, Firstly, I have changed the tools:text to android:text so that it shows dummy data.Secondly, The two imageview named as ivReminderType and icivCircleSmall I have put two default images just for testing purpose so do change that. Also there is one imageview named icivCircleSmall I didnt know where it should be constarined to so I have not edited any code written for it. Below is the edited code of the xml.
<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/clFrontView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="10dp">
<ImageView
android:id="#+id/ivCircle"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tvRepeat"
app:layout_constraintEnd_toStartOf="#+id/tvTime"
app:layout_constraintTop_toBottomOf="#+id/tvTextLine"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/tvRepeat"
app:layout_constraintEnd_toStartOf="#+id/tvRepeat"
app:layout_constraintTop_toBottomOf="#+id/tvTime"
tools:ignore="ContentDescription" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:maxLines="2"
android:text="Line of Text"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toTopOf="#+id/civContactImage" />
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:text="Wed, 01.05.2018 10:10"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#id/tvTextLine2" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:text="Every 2nd Friday"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#+id/tvTime"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTime" />
</android.support.constraint.ConstraintLayout>
Hope it helps!