ConstraintLayout inside ScrollView root not working as expected - android

I have a ConstraintLayout inside a ScrollView which is the root view of my layout. I wanted the ScrollView to kick in scrolling as soon as the height of the device is less than that is required for the layout.
My layout xml is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
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="com.clickagee.babybind.AccountSettingActivity"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_account_title"
style="#style/textXLargePurple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_medium"
android:text="#string/account"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_add_partner"
style="#style/button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:background="#drawable/custom_button_purple_outline"
android:paddingEnd="#dimen/margin_padding_size_medium"
android:paddingStart="#dimen/margin_padding_size_medium"
android:text="#string/add_partner"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#id/tv_account_title"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_account_title" />
<LinearLayout
android:id="#+id/ll_upload_change_photo_pane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_padding_size_large"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/btn_add_partner">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_change_upload_photo"
android:layout_width="130dp"
android:layout_height="130dp"
android:src="#drawable/ic_upload_user_image" />
<TextView
android:id="#+id/tv_upload_change_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/upload_photo" />
</LinearLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/til_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_medium"
app:layout_constraintTop_toBottomOf="#id/ll_upload_change_photo_pane">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name_hint"
android:inputType="textCapWords"
android:lines="1"
android:maxLines="1"
android:singleLine="true"
android:paddingBottom="#dimen/margin_padding_size_medium"/>
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/tv_gender_account_setting"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_small"
android:text="#string/gender"
android:textColor="#color/light_grey"
android:textSize="#dimen/text_size_small"
app:layout_constraintTop_toBottomOf="#id/til_user_name" />
<RadioGroup
android:id="#+id/rg_user_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_small"
android:orientation="horizontal"
android:weightSum="3"
app:layout_constraintTop_toBottomOf="#id/tv_gender_account_setting">
<RadioButton
android:id="#+id/rb_user_male_account_settings"
style="#style/textLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_weight="1"
android:background="#drawable/rbtn_selector"
android:button="#drawable/custom_radio_button_male"
android:padding="#dimen/margin_padding_size_small"
android:paddingEnd="#dimen/margin_padding_size_medium"
android:text="#string/male"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/radio_button_text_colors" />
<RadioButton
android:id="#+id/rb_user_female_account_settings"
style="#style/textLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_weight="1"
android:background="#drawable/rbtn_selector"
android:button="#drawable/custom_radio_button_female"
android:padding="#dimen/margin_padding_size_small"
android:paddingEnd="#dimen/margin_padding_size_medium"
android:text="#string/female"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/radio_button_text_colors" />
<RadioButton
android:id="#+id/rb_user_other_account_settings"
style="#style/textLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rbtn_selector"
android:button="#drawable/custom_radio_button_other"
android:padding="#dimen/margin_padding_size_small"
android:paddingEnd="#dimen/margin_padding_size_medium"
android:text="#string/other"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/radio_button_text_colors" />
</RadioGroup>
<android.support.design.widget.TextInputLayout
android:id="#+id/til_user_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_padding_size_medium"
app:layout_constraintTop_toBottomOf="#id/rg_user_gender">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_user_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:hint="#string/phone_number_hint"
android:inputType="phone"
android:lines="1"
android:maxLines="1"
android:singleLine="true"
android:paddingBottom="#dimen/margin_padding_size_medium"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/til_user_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_medium"
app:layout_constraintTop_toBottomOf="#id/til_user_phone_number">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_user_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/email_hint"
android:inputType="textEmailAddress"
android:lines="1"
android:maxLines="1"
android:singleLine="true"
android:paddingBottom="#dimen/margin_padding_size_medium"/>
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:id="#+id/btn_save_details_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="#dimen/margin_padding_size_large"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/til_user_email">
<br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
android:id="#+id/btn_save_details"
style="#style/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_button"
android:padding="#dimen/margin_padding_size_small"
android:text="#string/save_details"
android:textColor="#color/white"
app:spinning_bar_color="#color/white"
app:spinning_bar_padding="#dimen/spinning_bar_padding"
app:spinning_bar_width="#dimen/spinning_bar_width" />
</LinearLayout>
<Button
android:id="#+id/btn_cancel_account_settings"
style="#style/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="16dp"
android:background="#drawable/custom_button_purple_outline"
android:padding="#dimen/margin_padding_size_small"
android:text="#string/cancel"
android:textColor="#color/colorAccent"
app:layout_constraintTop_toBottomOf="#id/btn_save_details_ll"
android:layout_marginBottom="#dimen/margin_padding_size_small"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
But instead I am getting scroll whether the required height is less or not.
A screenshot of this unusual behavior is
The following should not have happened, Am I missing anything here?:


