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?
Related
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
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>
I have a constraint layout inside a scroll view, with "adjustResize" in AndroidManifest.xml, because i want my views to resize when the user taps on an edit text. The problem is that sometimes (almost randomly) when I tap on the edit text (so the keyboard opens) or when i exit from the keyboard (pressing back button) the button is cut. This is what happens:
This is my layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="wrap_content"
android:paddingBottom="50dp">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.056"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/editText3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="31dp"
android:layout_height="35dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/spinner2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_qrcode_grey600_24dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="24dp"
android:layout_marginTop="32dp"
android:background="#android:color/transparent"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/spinner2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/editText3"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<Spinner
android:id="#+id/spinner"
android:layout_width="68dp"
android:layout_height="27dp"
android:layout_marginTop="48dp"
app:layout_constraintEnd_toEndOf="#+id/spinner2"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="68dp"
android:layout_height="27dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="48dp"
android:theme="#style/SpinnerSendFunds"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<Spinner
android:id="#+id/spinner5"
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:theme="#style/SpinnerSendFunds"
app:layout_constraintBottom_toBottomOf="#+id/editText5"
app:layout_constraintEnd_toEndOf="#+id/spinner"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/editText5" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4"
app:srcCompat="#drawable/add" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/buttons2"
android:text="SEND"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/spinner5"
app:layout_constraintTop_toBottomOf="#+id/spinner5" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:text="Add Additional Data"
android:textColor="#color/colorPrimary"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<EditText
android:id="#+id/editText4"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="number"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<EditText
android:id="#+id/editText5"
android:layout_width="113dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="numberDecimal"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/textView7"
app:layout_constraintStart_toStartOf="#+id/textView7"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="110dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="#+id/editText2"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
<TextView
android:id="#+id/textView7"
android:layout_width="110dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Hello I have an issue with my layout. Its working properly on preview mode and on an emulator with Api level 24 but when I run it on a device with api 19 it just breaks up and gets all messed up. Even my edit text fields end up unresponsive. here I paste my XML code to see if you guys coud help me out.
EDIT: I am very sorry I've pasted the wrong code (it was incomplete). I have edited and now its correct. Also attached a couple of pictures of how looks in the named devices.
Here is the messed layout And here is the correct one
.Another thing is that I am using one nested constraint layout. Do you thing that could be it?
<?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:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
tools:context="com.cuantomefalta.cuantomefalta.MainActivity">
<EditText
android:id="#+id/weighing3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/cero_percent"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/weighing2"
tools:text="25%"
android:layout_marginLeft="8dp"
android:layout_marginTop="2dp"
android:layout_marginStart="8dp"/>
<EditText
android:id="#+id/grade3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/one"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toRightOf="#+id/weighing3"
app:layout_constraintRight_toLeftOf="#+id/converted3"
app:layout_constraintTop_toTopOf="#+id/weighing3"
tools:text="100" />
<TextView
android:id="#+id/converted3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:text="#string/one_point_cero"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/weighing3"
tools:text="8.5"
android:layout_marginTop="2dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"/>
<EditText
android:id="#+id/weighing2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/cero_percent"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/weighing1"
tools:text="25%"
android:layout_marginLeft="8dp"
android:layout_marginTop="2dp"
android:layout_marginStart="8dp"/>
<EditText
android:id="#+id/grade2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/one"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toRightOf="#+id/weighing2"
app:layout_constraintRight_toLeftOf="#+id/converted2"
app:layout_constraintTop_toTopOf="#+id/weighing2"
tools:text="100" />
<TextView
android:id="#+id/converted2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:text="#string/one_point_cero"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/weighing2"
tools:text="8.5"
android:layout_marginTop="0dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"/>
<EditText
android:id="#+id/weighing1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/cero_percent"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/weighing"
tools:text="25%"
android:layout_marginLeft="8dp"
android:layout_marginTop="2dp"
android:layout_marginStart="8dp"/>
<EditText
android:id="#+id/grade1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/one"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toRightOf="#+id/weighing1"
app:layout_constraintRight_toLeftOf="#+id/converted1"
app:layout_constraintTop_toTopOf="#+id/weighing1"
tools:text="100"
android:layout_marginTop="0dp"
app:layout_constraintHorizontal_bias="0.5" />
<TextView
android:id="#+id/converted1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_square"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:text="#string/one_point_cero"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/weighing1"
tools:text="8.5"
android:layout_marginTop="0dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"/>
<EditText
android:id="#+id/weighing"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/cero_percent"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25%"
/>
<EditText
android:id="#+id/grade"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/little_square"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:hint="#string/one"
android:imeOptions="actionDone"
android:inputType="number"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintLeft_toRightOf="#+id/weighing"
app:layout_constraintRight_toLeftOf="#+id/converted"
app:layout_constraintTop_toTopOf="#+id/weighing"
tools:text="100" />
<TextView
android:id="#+id/converted"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/little_square"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:text="#string/one_point_cero"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/weighing"
tools:text="1.0" />
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-2505831397151341/8310107897"
ads:layout_constraintBottom_toBottomOf="parent"
ads:layout_constraintHorizontal_bias="0.0"
ads:layout_constraintLeft_toLeftOf="parent"
ads:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/shareView"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_gravity="center_vertical"
android:background="#drawable/big_circle"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/adView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextSwitcher
android:id="#+id/final_grade"
android:layout_width="0dp"
android:layout_height="234dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginTop="-12dp"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="125sp"
tools:text="55" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginTop="-12dp"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="125sp"
tools:text="99" />
</TextSwitcher>
<EditText
android:id="#+id/goalGrade"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical"
android:background="#drawable/little_circle"
android:cursorVisible="false"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:inputType="number"
android:imeOptions="actionDone"
android:text="#string/five"
android:textColor="#android:color/white"
android:textSize="30sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="#string/five"
android:layout_marginBottom="8dp" />
<TextView
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="#string/me_faltan"
android:textColor="#android:color/white"
android:textSize="25sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/shareView"
android:layout_marginTop="24dp"
/>
<TextView
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="#string/para_llegar"
android:textColor="#android:color/white"
android:textSize="20sp"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/goalGrade"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:clickable="true"
app:fabSize="mini"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/shareView"
app:srcCompat="#drawable/ic_add_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:clickable="true"
app:fabSize="mini"
app:layout_constraintLeft_toLeftOf="#+id/floatingActionButton8"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/floatingActionButton8"
app:srcCompat="#drawable/ic_clear_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:clickable="true"
app:fabSize="mini"
app:layout_constraintLeft_toLeftOf="#+id/floatingActionButton9"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/floatingActionButton9"
app:srcCompat="#drawable/ic_delete_sweep_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:clickable="true"
app:fabSize="mini"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/floatingActionButton10"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/floatingActionButton10"
app:layout_constraintBottom_toBottomOf="#id/shareView"
app:srcCompat="#drawable/ic_play_arrow_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="0dp"
android:clickable="true"
app:fabSize="mini"
app:layout_constraintRight_toRightOf="#id/shareView"
app:layout_constraintBottom_toBottomOf="#+id/shareView"
app:srcCompat="#drawable/ic_share_white_24dp"
android:visibility="gone"
android:layout_marginBottom="56dp" />
</android.support.constraint.ConstraintLayout>
Check in the build.gradle(module App) for the minSdkVersion & targetSdkVersion, your device might not be in the range, if so correct that
Your display resolution might be the problem.