Adjust view height to remove extra spaces in a constraint layout - android

Here, is how my screen looks like
Login screen
I want to remove extra spaces between the submit button and the bottom of the screen.
I researched about this issue in SO. But exactly no one answers it as far I have looked.
Can you suggest some ways to do so?
I have attached the XML layout below for reference.
Login layout
<?xml version="1.0" encoding="utf-8"?>
<layout>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
tools:context=".MainActivity">
<View
android:id="#+id/view_form"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.50"
android:layout_marginTop="#dimen/marginTopLogin"
android:background="#drawable/round_cornered_top_white_bg_drawable"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:autofillHints="name"
android:hint="Username"
android:imeOptions="actionNext"
android:inputType="text"
android:maxLines="1"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="#id/view_form"
app:layout_constraintStart_toStartOf="#id/view_form"
app:layout_constraintTop_toTopOf="#+id/view_form" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:autofillHints="password"
android:hint="Password"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:maxLines="1"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="#id/view_form"
app:layout_constraintStart_toStartOf="#id/view_form"
app:layout_constraintTop_toBottomOf="#+id/etUsername"/>
<CheckBox
android:id="#+id/imgTogglePassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp"
android:layout_marginEnd="-5dp"
android:button="#drawable/btn_toggle_password"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="#id/etPassword"
app:layout_constraintEnd_toEndOf="#id/etPassword"
app:layout_constraintTop_toTopOf="#id/etPassword" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="20dp"
android:background="#color/colorAccent"
app:layout_constraintTop_toBottomOf="#id/etPassword"
app:layout_constraintStart_toStartOf="#id/view_form"
app:layout_constraintEnd_toEndOf="#id/view_form"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

try it
<layout>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
tools:context=".MainActivity">
<View
android:id="#+id/view_form"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/marginTopLogin"
android:background="#drawable/round_cornered_top_white_bg_drawable"
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_weight="0.50" />
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:autofillHints="name"
android:hint="Username"
android:imeOptions="actionNext"
android:inputType="text"
android:maxLines="1"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="#id/view_form"
app:layout_constraintStart_toStartOf="#id/view_form"
app:layout_constraintTop_toTopOf="#+id/view_form" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:autofillHints="password"
android:hint="Password"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:maxLines="1"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="#id/view_form"
app:layout_constraintStart_toStartOf="#id/view_form"
app:layout_constraintTop_toBottomOf="#+id/etUsername" />
<CheckBox
android:id="#+id/imgTogglePassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp"
android:layout_marginEnd="-5dp"
android:button="#drawable/btn_toggle_password"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="#id/etPassword"
app:layout_constraintEnd_toEndOf="#id/etPassword"
app:layout_constraintTop_toTopOf="#id/etPassword" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="Submit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Related

"Add Contact" activity.xml file is not correctly formatted in Android Studio

I was watching this video to try and make a new activity that lets me add new contacts (the code appears right before 3:54): https://www.youtube.com/watch?v=jjL4R-aiwPE.
After looking into the code and changing suggested fixes and even including some things that I left out, it still won't work correctly, whether it's the same exact code or not.
Can someone help me find the error?
Here's the code and an image of my output and the expected output:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Add_Contact">
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:autofillHints=""/>
<EditText
android:id="#+id/etEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etName"
android:autofillHints="" />
<EditText
android:id="#+id/etPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/phone"
android:inputType="phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etEmail"
android:autofillHints="" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/add_contact"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etPhone" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output:
Expected Output:
try this
<?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=".Add_Contact">
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etName" />
<EditText
android:id="#+id/etPhone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/phone"
android:inputType="phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etEmail" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/add_contact"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etPhone" />
</androidx.constraintlayout.widget.ConstraintLayout>

Bottom of one layout in the middle of another layout vertically in android xml?

