Constraint layout doesn't fit on different devices

Question

I am trying to adapt a layout that I build with a nexus5, but it always get a different size on my device and I don't know why.

I used constraint layout to build it, and as I know the constraints should adapt on different devices but it is not working; I get always my content to be bigger or to overlap the other content.

Here is my xml of the layout I am building:

<?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"
    tools:context="com.example.afcosta.inesctec.pt.android.Login"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="25dp">

    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="52dp"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/textInputLayout6"
        android:layout_marginStart="45dp"
        android:layout_marginEnd="45dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="33dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/textInputLayout7">

        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="username" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:id="@+id/textInputLayout6"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/Login"
        android:layout_marginStart="43dp"
        android:layout_marginEnd="43dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="42dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/Login"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:background="@color/emerald"
        android:text="Entrar"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="@+id/textInputLayout6"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="143dp"
        app:layout_constraintLeft_toLeftOf="@+id/textInputLayout6" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ainda não tem conta?"
        android:layout_marginStart="26dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView5"
        tools:layout_constraintBaseline_creator="1"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="@+id/Login" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Registe-se"
        android:textColor="@color/nephritis"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="13dp"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@+id/Login"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toRightOf="@+id/textView3" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="232dp"
        android:layout_height="230dp"
        app:srcCompat="@drawable/flora"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/textInputLayout7" />
</android.support.constraint.ConstraintLayout>

that is what I see on my emulator: layout

this is what i see on my device: layout

score 0 · Answer 1 · answered Jun 11 '17 at 17:03

0

• Use resolution-independent units in your layout XML files

• Use layout managers to declare your layout without reference to absolute screen positions

• Provide different layouts for different screen sizes using multiple resource folders

answered Jun 11 '17 at 17:03

Shaine

80
1
10

and how can i do that? – Jun 11 '17 at 17:06
res/values/dimensions.xml in your layout XML file – Shaine Jun 11 '17 at 17:27
use different layouts for different screen sizes drawables-hdpi, drawables-xhdpi – Shaine Jun 11 '17 at 17:28

score -1 · Answer 2 · answered Jun 11 '17 at 17:08

-1

Quoting from android guide https://developer.android.com/training/multiscreen/screensizes.html

"To ensure that your layout is flexible and adapts to different screen sizes, you should use "wrap_content" and "match_parent" for the width and height of some view components" As i can see your image has hard code height,width,margins that might be the case

Try using <RelativeLayout> instead

answered Jun 11 '17 at 17:08

Akhil Saraswat

84
9

yeah but if i set to what you mean the image goes full size :S – Jun 11 '17 at 17:15
yes but i am saying to change layout from constraintlayout to relativelayout – Akhil Saraswat Jun 11 '17 at 17:16
what you might trying (from your reply) is that you are trying to do match parent using constraint layout, – Akhil Saraswat Jun 11 '17 at 17:17
exactly i used constraint layout on everything (since people says that it is soo good adapting on diferent screens) i thaught it adapts automaticly – Jun 11 '17 at 17:21
`RelativeLayout` in place of `android.support.constraint.ConstraintLayout` in both starting and end tag – Akhil Saraswat Jun 11 '17 at 17:22
but in that case you need images of the size you need it in activity and use `wrap_content` – Akhil Saraswat Jun 11 '17 at 17:24
why should i use relative layout if google recomends constraint for this? – Jun 11 '17 at 17:38
i have like 30 layouts, should i ch ange them all to relative now :S – Jun 11 '17 at 17:38
https://stackoverflow.com/questions/37321448/differences-between-constraintlayout-and-relativelayout see this answer, constraint layout uses percentage – Akhil Saraswat Jun 11 '17 at 18:02
either you make sure that the image instances for image view remain same and use wrap content(which is generally used when images are inflated from drawables by making diffrent image sizes according to screen size) but if the case is you cannot make sure that image size will be same than use relativelayout either way if it's 30 constraint layout you need to make multiple changes – Akhil Saraswat Jun 11 '17 at 18:12

Constraint layout doesn't fit on different devices

2 Answers2