ConstraintLayout not scaling to adjust for various screen sizes-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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