You're missing a layout_constraintBottom_toBottomOf="parent" to your btn_cancel_account_settings
<Button
android:id="#+id/btn_cancel_account_settings"
style="#style/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_padding_size_medium"
android:layout_marginStart="#dimen/margin_padding_size_medium"
android:layout_marginTop="16dp"
android:background="#drawable/custom_button_purple_outline"
android:padding="#dimen/margin_padding_size_small"
android:text="#string/cancel"
android:textColor="#color/colorAccent"
app:layout_constraintTop_toBottomOf="#id/btn_save_details_ll"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="#dimen/margin_padding_size_small"/>


Change
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


Its because your text input field has default focus. Give up the focus from input text field and add the following property: app:layout_constraintBottom_toBottomOf="parent" to btn_cancel_account_settings.

Related

Trying to set the EditText inside FragmentDialog to be multiline doesn't work

So I'm trying to set the edit text inside dialog to multi-lined but it doesn't do so it only appears in single-line for some reason
and it just keeps going to the right instead of going down(\n).
I set the edit text to multiline and the single line to be false but nothing works
here is the XML code for the dialog:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/item_background_gray"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0"
android:padding="8dp"
app:srcCompat="#drawable/ic_baseline_radio_button_unchecked_24"
app:tint="#66FFFFFF" />
<EditText
android:id="#+id/et_missionText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="2"
android:background="#null"
android:ems="10"
android:gravity="top|left"
android:hint="Add mission"
android:importantForAutofill="no"
android:inputType="textImeMultiLine"
android:lines="8"
android:minHeight="48dp"
android:overScrollMode="always"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:scrollbars="vertical"
android:scrollHorizontally="false"
android:singleLine="false"
android:textColor="#color/white"
android:textColorHint="#B0FFFFFF" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_addMission"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="0"
android:backgroundTint="#color/item_background_gray"
android:clickable="true"
android:contentDescription="#string/app_name"
android:focusable="true"
app:borderWidth="0dp"
app:fabCustomSize="40dp"
app:srcCompat="#drawable/ic_round_arrow_circle_up_24"
app:tint="#color/add_button_background_gray" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you for your help.

I have checked your code and fixed the issue. You only need to remove below line from your code:
android:inputType="textImeMultiLine"
I am also posting edited code below:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/item_background_gray"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0"
android:padding="8dp"
app:srcCompat="#drawable/ic_baseline_radio_button_unchecked_24"
app:tint="#66FFFFFF" />
<EditText
android:id="#+id/et_missionText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="2"
android:background="#null"
android:ems="10"
android:gravity="top|left"
android:hint="Add mission"
android:importantForAutofill="no"
android:lines="8"
android:minHeight="48dp"
android:overScrollMode="always"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:scrollbars="vertical"
android:scrollHorizontally="false"
android:singleLine="false"
android:textColor="#color/white"
android:textColorHint="#B0FFFFFF" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_addMission"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="0"
android:backgroundTint="#color/item_background_gray"
android:clickable="true"
android:contentDescription="#string/app_name"
android:focusable="true"
app:borderWidth="0dp"
app:fabCustomSize="40dp"
app:srcCompat="#drawable/ic_round_arrow_circle_up_24"
app:tint="#color/add_button_background_gray" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Button not visible during scroll view

