This is more like the general information question that I am asking I tried to implement windowSoftinputMode="adjustResize" mode in constraint layout but it doesn't work for it at all I tried to search for a constraint layout example but there is no example available on the internet. The only example I am able to find is with relative layout and when I implemented it worked like a charm so please tell me why it works like that
here is my constraint layout code
<?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="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/fromtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="140dp"
android:fontFamily="#font/nunito_sans_semibold"
android:text="#string/from"
android:textSize="#dimen/_15sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/fromSpinner"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_marginHorizontal="#dimen/_20sdp"
android:entries="#array/weight"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.49"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/fromtext"
app:layout_constraintVertical_bias="0.085" />
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_15sdp"
android:id="#+id/fromvalue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/fromSpinner"
app:layout_constraintVertical_bias="0.0"
tools:layout_editor_absoluteX="13dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:textAlignment="center"
android:textSize="#dimen/_15sdp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/totext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_50sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_gravity="center"
android:text="#string/to"
app:layout_constraintTop_toBottomOf="#+id/fromvalue"
android:textSize="#dimen/_20sdp"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_15sdp"
android:entries="#array/weight"
app:layout_constraintTop_toBottomOf="#+id/totext"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textAlignment="center"
android:id="#+id/toSpinner"/>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/toSpinner"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_margin="#dimen/_15sdp"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tovalue"
android:layout_width="match_parent"
android:focusable="false"
android:textSize="#dimen/_20sdp"
android:textAlignment="center"
android:cursorVisible="false"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
update
Now my app behaves like this
when the keyboard is hidden
when the keyboard is not hidden
i want my screen to be fully resized not just one element
Related
just look how the OTP button seems to not be aligned properly. how do I fix that?
I'm using material UI's outlined textfeild which also has a helper text. That adds to the height of the input layout. hence, this issue. I want the OTP button to be aligned perfectly besides the text field. is there a way to do that other than making the helper text into a textview? I also don't want to use margin on the button to align it because that can cause unexpected changes in different screen sizes. Here's the code -
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/login_card_spacing"
app:cardBackgroundColor="#eeeeee"
app:cardCornerRadius="#dimen/login_card_spacing">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sign_up_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/login_card_spacing"
android:text="SIGN UP"
android:textSize="#dimen/huge_text_size"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/user_name_edit_text"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/login_card_spacing"
android:hint="User Name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/sign_up_label">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/user_password_edit_text"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/login_card_spacing"
android:hint="Set New User Password"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_name_edit_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/user_phone_number_edit_text"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/login_card_spacing"
android:hint="Phone Number"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_password_edit_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/user_otp_edit_text"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/login_card_spacing"
android:layout_marginEnd="#dimen/login_card_spacing"
android:hint="OTP Generated"
app:helperText="Check Message Box For The Entered Phone Number"
app:layout_constraintLeft_toLeftOf="#id/user_name_edit_text"
app:layout_constraintRight_toLeftOf="#id/otp_generator"
app:layout_constraintTop_toBottomOf="#id/user_phone_number_edit_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/otp_generator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="otp"
app:layout_constraintBottom_toBottomOf="#id/user_otp_edit_text"
app:layout_constraintRight_toRightOf="#id/user_name_edit_text"
app:layout_constraintTop_toTopOf="#id/user_otp_edit_text" />
<Button
android:id="#+id/cancel_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/login_card_spacing"
android:layout_marginEnd="#dimen/login_card_spacing"
android:text="cancel"
style="?attr/materialButtonOutlinedStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#id/user_name_edit_text"
app:layout_constraintRight_toLeftOf="#id/register_login"
app:layout_constraintTop_toBottomOf="#id/user_otp_edit_text" />
<Button
android:id="#+id/register_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/login_card_spacing"
android:text="register"
app:layout_constraintBottom_toBottomOf="#id/cancel_login"
app:layout_constraintLeft_toRightOf="#id/cancel_login"
app:layout_constraintRight_toRightOf="#id/user_name_edit_text"
app:layout_constraintTop_toTopOf="#id/cancel_login" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
This layout is part of my learning process. So please don't judge the use of textview for displaying data.
The problem is i am not able to scroll the entire data in the bottom textview. Always 2 sets of data is left behind.
If i have 8 sets,the scrollview will show up to 6 sets. If i have 4 set it will show 2 sets and wont scroll at all. What's the problem with my scrollview?
<?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="wrap_content"
tools:context=".FireStoreNotes">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout2"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/description" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout3"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout2">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_priority"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/priority"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/button_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="#string/add_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_load"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="#string/load_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:paddingBottom="?android:attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_load">
<TextView
android:id="#+id/textView_loadData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is how my layout looks.
Thanks in advance.
Edit ConstraintLayout root layout_height (match_parent instead of wrap_content)
For NestedScrollView :
Replace layout_widthand layout_height values by 0dpfor applying constraints.
Add a bottom constraint with app:layout_constraintBottom_toBottomOf="parent"
i'm trying to achieve something like this
I wanna create TextinputLayout with two end icons , but it doesn't work , the clear end icon show above the search icon ,here is my code :
<FrameLayout
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/searchLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_32dp"
android:gravity="center"
android:hint="#string/search_for_your_product"
app:boxBackgroundMode="none"
app:endIconMode="clear_text"
app:layout_constraintStart_toEndOf="#id/backIcon"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/sh_border_rounded"
android:inputType="text"
android:maxLength="10"
android:maxLines="1"
android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:layout_gravity="end|center_horizontal"
android:src="#drawable/ll_search"
android:layout_width="wrap_content"
android:paddingStart="#dimen/normal_margin"
android:paddingTop="#dimen/normal_margin"
android:paddingEnd="#dimen/normal_margin"
android:layout_height="match_parent"/>
</FrameLayout>
i Used a constraint layout as parent with the background ,
and set the icons at the end of the TextInput .
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/searchLayout"
android:layout_width="match_parent"
android:layout_marginStart="#dimen/margin_32dp"
android:background="#drawable/sh_border_rounded"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/backIcon"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/search"
android:padding="#dimen/margin_8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="#dimen/margin_64dp"
android:inputType="text"
android:maxLength="10"
android:background="#null"
android:maxLines="1"
android:singleLine="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/delete"
android:src="#drawable/ic_cancel"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="wrap_content"
android:paddingEnd="#dimen/margin_8"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="#+id/search" />
<ImageView
android:src="#drawable/ic_search"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/delete" />
</androidx.constraintlayout.widget.ConstraintLayout>
I understand how to use the constraint layout on Android but I have faced this issue for the second time now and wished to know if there is a remedy or it is a bug with it.
I have set all constraints correctly in my layout my preview is revealed as seen on this photo
The corresponding xml is as seen below
<?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/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.auth.PlaceOfDeliveryFragment">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_select_city"
style="#style/ToolbarStyle"
android:layout_width="0dp"
android:layout_height="56dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_chevron_left_white_32dp"
app:title="#string/text_select_delivery_city"
app:titleMarginStart="75dp"
app:titleTextAppearance="#style/ToolbarStyle"
app:titleTextColor="#color/colorTextWhite" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/TextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:hint="#string/city"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/country_spinner">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/city_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
<Spinner
android:id="#+id/country_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:entries="#array/countries"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView"
style="#style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:text="#string/country_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_select_city" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_next"
style="#style/NoInsetsButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/next_txt"
android:textAlignment="textEnd"
app:icon="#drawable/ic_chevron_right_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
But when the app is run, I instead see the button hanging when I constrained it to the bottom of the layout.
I wish to understand if there is anything I am missing and the button hanging.
I am making a login screen where I have 2 EditText and 2 Buttons. I have placed them in vertical way one below each other. But I want to bring all the content at centre in my layout.
Below is my activity_login.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"
android:id="#+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/passwordLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_user"
android:hint="#string/email"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailLayout"
app:layout_constraintBottom_toBottomOf="#+id/logi">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_password"
android:hint="#string/password"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/loginSubmit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordLayout" />
<Button
android:id="#+id/registerText"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/register"
android:theme="#style/RegistrationButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>
Here is the image of the layout:
I am not able to bring those views at the centre.
First make sure you use an up to date version of the ConstraintLayout (at the time of writing 1.0.2). You can achieve vertical centering by giving the top most element (emailLayout) the app:layout_constraintVertical_chainStyle="packed" attribute.
Besides that you need to make sure that all elements are connected like a chain in the code. I.e. the upper most view (emailLayout) is under constraint of the parent on top and under constraint of the next sibling (passwordLayout) on the bottom.
The second view (passwordLayout) needs to be under constraint of the sibling before it at the top (emailLayout) and under constraint of the next sibling (loginSubmit) at the bottom and so on...
The last view (registerText) has a top constraint to the sibling before as well but has a bottom constraint to the bottom of the parent.
Hint: android:orientation="vertical" is useless in a ConstraintLayout. You can leave this out.
EDIT:
Here a minimum code example of vertical centering with the ConstraintLayout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff0000"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/view2"/>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="#+id/view1"
app:layout_constraintBottom_toTopOf="#+id/view3"/>
<View
android:id="#+id/view3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
Resulting in:
I am using packed chaining in my ConstraintLayout. So, yours should be like this:
<?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"
android:id="#+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/passwordLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_user"
android:hint="#string/email"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/emailLayout"
app:layout_constraintBottom_toTopOf="#+id/loginSubmit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_password"
android:hint="#string/password"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/loginSubmit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/login"
app:layout_constraintTop_toBottomOf="#+id/passwordLayout"
app:layout_constraintBottom_toTopOf="#+id/registerText"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<Button
android:id="#+id/registerText"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/register"
android:theme="#style/RegistrationButton"
app:layout_constraintTop_toBottomOf="#+id/loginSubmit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
The resultant layout should be as follows: