0

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>
Sayooj
  • 766
  • 5
  • 23
Velociholmes
  • 25
  • 1
  • 7

2 Answers2

2

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.

avalerio
  • 2,072
  • 1
  • 12
  • 11
  • Hi. Thanks for your answer and help, it is appreciated very much. I will set to work ending the reliance on hard coded height and width of the items in my Constraint Layout. Out of curiosity, what do I do if I want to resize items relative to how I want them to look in the layout (in comparison to the other items)? Hopefully that makes sense. Many thanks. – Velociholmes Dec 26 '21 at 15:42
  • You would use `weights`. Here is an answer that shows you how including a picture of the result.. https://stackoverflow.com/questions/48677839/how-to-add-different-weight-to-constraintlayout-views – avalerio Dec 26 '21 at 16:26
  • Thank you. I've marked yours as the answer. I did what you said; removed a lot of the hard coded values, and instead let the constraints do the job with there being only small tweaks here and there. I also used a combo of 'match_parent, 'wrap_content' and a number of guidelines (with percentage selected) in order to scale everything to how I wanted it to look. The end result is testers have reported no overlapping or squashing and everything mostly looks spot on for a number of different devices. – Velociholmes Jan 16 '22 at 08:53
0

Remove hard code values instead of height and width use padding will scaling for different screen sizes

Tota Madhu
  • 26
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 23 '21 at 12:40