I want to create the below layout, but not sure how to do it.
height of both blue layout and white layout is set to "wrap_content" and therefor they don't have a constant height.
The point is, I want the bottom of blue layout to always be in the middle of white layout(vertically). I have no idea how to do it using constraint or relative layout.
I searched but couldn't find any solution to this problem.
modify this accordingly
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/credentials_card"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:padding="#dimen/spacing_mlarge"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_logo">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:visibility="visible"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="6dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/spacing_xmlarge">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="25dp"
android:fontFamily="#string/font_family_light"
android:text="L O G I N"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MOBILE"
android:textAlignment="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Caption"
android:textColor="#color/colorPrimary" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/mobileNumberET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="10"
android:maxLines="1"
android:singleLine="true"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="PASSWORD"
android:textAlignment="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Caption"
android:textColor="#color/colorPrimary" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/passwordET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLength="50"
android:maxLines="1"
android:singleLine="true"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/loginButton"
android:layout_width="match_parent"
android:layout_height="57dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#drawable/button_round"
android:text="L O G I N"
android:fontFamily="#string/font_family_light"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/credentials_card"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can try this (I don't include border radius so take care of it..)
<androidx.constraintlayout.widget.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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#8F2A2A"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:layout_marginTop="200dp"
android:background="#B8C159"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here My Ans check
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="#dimen/dp_16"
android:layout_marginRight="#dimen/dp_16"
app:cardBackgroundColor="#color/blue"
app:cardCornerRadius="#dimen/dp_10"
app:cardElevation="#dimen/dp_5"
app:cardUseCompatPadding="true"
android:id="#+id/card_container"
app:layout_constraintBottom_toBottomOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.42" />
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="100dp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/dp_10"
app:cardElevation="#dimen/dp_5"
app:cardUseCompatPadding="true"
android:layout_marginStart="#dimen/dp_20"
android:layout_marginEnd="#dimen/dp_20"
app:layout_constraintStart_toStartOf="#id/card_container"
app:layout_constraintEnd_toEndOf="#id/card_container"
app:layout_constraintTop_toTopOf="#id/guideline"
app:layout_constraintBottom_toTopOf="#id/guideline">
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Use constraint layout as parent and then constraint the topOfSmallComponent to the bottomOfBigComponent. Then again constraint the bottomOfSmallComponent to the bottomOf BigComponent.
Example code below:
app:layout_constraintTop_toBottomOf="your_blue_items_id"
app:layout_constraintBottom_toBottomOf="your_blue_items_id"

When using chain in ConstraintLayout an blank space appears on top and bottom

I am using ConstraintLayout in fragment.
When I create vertical chain with my views a blank spaces appear on top and bottom.
Without chain there is no blank spaces.
I am using:
com.google.android.material:material:1.1.0
androidx.constraintlayout:constraintlayout:2.0.0-beta5
Here is my layout of fragment is:
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".login.screens.login.LoginFragment"
>
<LinearLayout
android:id="#+id/tv_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_ellipse_h284_w360"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/til_phone_number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome User!" />
</LinearLayout>
<EditText
android:id="#+id/til_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_title"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="Phone number"
android:inputType="phone"
app:layout_constraintBottom_toTopOf="#+id/til_password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title" />
<EditText
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_title"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#+id/tv_forgot_password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/til_phone_number"
app:passwordToggleEnabled="true" />
<TextView
android:id="#+id/tv_forgot_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/til_password"
android:padding="10dp"
android:paddingStart="30dp"
android:text="Forgot password"
android:textAlignment="textStart"
android:textColor="#color/text_blue"
app:layout_constraintBottom_toTopOf="#+id/btn_login"
app:layout_constraintTop_toBottomOf="#+id/til_password"
tools:layout_editor_absoluteX="24dp" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_forgot_password"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Login"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/btn_pin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_forgot_password" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_pin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/iv_phone"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Use pin"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/view_center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/iv_phone"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Sign up"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/iv_phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_center" />
<TextView
android:id="#+id/view_center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/or"
android:textAlignment="center"
android:textColor="#color/filter_black1"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/btn_signup"
app:layout_constraintTop_toBottomOf="#+id/btn_pin" />
<TextView
android:id="#+id/iv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:src="#drawable/phone_2"
android:text="v1.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Activity layout is:
<merge 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"
tools:context=".login.screens.login.LoginActivity">
<fragment
android:id="#+id/myNavHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="#navigation/navigation"
app:defaultNavHost="true"
/>
</merge>
Why blank space appears? How do I get rid of it?
If you not define layout_constraintVertical_chainStyle default is Spread if you want to remove top and bottom space you can define it to app:layout_constraintVertical_chainStyle="spread_inside" more detail you check here

Why is the edit text, password box and log in button not visible on emulator

