I've added a LinearLayout which include a FAB and text to my XML.
the height and width of the LinearLayout were set to 'wrap_content', but for some reason in the Design tab of the XML the box of the LinearLayout seems to have a larger and unnecessary height. How can I make the LinearLayout be at about the same height as the FAB and the text?
Thanks
here is the XML code:
<?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="corp.blayzer.randomit.MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="186dp"
android:background="#color/mainBackGroundHalf1"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/minVal_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="#+id/linearLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout">
<EditText
android:id="#+id/minVal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:backgroundTint="#color/inputText"
android:ems="10"
android:hint="#string/minValue"
android:inputType="number"
android:selectAllOnFocus="false"
android:singleLine="true"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColorHint="#color/inputText"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/maxVal_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="#+id/linearLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/minVal_layout">
<EditText
android:id="#+id/maxVal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="16dp"
android:backgroundTint="#color/inputText"
android:ems="10"
android:hint="#string/maxValue"
android:inputType="number"
android:selectAllOnFocus="false"
android:singleLine="true"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textNumView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:lineSpacingExtra="8sp"
android:text="#string/instructionsMainAct"
android:textAppearance="#android:style/TextAppearance"
android:textColor="#android:color/holo_red_light"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_chainStyle="packed" />
<LinearLayout
android:id="#+id/layOutBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textNumView">
<android.support.design.widget.FloatingActionButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="252dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_weight="0"
android:clickable="true"
android:focusable="true"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textNumView"
app:srcCompat="#drawable/ic_change_history_black_24dp"
tools:text="#string/GoButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="#string/GoButton"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</LinearLayout> </android.support.constraint.ConstraintLayout>
ScreenShot of the layout:
You had a large margin for the fab: android:layout_marginBottom="252dp" which must be removed or changed. Use 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"
tools:context="corp.blayzer.randomit.MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="186dp"
android:background="#color/mainBackGroundHalf1"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/minVal_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="#+id/linearLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout">
<EditText
android:id="#+id/minVal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:backgroundTint="#color/inputText"
android:ems="10"
android:hint="#string/minValue"
android:inputType="number"
android:selectAllOnFocus="false"
android:singleLine="true"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColorHint="#color/inputText"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/maxVal_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="#+id/linearLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/minVal_layout">
<EditText
android:id="#+id/maxVal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="16dp"
android:backgroundTint="#color/inputText"
android:ems="10"
android:hint="#string/maxValue"
android:inputType="number"
android:selectAllOnFocus="false"
android:singleLine="true"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textNumView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:lineSpacingExtra="8sp"
android:text="#string/instructionsMainAct"
android:textAppearance="#android:style/TextAppearance"
android:textColor="#android:color/holo_red_light"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_chainStyle="packed" />
<LinearLayout
android:id="#+id/layOutBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textNumView">
<android.support.design.widget.FloatingActionButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_weight="0"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/ic_change_history_black_24dp"
tools:text="#string/GoButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="#string/GoButton"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
remove this line>>
android:layout_marginBottom="252dp"
from your
< FloatingActionButton >
Remove this
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
And it should work. What you're doing with those constraints is making it stretch to top and bottom.
Related
I'm trying to vertically center a ConstraintLayout in the screen. The ConstraintLayout is the root element of the entire layout of the LoginActivity.
I set the android:layout_gravity to center (as in the code below). It does the job in the Android Studio Design Editor, but when I run the app on the phone the ConstraintLayout is aligned to the top of the screen.
How can I effectively center the ConstraintLayout in the screen? Thanks.
<?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"
android:layout_gravity="center"
tools:context=".activities.LoginActivity">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginTop="50dp"
android:contentDescription="#string/cutitapp_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_cutitapp_logo"
tools:srcCompat="#drawable/ic_cutitapp_logo" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilEmail"
style="#style/CutitApp.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="24dp"
app:endIconMode="clear_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivLogo">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
style="#style/CutitApp.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tilEmail"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="#string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/etEmail"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/tvError"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
android:textColor="?attr/colorError"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tilPassword" />
<Button
android:id="#+id/btnLogin"
style="#style/CutitApp.Button"
android:layout_width="0dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="#string/login"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvError" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnLogin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/not_a_member" />
<Button
android:id="#+id/btnRegister"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/register"
android:textAllCaps="false"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Here you go.
I just added an extra ConstraintLayout
<?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"
android:layout_gravity="center">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginTop="50dp"
android:contentDescription="#string/cutitapp_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_cutitapp_logo"
tools:srcCompat="#drawable/ic_cutitapp_logo" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilEmail"
style="#style/CutitApp.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="24dp"
app:endIconMode="clear_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivLogo">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
style="#style/CutitApp.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tilEmail"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="#string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/etEmail"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/tvError"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
android:textColor="?attr/colorError"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tilPassword" />
<Button
android:id="#+id/btnLogin"
style="#style/CutitApp.Button"
android:layout_width="0dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="#string/login"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvError" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnLogin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/not_a_member" />
<Button
android:id="#+id/btnRegister"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/register"
android:textAllCaps="false"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to put the text in textView_title and textView_subtitle to the center of the screen. May I know what is a good way to do it? I tried android:layout_gravity and android:gravity and they do not work.
Below is the XML file with a constraint layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView_login"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/textView_title"
android:lines="1"
android:ellipsize="end"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
tool:text="textView"/>
<TextView
android:id="#+id/textView_subtitle"
android:lines="1"
android:ellipsize="end"
android:textColor="#color/foodDollarYellow"
android:textSize="12sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title"
app:layout_constraintBottom_toBottomOf="parent"
tool:text="textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tool:ignore="HardcodedText"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Add android:textAlignment="center" to your textViews and make the parent width equal to the screen width:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text1"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text2"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:
If you want to avoid nesting you can achieve this using single layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text1"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text2"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title" />
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView_title"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this:
You can achieve this layout with or without nesting, but it is more recommended to avoid nesting when possible if you are using constaintLayout
Edit
This is the new layout: (I have added 1 Guildeline)
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="#+id/textView_subtitle"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="long longggggggggggggggggggggggggggggggggggggggggg"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/textView_title"
app:layout_constraintTop_toBottomOf="#+id/textView_title" />
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="longggggggggggggggggggggggggggggggggg"
android:textAlignment="center"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Here is how it will look:
Solution 1:
add in your textview:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
hence:
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints" />
Solution 2
use relative layout instead of constraint(im taking about the first constraint layout not second)
then
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relative"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView_login"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/textView_title"
android:lines="1"
android:ellipsize="end"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
/>
<TextView
android:id="#+id/textView_subtitle"
android:lines="1"
android:ellipsize="end"
android:textColor="#color/foodDollarYellow"
android:textSize="12sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_centerHorizontal="true"
tools:ignore="MissingConstraints" />
</RelativeLayout>
android:layout_centerHorizontal="true" this line bring your textview in centretop
hope my answer helped...
I am working on ConstraintLayout, I can adjust the child views, but I can't align the Textview from left to right. Is there any way to align the Textview from left to right?
Here is the code:
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:gravity="left"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
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" />
<TextView
android:id="#+id/lotnumber"
android:gravity="left"
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:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
/>
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="left"
android:layout_marginTop="8dp"
android:background="#color/lot_statusfalse"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
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" />
</android.support.constraint.ConstraintLayout>
I want my textview to be aligned like this. Is there any possible way to
align like this?
You need to remove app:layout_constraintStart_toStartOf="parent" from all your views except first one.because it's will assign your all views in left.
<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/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/sellername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="end"
android:padding="8dp"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.2" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="start"
android:padding="8dp"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:padding="8dp"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>
Remove app:layout_constraintStart_toStartOf="parent" from all views except first one and also add app:layout_constraintStart_toEndOf = "#+id/your_left_views_id" for each view except first one.
like
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
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" />
<TextView
android:id="#+id/lotnumber"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotstatus"
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:background="#color/colorPrimary"
android:gravity="left"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
You are giving to all views
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" this is wrong.
In constraint layout you have to give start,end,top,bottom constraint to related view.
try below code:
<?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:id="#+id/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/color_btn_blue"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/color_charcoal"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/radius_text_blue"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blue_text"
android:padding="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/createddate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#color/file_limit_error"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
</android.support.constraint.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Add constraints (top + bottom or start + end)
Set android:layout_width="0dp" (for start-end relations), or
android:layout_height="0dp" (for top-bottom relations)
Now, your child view has constraints to related parent view and its gravity starts from start (or else, what you defined with android:gravity="" tag).
I am usin Constraint layout . What i want is to have same vetical weight(width) between group1 and group2, and group2 and end of screen.In linear layout i would put one group to vertical linear layout and group2 same to vertical linear layout and put that two layouts in parrent vertical layout and set weight to 1. But how to do that in constraint layout?
Here is sample picture:
So what i want is to have same width space between group1 and group2 and group2 and end of screen.
Like this:
Here is my code:
<?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:id="#+id/constrait"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="47dp"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_weight="4"
tools:context="example.com.constrait.MainActivity">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="24dp" />
<EditText
android:id="#+id/editText6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="#drawable/rounded_border_edittext"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/textView7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText6" />
<EditText
android:id="#+id/editText8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="#drawable/rounded_border_edittext"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
You are probably looking for Chains.
You can look at this blogpost where I took the following snippets from.
Basically you want to chain together your widgets 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 1"
app:layout_constraintRight_toLeftOf="#+id/view2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 2"
app:layout_constraintRight_toLeftOf="#+id/view3"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/view1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
And for your specific use case, you might want to use
app:layout_constraintHorizontal_chainStyle=”spread”
I have modified your code as per the need test this code and see if it works for you:-
<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.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView15"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView16"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView17"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView16"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText13"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText10"
app:layout_constraintTop_toTopOf="#+id/editText10" />
<EditText
android:id="#+id/editText10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText12"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<EditText
android:id="#+id/editText13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText14"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText12"
app:layout_constraintTop_toTopOf="#+id/editText12" />
<EditText
android:id="#+id/editText14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText13"
app:layout_constraintTop_toTopOf="#+id/editText13" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView22"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView22"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView23"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView21"
app:layout_constraintTop_toTopOf="#+id/textView21" />
<TextView
android:id="#+id/textView23"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView25"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView22"
app:layout_constraintTop_toTopOf="#+id/textView22" />
<TextView
android:id="#+id/textView25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/textView23"
app:layout_constraintTop_toTopOf="#+id/textView23" />
<EditText
android:id="#+id/editText15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText16"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView21" />
<EditText
android:id="#+id/editText16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText17"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText15"
app:layout_constraintTop_toTopOf="#+id/editText15" />
<EditText
android:id="#+id/editText17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="#+id/editText18"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText16"
app:layout_constraintTop_toTopOf="#+id/editText15" />
<EditText
android:id="#+id/editText18"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/editText17"
app:layout_constraintTop_toTopOf="#+id/editText15" />
</android.support.constraint.ConstraintLayout>
I have edited layout as per the need. Take a look now. Add edit text background as per your need.
I am using ConstraintLayout for activity:
<?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.site.path.to.AuthenticationActivity">
<EditText
android:id="#+id/login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login"/>
<Button
android:id="#+id/login_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"/>
<FrameLayout
android:visibility="gone"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/default_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
FrameLayout should hide all content of the page when visible. But it hides all content except button. Why the button doesn't hide? How to fix it?
Editted:
Try to set android:stateListAnimator="#null" to the Button/AppCompatButton
In Lollipop (Android 5.0 (API 21)) and above, Buttons have a default elevation which causes them to always draw on top.
<?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">
<ImageView
android:id="#+id/background_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:tint="#80000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:src="#drawable/logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/background_image"
app:layout_constraintVertical_bias="0.049"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="7dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="7dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="sans-serif-light"
android:text="There is More"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/scrollView2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/logo"
app:layout_constraintTop_toTopOf="#+id/logo"
app:layout_constraintVertical_bias="1.0"
tools:ignore="HardcodedText" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintVertical_bias="0.050000012">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_first_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
android:inputType="textPersonName"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone"
android:inputType="phone"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<android.support.v7.widget.AppCompatButton
android:id="#+id/sign_up_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:backgroundTint="#2a98f0"
android:stateListAnimator="#null"
android:elevation="0dp"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:text="Sign up"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollView2"
app:layout_constraintVertical_bias="0.100000024" />
<TextView
android:id="#+id/or_tv"
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:fontFamily="sans-serif-light"
android:gravity="center"
android:text="or\nSign up with social sites"
android:textColor="#color/white"
app:layout_constraintBottom_toTopOf="#+id/imageView6"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="#+id/imageView6"
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:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/or_tv"
app:layout_constraintVertical_bias="0.8"
app:srcCompat="#drawable/ic_google_plus" />
<FrameLayout
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ProgressBar
android:id="#+id/progressBarChild"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>
This worked for me.
The problem is (as #motis10 noted) that Buttons have elevation by default (post Android 5.0), so they are drawn above other things that have no elevation.
If you give the thing you want drawn over the button a higher elevation value, then it will be drawn on top. I used: android:elevation="40dp" just to be safe, but I believe 8dp is the default button elevation.