Why is my android UI layout not responsive for every phone?

Question

I watched many tutorials on responsive designing and I came up with a layout that I expected to be responsive on every phone(not tablets) but it's misaligning in most devices, What am I doing wrong here and what do I need to change?

So far I have tried Using Constraint layout and avoiding hardcoded values and gave height and width as match constraint but still, it's not responsive.

<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelineh001"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.434" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelineh002"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.80" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelinev001"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.13" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelinev002"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.35" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelinev01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.65" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelinev02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.87" />

<ImageView
    android:id="@+id/bottomBackground"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/bgbubble"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<FrameLayout
    android:id="@+id/crop"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <fragment
        android:id="@+id/mapfragment"
        class="com.here.android.mpa.mapping.AndroidXMapFragment"
        android:layout_width="454dp"
        android:layout_height="389dp"
        android:layout_gravity="center"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="130dp" />

    <ImageView
        android:id="@+id/cropMap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/crop" />

</FrameLayout>


<ImageView
    android:id="@+id/img_speed"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="190dp"
    android:layout_marginEnd="180dp"
    android:layout_marginBottom="70dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev01"
    app:layout_constraintStart_toStartOf="@+id/guidelinev001"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/green_circle" />

<ImageView
    android:id="@+id/imageView6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="140dp"
    android:layout_marginTop="15dp"
    android:layout_marginEnd="180dp"
    app:layout_constraintBottom_toBottomOf="@id/container"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev01"
    app:layout_constraintStart_toStartOf="@+id/guidelinev001"
    app:layout_constraintTop_toTopOf="@+id/guidelineh001"
    app:srcCompat="@drawable/red_circle" />

<TextView
    android:id="@+id/currentSpeed"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/trats"
    android:gravity="center"
    android:text="0"
    android:textColor="@android:color/white"
    android:textSize="60dp"
    app:layout_constraintBottom_toBottomOf="@+id/img_speed"
    app:layout_constraintEnd_toEndOf="@+id/img_speed"
    app:layout_constraintStart_toStartOf="@+id/img_speed"
    app:layout_constraintTop_toTopOf="@+id/img_speed" />

<TextView
    android:id="@+id/currentSpeedLimit"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="2dp"
    android:fontFamily="@font/trats"
    android:gravity="center"
    android:text="0"
    android:textColor="@android:color/white"
    android:textSize="23dp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView6"
    app:layout_constraintEnd_toEndOf="@+id/imageView6"
    app:layout_constraintStart_toStartOf="@+id/imageView6"
    app:layout_constraintTop_toTopOf="@+id/imageView6" />

<TextView
    android:id="@+id/tv_unit"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="80dp"
    android:fontFamily="@font/gothamlight"
    android:gravity="center"
    android:text="km/h"
    android:textColor="@android:color/white"
    android:textSize="25dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/img_speed"
    app:layout_constraintEnd_toEndOf="@+id/currentSpeed"
    app:layout_constraintStart_toStartOf="@+id/currentSpeed"
    app:layout_constraintTop_toTopOf="@+id/img_speed" />

<TextView
    android:id="@+id/distToNext"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="20dp"
    android:layout_marginTop="130dp"
    android:layout_marginEnd="40dp"
    android:layout_marginBottom="70dp"
    android:fontFamily="@font/gothamlight"
    android:gravity="center"
    android:text=""
    android:textColor="@android:color/white"
    android:textSize="25dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@id/container"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev02"
    app:layout_constraintStart_toStartOf="@+id/guidelinev01"
    app:layout_constraintTop_toTopOf="@+id/guidelineh001" />

<TextView
    android:id="@+id/destination"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="40dp"
    android:layout_marginTop="95dp"
    android:layout_marginEnd="30dp"
    android:layout_marginBottom="15dp"
    android:background="#000"
    android:fontFamily="@font/gothamlight"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:textSize="20dp"
    android:textStyle="bold"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guidelineh002"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev01"
    app:layout_constraintStart_toStartOf="@+id/guidelinev002"
    app:layout_constraintTop_toTopOf="@+id/guidelineh001" />

<ImageView
    android:id="@+id/turnIcon"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="15dp"
    android:layout_marginEnd="20dp"
    android:layout_marginBottom="30dp"
    app:layout_constraintBottom_toTopOf="@+id/guidelineh002"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev02"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guidelinev01"
    app:layout_constraintTop_toTopOf="@+id/guidelineh001"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/eta"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="81dp"
    android:layout_marginBottom="60dp"
    android:fontFamily="@font/gothamlight"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:textSize="25dp"
    android:textStyle="bold"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="@id/container"
    app:layout_constraintEnd_toStartOf="@+id/distToNext"
    app:layout_constraintStart_toEndOf="@+id/currentSpeedLimit"
    app:layout_constraintTop_toBottomOf="@+id/destination" />

<FrameLayout
    android:id="@+id/microphoneContainer"
    android:layout_width="65dp"
    android:layout_height="58dp"
    android:background="@color/colorPrimaryDark"
    android:visibility="gone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
  >
    
</FrameLayout>

<ListView
    android:id="@+id/msgrecvlist"
    android:layout_width="188dp"
    android:layout_height="113dp"
    android:visibility="gone"
    android:background="@android:color/holo_blue_light"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    >
    
</ListView>

<FrameLayout
    android:id="@+id/functionContainer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="18dp"
    android:layout_marginTop="70dp"
    android:layout_marginEnd="18dp"
    android:layout_marginBottom="60dp"
    android:background="@android:color/background_dark"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guidelineh002"
    app:layout_constraintEnd_toStartOf="@+id/guidelinev01"
    app:layout_constraintStart_toStartOf="@+id/guidelinev002"
    app:layout_constraintTop_toTopOf="parent">

</FrameLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

`layout_margins` is what causing the problem ig, instead use `Horizontal Bias` and `Vertical Bias` to position along an axis — Sekiro, Jan 13 '21 at 16:13
Sorry, can't attach pics :( but to sum it up this works perfectly on some phones but its entirely misaligned on some — Ashen Jayawardena, Jan 13 '21 at 21:02
@rcs then I would need to hardcode height and width attributes, won't I? — Ashen Jayawardena, Jan 13 '21 at 21:03
@AshenJayawardena not necessarily, use `wrap-content` for height and width and use `Horizontal Bias` or `Vertical Bias` according to your requirements — Sekiro, Jan 13 '21 at 22:54

score 0 · Answer 1 · answered Jan 13 '21 at 16:23

0

If you click on the layout validation on the right hand side of android studio. you get a preview on how your layout will look for different sized devices.

notice how all the texts got squashed? The reason is because you have hard-coded your textSize.

You can try to define different text sizes for different screens by following the answer below

How to define dimens.xml for every different screen size in android?

basically, move the hardcoded text size into dimens.xml (one xml file for each size).

answered Jan 13 '21 at 16:23

Angel Koh

12,479
7
64
91

do I need to include hardcoded margin values in the dimens.xml as well? – Ashen Jayawardena Jan 13 '21 at 20:34
do I need to create separate layout files according to density too? I tried using seperate dimens.xml files but it did not work – Ashen Jayawardena Jan 13 '21 at 20:57
@AshenJayawardena, You can also try not constraining both sides of your text view so that the text does not get squashed. If all else fails, you will have to maintain multiple layout for different screen sizes. – Angel Koh Jan 14 '21 at 02:42
having one constraint didn't work either, probably because I have given match constraint as the width instead of wrap content? and if I do add different layouts should it be for the density or for the screen size? – Ashen Jayawardena Jan 14 '21 at 15:32

Why is my android UI layout not responsive for every phone?

1 Answers1