I have a scroll view wrapping a LinearLayout , i have a button at the end of the layout , the entire layout is visible and scrollable but the button at the end is not visible , it becomes visible if i put it at first or make space for the button without the scroll view.
code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20sp"
android:orientation="horizontal"
android:padding="25sp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25sp"
android:layout_weight="1"
android:fontFamily="#font/roboto_bold"
android:text="TEST"
android:textSize="20sp" />
<ImageView
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="25sp"
android:contentDescription="close"
android:src="#drawable/test" />
</LinearLayout>
<ScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container1">
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="25sp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TEXT"
android:importantForAutofill="no"
android:inputType="text"
android:padding="40sp"
android:textSize="22sp"
android:textStyle="bold" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/blue"
android:text="#string/submit"
android:textColor="#color/white" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried changing to androidx.appcompat.widget.AppCompatButton , use image button but still no avail,
I tried to give hard coded height and width still it's not visible.
After some playing around i just found out that my last child is not visible be it button, text or any other
Any help is appreciated

You just have to add this line of code inside your Button Widget.
android:layout_marginBottom="50dp"
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/blue"
android:text="#string/submit"
android:textColor="#color/white"
android:layout_marginBottom="50dp" // Add this line
/>
This will solve your problem. Thank you.

You just need to change Scrollview code with
<ScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container1">

Constraint layout in Custom Dialog problem

I have such XML file for custom Dialog:
<?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"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?

What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<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"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>

I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?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"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to chain views when guideline is present

I am trying to build an activity which has a guideline in it and I also want to chain elements in the activity.
When I do spread value for app:layout_constraintVertical_chainStyle property, it works fine.
However if I change a value to packed, that's where everything that is attached to a guideline on one side follows the chain and a guideline and the other side does not.
How can I achieve that both sides follows the same rules. On the second image I want a riht side of the guidline to be alliged the same way as the left side
spread
packed
<?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:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/txt_title_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/txt_title"
app:layout_constraintStart_toStartOf="#id/txt_title" />
<EditText
android:id="#+id/txt_title"
style="#style/add_step"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintBottom_toTopOf="#id/txt_description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"/>
<TextView
android:id="#+id/txt_description_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Description"
app:layout_constraintBottom_toTopOf="#id/txt_description"
app:layout_constraintStart_toStartOf="#id/txt_description" />
<EditText
android:id="#id/txt_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/spn_milestone"
app:layout_constraintEnd_toEndOf="#id/txt_title"
app:layout_constraintStart_toStartOf="#id/txt_title"
app:layout_constraintTop_toBottomOf="#id/txt_title" />
<TextView
android:id="#+id/txt_milestone_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select Milestone"
app:layout_constraintBottom_toTopOf="#id/spn_milestone"
app:layout_constraintStart_toStartOf="#id/spn_milestone" />
<Spinner
android:id="#+id/spn_milestone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
app:layout_constraintBottom_toTopOf="#id/txt_start_day"
app:layout_constraintEnd_toEndOf="#id/guideline"
app:layout_constraintStart_toStartOf="#id/txt_description"
app:layout_constraintTop_toBottomOf="#id/txt_description" />
<TextView
android:id="#+id/txt_priority_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Priority"
app:layout_constraintBottom_toTopOf="#id/spn_priority"
app:layout_constraintStart_toStartOf="#id/spn_priority" />
<Spinner
android:id="#+id/spn_priority"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
app:layout_constraintBottom_toTopOf="#id/txt_end_date"
app:layout_constraintEnd_toEndOf="#id/txt_description"
app:layout_constraintStart_toStartOf="#id/guideline"
app:layout_constraintTop_toBottomOf="#id/txt_description" />
<TextView
android:id="#+id/txt_start_date_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start Day"
app:layout_constraintBottom_toTopOf="#id/txt_start_day"
app:layout_constraintStart_toStartOf="#id/txt_start_day" />
<EditText
android:id="#+id/txt_start_day"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/spn_milestone"
app:layout_constraintStart_toStartOf="#id/spn_milestone"
app:layout_constraintTop_toBottomOf="#id/spn_milestone" />
<TextView
android:id="#+id/txt_end_date_label"
style="#style/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="End Date"
app:layout_constraintBottom_toTopOf="#id/txt_end_date"
app:layout_constraintStart_toStartOf="#id/txt_end_date" />
<EditText
android:id="#+id/txt_end_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/spn_priority"
app:layout_constraintStart_toStartOf="#id/spn_priority"
app:layout_constraintTop_toBottomOf="#id/spn_priority" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>

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