I know that there is questions like this on this site but can't apply their solutions on my problem, or simply do not know how. I am trying to make my ConstraintLayout that is part of my layout to be placed on end of my progress,like this:
but in my case it is always on center of progressbar
my xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/seekBar2"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:progress="60"
android:progressDrawable="#drawable/customprogressbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/goal_name_TV" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tv_content_rounded"
android:paddingStart="8dp"
android:paddingTop="2dp"
android:paddingEnd="8dp"
android:paddingBottom="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/goal_name_TV">
<ImageView
android:id="#+id/bullet_IMG"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingEnd="2dp"
android:src="#drawable/ic_bulet_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/marker_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/marker_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="985"
android:textColor="#color/background"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bullet_IMG"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
and my java:
binding.seekBar2.setProgress((int) modelClass.getPercentage());
binding.markerValue.setText(binding.seekBar2.getProgress()+"%");
int position = (((binding.seekBar2.getRight() - binding.seekBar2.getLeft()/binding.seekBar2.getMax()) * binding.seekBar2.getProgress())+ binding.seekBar2.getLeft());
binding.thumb.setTranslationX((float) ((double)position - (binding.thumb.getWidth()/2)));
also i tried to make custom progrssbar but in vain
Related
I could not build my project due to this xml code, but cannot figure out where exactly lays the problem. I first used scrollView, I did delete it, and used ListView instead. Since then could not run my project.
the error I am getting is this:
ParseError at [row,col]:[118,54]
Message: http://www.w3.org/TR/1999/REC-xml-names-19990114#AttributeNSNotUnique?ListView&layout_width&http://schemas.android.com/apk/res/android*
here is the code
<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:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:anddroid="http://schemas.android.com/apk/res/android"
android:background="#FFFCEC">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0BA811"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="48dp"
android:layout_weight="1"
android:orientation="vertical"
android:layoutDirection="rtl"
app:layout_constraintBottom_toBottomOf="#+id/tab_layout" />
<TextView
android:id="#+id/textView2"
android:layout_width="310dp"
android:layout_height="49dp"
android:text="Here where your friends are!"
android:textColor="#127A00"
android:textSize="24sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.832" />
<TextView
android:id="#+id/textView4"
android:layout_width="270dp"
android:layout_height="88dp"
android:text="theFinder"
android:textColor="#127A00"
android:textSize="60sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.729" />
<Button
android:id="#+id/btnscan"
android:layout_width="408dp"
android:layout_height="75dp"
android:backgroundTint="#127A00"
android:text="press to Scan"
android:textColor="#EDFFFFFF"
android:textColorHighlight="#FFFFFFFF"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.996" />
<ProgressBar
android:id="#+id/pBar"
style="#android:style/Widget.ProgressBar.Large"
android:layout_width="113dp"
android:layout_height="77dp"
android:indeterminate="true"
android:indeterminateOnly="true"
android:max="100"
android:progress="10"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.578" />
<TextView
android:id="#+id/tView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#1E7822"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.566" />
<ListView
android:id="#+id/lst_view"
anddroid:layout_width="409dp"
android:layout_width="396dp"
anddroid:layout_height="328dp"
android:layout_height="244dp"
android:background="#D80E1127"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.141" />```
Your root element specifies two aliases for the same namespace:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:anddroid="http://schemas.android.com/apk/res/android"
Then in the ListView with an ID of #+id/lst_view you specify layout_height and layout_width twice, once with each alias:
anddroid:layout_width="409dp"
android:layout_width="396dp"
anddroid:layout_height="328dp"
android:layout_height="244dp"
That means you're specifying the same namespace-qualified attribute twice for each of width and height. That's not allowed.
Just remove the anddroid typo-alias, and remove the two attributes using it.
Ive got problem with my single item activity, in my activity design everything looks good image in design tab,but when I run the app image gets bigger in app image in the app
Code for whole xml layout
<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:layout_width="match_parent"
android:layout_height="175dp">
<ImageView
android:id="#+id/container_org"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/screen_background_light_transparent"
app:tint="#color/grey" />
<ImageView
android:id="#+id/item_org_logo"
android:layout_width="110dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.48"
app:srcCompat="#drawable/eu" />
<TextView
android:id="#+id/item_org_description"
android:layout_width="250dp"
android:layout_height="85dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/eu_long_desc"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintTop_toBottomOf="#+id/item_org_title" />
<TextView
android:id="#+id/item_org_title"
android:layout_width="249dp"
android:layout_height="38dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/eu2"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintTop_toTopOf="#+id/container_org" />
</androidx.constraintlayout.widget.ConstraintLayout>
It's because of the conflict between
app:layout_constraintVertical_bias="0.48"
and explicitly declared width:
android:layout_width="110dp"
You either have to remove bias attribute or change width attribute to wrap_content or 0dp. I would recommend this edition:
<?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:layout_width="match_parent"
android:layout_height="175dp">
<ImageView
android:id="#+id/container_org"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/screen_background_light_transparent"
app:tint="#color/grey" />
<ImageView
android:id="#+id/item_org_logo"
android:layout_width="110dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/eu" />
<TextView
android:id="#+id/item_org_description"
android:layout_width="0dp"
android:layout_height="85dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/eu_long_desc"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_org_title" />
<TextView
android:id="#+id/item_org_title"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/eu2"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/container_org" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to convert my relative layout into a Constraint layout to fit every device, but I'm having some problems. On the editor in Android Studio it looks like this:
I made it using a Pixel C as emulator. Now, I tried the app on a Samsung Galaxy tab and this is the result:
Why the buttons are not at center at the screen like in the first picture? This is the code of the xml, as you can see I've even anchored the element to keep the distance between them:
<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:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_main"
android:scaleType="centerCrop"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="708dp"
android:layout_height="231dp"
android:layout_marginTop="152dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/kotta_one"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.57"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.195" />
<Button
android:id="#+id/button_1"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="76dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_2"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_3"
android:layout_width="161dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:fontFamily="#font/kotta_one"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You are giving wrong width and height to button and textview.
Also, for horizontal button and same width and height you can use chain like below I used.
Here, I give you approx design and also you can use your ConstraintLayout because I have androidx migrated project.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/add_news_feed_bg"
android:scaleType="centerCrop">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/bg_toolbar"
android:text="invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="#+id/button_2"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button_2" />
<Button
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#color/bg_toolbar"
android:text="invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_1"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Button
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Android studio doesn't show any buttons or textview in GridLayout, but when I put it in constraint layout it shows up properly and it even works fine when I run the app in the emulator:
Here's the Screen Shot:
This is how the xml file looks:
<?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=".MainActivity">
<android.support.v7.widget.GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</android.support.v7.widget.GridLayout>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="514dp"
android:layout_marginEnd="291dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="291dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
And I am getting this error:
Error screenshot
Thanks for helping!
just remove the <android.support.v7.widget.GridLayout> or <androidx.gridlayout.widget.GridLayout> tag instead with <GridLayout>
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</GridLayout>
I'm trying to place my views into ConstraintLayout, but every views like button/textview look different in real device than in AndroidStudio.
Check how its look:
in Android Studio
in real Device
It's looks horrible ! How I can fix that ? What I should do ?
I thought it was the easiest way to arrange views.
and 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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
The idea of ConstraintLayout is to use constraints to position views relative to each other. In your case you try to constrain each view in relation to the parent and then use bias to position the view which is the reason everything seems out of order.
Here is the simple example XML that will give you a basic idea how to position these views using constraints:
<?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=".activity.LoginActivity">
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etLogin" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="#id/btnDefault"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
<Button
android:id="#+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toEndOf="#id/btnLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
</android.support.constraint.ConstraintLayout>
The result:
If you want to add some spacing between the views you can experiment with adding some margins between them.
I haven't checked this for syntax, but something like this might work better (tying things to each other, rather than to the screen edges).
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="#+id/etPassword"
app:layout_constraintStart_toEndOf="#+id/btnDefault"
app:layout_constraintTop_toBottomOf="#+id/etPassword"/>
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/etLogin"
app:layout_constraintStart_toStartOf="#+id/etLogin"
app:layout_constraintTop_toBottomOf="#+id/etLogin" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="#+id/etPassword"
app:layout_constraintEnd_toStartOf="#+id/btnLogin"
app:layout_constraintTop_toBottomOf="#+id/etPassword" />
</android.support.constraint.ConstraintLayout>