I am having trouble using a ConstraintLayout within a ConstraintLayout to equally space out 5 buttons at the bottom of my app. Currently, I am able to space all buttons equally except for the leftmost button:
shown here. I understand a LinearLayout would also function for this purpose, but I would like to use a ConstraintLayout if possible. My activity XML is shown below:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<ImageButton
android:id="#+id/back_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/back_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/forward_arrow"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/forward_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/forward_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/refresh"
app:layout_constraintStart_toEndOf="#id/back_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/refresh"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/refresh_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/stop"
app:layout_constraintStart_toEndOf="#id/forward_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/stop"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/stop_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/home"
app:layout_constraintStart_toEndOf="#id/refresh"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/home"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/home_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/stop"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="#+id/linear1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="2"
app:layout_constraintBottom_toTopOf="#+id/layout2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<RelativeLayout
android:id="#+id/url_go_progressbar_relLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/web_address_edit_text"
android:layout_width="200dp"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_toLeftOf="#+id/go_button"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Enter URL"
android:importantForAutofill="noExcludeDescendants"
android:inputType="textWebEditText"
android:textSize="13sp" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/web_address_edit_text"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="4dp"
android:text="#string/go_button" />
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/web_address_edit_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.4">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to Android Development so I don't have much experience, if there are any other bad practices you notice while looking at my XML, please let me know.
(Also if possible, I am interested in knowing if there is a way to make the navbar use a specific percent of the screen rather than a static dp as I have assigned it.)
Thank you!
I notice you're already using chains.
Hence, all you need to do is to change all your ImageButton's width to 0dp. This seems counter-intuitive but it will cause all buttons to match the constraints set, hence all buttons would have equal width.
e.g.
android:layout_width="wrap_content"
must be changed to
android:layout_width="0dp"
Thanks!
Here is your answer with more clarification using a ConstraintLayout
https://constraintlayout.com/basics/create_chains.html
use guidelines at equal distance and constraint your button to it you will need to add 3 vertical guidelines for equal spacing of your button
know more about it
https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline
<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">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.
There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.
You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews
For some strange reason, the TextViews in my ConstraintLayout won't budge to show all text and it appears to go over the screen's boundaries. I already tried using app:layout_constrainedWidth="true" with android:layout_width="wrap_content" but that didn't have any effect in changing the positioning, leading me to think what would happen to the '1C' and '1D' text views when I add longer text in those.
Current result
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:cardUseCompatPadding="true"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutA"
android:padding="12dp"
android:foreground="?android:attr/selectableItemBackground">
<!--Constraint 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayoutTitle"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/ibA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ibA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--Constraint 2-->
<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:id="#+id/constraintLayout">
<ImageView
android:id="#+id/ivA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/ivA"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:id="#+id/tvC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#+id/tvD"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/tvB"
style="#android:style/TextAppearance.Medium"/>
<ImageView
android:id="#+id/ivD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/ivA"
app:layout_constraintStart_toStartOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/tvD"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivD"
app:layout_constraintTop_toBottomOf="#+id/tvC"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Suraj Vaishnav's suggestion
Because there is no constraint from the right(or end) side, add this app:layout_constraintEnd_toEndOf="parent" to tvA,tvB and so on.
Update:
apply both constraints: start and end and set the width 0dp. here are the working properties for tvB:
<TextView
android:id="#+id/tvB"
app:layout_constraintStart_toEndOf="#+id/ivA"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
...
I guess you can do the same things for tvC & tvD, let me know if you face any issue.
I already searched but I didn't find anything useful for me.
Im developing a simple android app. The problem that I have is that contents in the layout go behind the default bottom navigation bar of a specific mobile phone.
So I have tried two smartphones, in the first the layout was as intended, and it is how it appears Image1
In the second smartphone the button is not visible and goes behind the bottom navigation bar (which is not in our code, is the default bar of the smartphone).
After changing the layout to make it fit into the second smartphone, it looks like that in the first one Image2
Which is not what I need.
How do I solve this problem so that I can see the app in every smartphone like the image.1?
This is the fragment.
<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/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".profile.Profile_photo_frag">
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/_45sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/add_photo"
android:layout_above="#id/add_photo"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp">
</GridView>
<Button
android:id="#+id/add_photo"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
app:layout_constraintTop_toBottomOf="#id/gridView"
android:layout_marginBottom="#dimen/_1sdp"
android:text="Upload image" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT:
This is the root layout of the tab fragments
<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:fitsSystemWindows="true">
<ImageView
android:id="#+id/profile_image"
android:layout_width="149dp"
android:layout_height="141dp"
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"
app:srcCompat="#drawable/add_img" />
<TextView
android:id="#+id/user_country"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="68dp"
android:text="Altro"
app:layout_constraintStart_toStartOf="#+id/user_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="17dp"
android:layout_marginBottom="695dp"
android:text="Nome"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/user_mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="96dp"
android:text="Mail"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/user_country"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/edit_profile"
android:layout_width="57dp"
android:layout_height="52dp"
android:layout_marginTop="36dp"
android:layout_marginBottom="643dp"
android:background="#00F3F3F3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/user_country"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/ic_edit_black_24dp" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="220dp"
android:background="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="149dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/but_p_profile"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_travel" />
<ImageButton
android:id="#+id/but_p_photo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_pictures" />
<ImageButton
android:id="#+id/but_p-posts"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_ads" />
<ImageButton
android:id="#+id/imageButton16"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_commerce" />
</LinearLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="61dp"
android:layout_marginTop="149dp"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#9C27B0"
app:tabMode="fixed"
android:fitsSystemWindows="true">
<com.google.android.material.tabs.TabItem
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/fourth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:fitsSystemWindows="true"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="509dp"
android:layout_marginTop="220dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>
Certainly its the issue with your view pager height and top margin. You should not set static margin and height rather align the top of your view pager to bottom of your last view in your top view hierarchy.
Inside your constraintLayout add LinearLayout then set your UI, but not used margin to put static value. You can use weight to manage your block. Need some help follow link and more examples available in stack overflow.
I hope it'll help you !
I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.
I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?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">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is my layout.
I set max and min height on the linear layout but max height seems not to be working. In fact if TextView R.id.testo has a lot of text this won't be trimmed. This doesn't happen if I set fixed height. But I didn't want to set a fixed height in order to make it correctly resizable when for instance spilt screen mode is selected.
<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=".WidgetSettingsActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="?attr/popupThemeToolbar"
app:title=""
app:titleTextAppearance="#style/ToolbarTitle" />
<LinearLayout
android:id="#+id/card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginEnd="55dp"
android:background="#drawable/widget_background"
android:clickable="false"
android:maxHeight="400dp"
android:minHeight="400dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/titolo"
style="#style/Base.TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:drawableEnd="#drawable/ic_if_settings_1540178"
android:ellipsize="end"
android:fontFamily="#font/encodesanscondensed_medium"
android:hint="#string/no_title"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
tools:text="Title" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingStart="#dimen/fab_margin"
android:paddingTop="4dp"
android:paddingEnd="#dimen/fab_margin"
android:paddingBottom="4dp">
<TextView
android:id="#+id/testo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/encodesanscondensed_regular"
android:hint="#string/no_text"
android:textColor="?android:attr/editTextColor"
android:textSize="18sp"
tools:text="Text multiple rows" />
<TextView
android:id="#+id/last_modified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginTop="24dp"
android:fontFamily="#font/encodesanscondensed_regular"
android:gravity="end|bottom"
android:textSize="12sp"
tools:text="#string/last_modified_s" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginEnd="35dp"
android:layout_marginBottom="8dp"
android:gravity="bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/card"
app:layout_constraintVertical_bias="0.905">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="13dp"
android:layout_marginBottom="#dimen/margin_16"
android:fontFamily="#font/encodesanscondensed_medium"
android:text="#string/background_transparency"
android:textAllCaps="true"
android:textColor="#color/colorPrimary"
android:textSize="13sp" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="255"
android:min="0"
android:progressBackgroundTint="#color/white_opacity" />
</LinearLayout>
As your parent view is ConstraintLayout.
I have also implemented the max and min and for me
Replace these lines
android:maxHeight="400dp"
android:minHeight="400dp"
with
app:layout_constraintHeight_max="400dp"
app:layout_constraintHeight_min="400dp"
app:layout_constrainedHeight="true"
This code working fine. I hope it also works for you.
You have used for your LinearLayout within Constraint layout
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
End_toEndOf set to parent
Start_toStartOf is set to parent
And thats the reason maxHeight is not working.