constraint layout gone wrong, placing textview wrong on device

Question

So i started with android studio, and it hit me in the face with the constraint layout. At first i was ....help... But after it it seemed very nice and after reading a bit, about it i felt i should try out. Now i had done my design and try to run it on my phone and i got a diffrent layout then it should be.

I use a lg5 with android 7.0, also i added a virtual device with the specs of lg5 with both android 7.1/7.0 and that seems to work out right.

I tried looking on google but couldnt find any answers or a hint that could help me. I asked help at the reddit android-dev on discord, but they dont know either, other then i should use relative layout. But i want to know first what i am doing wrong.

could someone help me with what im missing, or did wrong?

the button and fields under "dont have an account yet?"working and are hiding(invisible) like they should be.

edit still hoping someone would see what i did wrong so i can learn for in the future :)

here is my xml:

<?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.cyberdog.mtgcollection.Login">


<EditText
    android:id="@+id/etvLoginNameDCI"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Name/DCI Number"
    android:inputType="textPersonName"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.500"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/etvLoginPassword"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="16dp"
    app:layout_constraintVertical_bias="1.0" />

<EditText
    android:id="@+id/etvLoginPassword"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Password"
    android:inputType="textPassword"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintHorizontal_bias="0.500"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/cbLoginRememberMe" />

<CheckBox
    android:id="@+id/cbLoginRememberMe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false"
    android:text="Remeber me"
    android:textSize="10sp"
    android:layout_marginBottom="45dp"
    app:layout_constraintBottom_toTopOf="@+id/btnLoginLogin"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintHorizontal_bias="0.328" />

<Button
    android:id="@+id/btnLoginLogin"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:text="Log in"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:layout_constraintBottom_creator="1"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    android:layout_marginBottom="89dp"
    app:layout_constraintBottom_toTopOf="@+id/tvRegisterAlreadyRegister" />


<TextView
    android:id="@+id/tvRegisterAlreadyRegister"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:text="Dont have a n account yet?"
    android:textAllCaps="false"
    android:textColor="@android:color/holo_blue_bright"
    android:textSize="18sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/etvRegisterNameDCI" />

<EditText
    android:id="@+id/etvRegisterNameDCI"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="11dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:ems="10"
    android:hint="Name/DCI"
    android:inputType="textPersonName"
    android:visibility="invisible"
    app:layout_constraintBottom_toTopOf="@+id/etvRegisterEmail"
    app:layout_constraintHorizontal_bias="0.503"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<EditText
    android:id="@+id/etvRegisterEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="15dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:ems="10"
    android:hint="Email"
    android:inputType="textEmailAddress"
    android:visibility="invisible"
    app:layout_constraintBottom_toTopOf="@+id/etvRegisterPassword"
    app:layout_constraintHorizontal_bias="0.503"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<EditText
    android:id="@+id/etvRegisterPassword"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="14dp"
    android:ems="10"
    android:hint="Password"
    android:inputType="textPassword"
    android:visibility="invisible"
    app:layout_constraintBottom_toTopOf="@+id/btnRegisterRegister"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent" />

<Button
    android:id="@+id/btnRegisterRegister"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Register"
    android:visibility="invisible"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="42dp" />



</android.support.constraint.ConstraintLayout>

Answer 1

The problem is that you are hiding your views with visibility="invisible" which takes space and pushes your views up out of the screen. Try using visibility="gone".