My code looks good in the activity_main.xml but in the emulator, it lacks the email and password boxes along with the login button. Same happens when run on physical device as well. The screen looks as if there is just a logo and a gray background. This is my first time developing an app so the cause might be even really basic.
This is my xml code right now :
<?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/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A7A5A4"
tools:context=".MainActivity">
<EditText
android:id="#+id/email"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:autofillHints="username"
android:background="#drawable/rounded_text"
android:ems="10"
android:inputType="textEmailAddress"
android:lineSpacingExtra="8sp"
android:paddingLeft="15dp"
android:paddingTop="10dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.625"
tools:ignore="LabelFor"
tools:targetApi="o"
tools:text="#string/email" />
<EditText
android:id="#+id/password"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:autofillHints="password"
android:background="#drawable/rounded_text"
android:ems="10"
android:inputType="textPassword"
android:paddingLeft="15dp"
android:paddingTop="10dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email"
app:layout_constraintVertical_bias="0.056"
tools:ignore="LabelFor"
tools:targetApi="o"
tools:text="#string/password" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="0.116" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="410dp"
android:layout_height="309dp"
android:contentDescription="#string/id"
app:srcCompat="#drawable/fulllogo" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The constraints don't seem to be set up correctly. First of all the email has top and bottom of parent, and the rest all go to the bottom of parent. Then the linear layout doesn't have any constraints at all and it's size is set to match_parent, so that is why it is taking up the entire screen, it is also unnecessary to have the linearlayout. Try removing it the linear layout, then putting these constraints in each one with Top_toBottomOf the view before it, and Bottom_toTopOf the one after it, kinda like this.
<?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/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A7A5A4"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="410dp"
android:layout_height="309dp"
android:contentDescription="#string/id"
app:srcCompat="#drawable/fulllogo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/email"/>
<EditText
android:id="#+id/email"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:autofillHints="username"
android:background="#drawable/rounded_text"
android:ems="10"
android:inputType="textEmailAddress"
android:lineSpacingExtra="8sp"
android:paddingLeft="15dp"
android:paddingTop="10dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/password"
tools:ignore="LabelFor"
tools:targetApi="o"
tools:text="#string/email" />
<EditText
android:id="#+id/password"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:autofillHints="password"
android:background="#drawable/rounded_text"
android:ems="10"
android:inputType="textPassword"
android:paddingLeft="15dp"
android:paddingTop="10dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
app:layout_constraintTop_toBottomOf="#+id/email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button"
tools:ignore="LabelFor"
tools:targetApi="o"
tools:text="#string/password" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you want more space betweewn specific views use android:layout_marginTop="10dp" and/or marginBottom
My kind information to you. Please must avoid the drag and drop the widgets to the Design pane. It causes multiple unwanted errors while running an app. Just write the design code in text pane, this will help you to learn new things while writing the code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:background="#A7A5A4"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/id"
android:src="#drawable/ic_launcher_background" />
<EditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_text"
android:inputType="textEmailAddress"
android:padding="15dp"
android:layout_marginBottom="20dp"
android:layout_centerVertical="true"
android:hint="#string/email" />
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_text"
android:inputType="textPassword"
android:padding="15dp"
tools:text="#string/password"
android:layout_marginBottom="20dp"
android:layout_below="#id/email"/>
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#id/password"
android:text="#string/Button"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
I hope this is will help you in some way.

Why does my ScrollView in my ConstraintLayout keep having no height instead of following the constraints?

I am having issues with my ScrollView having no height in my fragment. I'm adding views to my LinearLayout nested in my ScrollView.
If I set the height of the ScrollView to 0dp then I don't see the views in my LinearLayout.
If I set the height of the ScrollView to 410dp then I see the views.
I am just trying to fill up the bottom part of the screen.
What am I missing?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<TextView
android:id="#+id/seriesTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/seriesTitleEditBox"
android:text="Series Title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:id="#+id/seriesTitleEditBox"
android:layout_width="390dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleTextView"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleTextView"
/>
<TextView
android:id="#+id/tvmdIDTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/tvmdIDEditBox"
android:text="TVMD ID"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleEditBox"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleEditBox"
/>
<EditText
android:id="#+id/tvmdIDEditBox"
android:layout_width="200dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/tvmdIDTextView"
app:layout_constraintTop_toBottomOf="#+id/tvmdIDTextView"
/>
<Switch
android:id="#+id/finishedSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tvmdIDTextView"
app:layout_constraintRight_toRightOf="parent"
android:text="Finished? "/>
<TextView
android:id="#+id/detailsHeaderBackgroundTextView"
android:text=" "
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="#color/colorPrimary"
app:layout_constraintTop_toBottomOf="#+id/finishedSwitch"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<TextView
android:id="#+id/detailHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:background="#color/colorPrimary"
android:text="Season 99"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView"
/>
<ImageButton
android:id="#+id/addViewing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:contentDescription="Add Button"
android:onClick="addViewingClickHandler"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintRight_toRightOf="#id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView"/>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintBottom_toBottomOf="parent"
>
<LinearLayout
android:id="#+id/detailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
/>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Just change your scrollview to like below
<?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">
<TextView
android:id="#+id/seriesTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/seriesTitleEditBox"
android:text="Series Title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/seriesTitleEditBox"
android:layout_width="390dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleTextView"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleTextView" />
<TextView
android:id="#+id/tvmdIDTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/tvmdIDEditBox"
android:text="TVMD ID"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleEditBox"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleEditBox" />
<EditText
android:id="#+id/tvmdIDEditBox"
android:layout_width="200dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/tvmdIDTextView"
app:layout_constraintTop_toBottomOf="#+id/tvmdIDTextView" />
<Switch
android:id="#+id/finishedSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Finished? "
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvmdIDTextView" />
<TextView
android:id="#+id/detailsHeaderBackgroundTextView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="#color/colorPrimary"
android:text=" "
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/finishedSwitch" />
<TextView
android:id="#+id/detailHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:background="#color/colorPrimary"
android:text="Season 99"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView" />
<ImageButton
android:id="#+id/addViewing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:contentDescription="Add Button"
android:onClick="addViewingClickHandler"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintRight_toRightOf="#id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailsHeaderBackgroundTextView">
<LinearLayout
android:id="#+id/detailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--SAMPLE TEXTVIEW-->
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello" />
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
The issue came from a parent layout having the height set to wrap_content, instead of match_parent.

Categories

Resources