Set proper constraint in Constraint Layout in Android Kotlin - android

I am creating a chat application. I used stackFromEnd = false and reverseLayout = true to show items from the bottom of screen. In which I used reyclerview and it's working fine, and I am adding the code below with a screenshot. How it looks likes
<?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"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
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" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above code is working fine when there is a single item in recyclerView it opens a screen like this
Image 1
But when there are more items the screen look like this
Image 2
Note: This above image is my expected output. Also soft keyboard shift the layout.
Now the main story starts, I want to add editText at bottom of the screen.
<?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"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:visibility="gone"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Problem 1
Image 1 is not getting the correct constraint and it looks like this
and image 2 is working fine and the soft keyboard shifts the layout.
problem 2
I tried some code to solve problem 1 and the soft keyboard is not shifting the layout
<?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"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After #Cheticamp suggestion, I added this but not working. It has still a problem 1 issue. It's not resolving.
<?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"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE 1
After #Tenfour04 suggestions, I added some code please have a look. Am I am doing correctly?
<?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"
android:background="#cccccc">
<FrameLayout
android:id="#+id/conversationRecyclerViewViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>


The problem is your RecyclerView's height is wrap_content instead of 0dp (a.k.a. "match_constraints"), so it ignores the constraint that it should be above inputContainer.
So instead of making it wrap_content and using vertical bias to try to keep it at the top of the screen, try wrapping it in a FrameLayout and giving it layout gravity of "top". The FrameLayout should use 0dp for height so it can fill the entire space, but not overlap inputContainer. The RecyclerView can use wrap_content for height, and the layout gravity will bias it to the top of the FrameLayout's space. So replace your RecyclerView element with this:
<FrameLayout
android:id="#+id/recyclerViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="LinearLayoutManager"
app:reverseLayout="true"/>
</FrameLayout>
The app:layout_constraintVertical_bias is meaningless on inputContainer because it has no top constraint, so you can remove that.


For problem #1, make the height and the width of the RecyclerView 0dp and let the constraints size it to fill the screen. Also, remove the vertical bias - you don't need it.
btw, never use match_parent in a ConstraintLayout. Always use 0dp and the constraints.
That may solve all your issues with this layout.
Update: I should have scrolled down in your layout.
I take it that you want the RecyclerView to fill the screen except for the EditText on the bottom. In general, nesting layout within a ConstraintLayout is not needed and is considered by many poor design.
Make the changes I suggest above, remove the inner ConstraintLayout and place the two views into a vertical chain like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/sendMessageEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="This is the EditText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Why title, description goes off the screen and date not showing properly in constrainlayout

I am developing news app and I have implemented constraint layout with card view but title description not showing and title and description goes of the screen in real device but in layout inspector in android studio it is showing fine
below my view
<?xml version="1.0" encoding="utf-8"?>
<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>
<variable
name="article"
type="com.example.newsworldwide.model.Article" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="8dp"
app:cardCornerRadius="12dp"
app:cardElevation="10dp"
app:layout_constraintBottom_toBottomOf="parent"
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="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/articleImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="4dp"
android:elevation="16dp"
android:src="#drawable/img"
app:civ_border_width="2dp"
app:imageUrl="#{article.urlToImage}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="24dp"
android:ellipsize="end"
android:maxLines="2"
android:text="Mini olive pies by Vaggelio"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="#+id/articleImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="6"
android:text="This is the most information savory snack that I have ever seen!!!"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/articleTitle"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<TextView
android:id="#+id/articleDate"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:text="01.02.2022"
android:textColor="#FF9935"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
below my recyclerview layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="491dp"
android:layout_height="826dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot from layout inspector in android studio
following screenshot of the app from real device
I want to know where exactly I am making mistake what I have to do in order to show title description and date so that it can fit screen perfectly

I've made some tweaks to your xml files
RecyclerView layout should look 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your mistake was right here:
android:layout_width="491dp"
android:layout_height="826dp"
putting exact values for layout_width and layout_height is almost never a good idea when trying to build a responsive UI. Instead try using match_parent (matches the screen width) or wrap_content (takes as much space as it needs) in your layout_width/height.
Also I found one more thing wrong with news_item.xml
articleDescription TextView should have this parameter:
app:layout_constraintEnd_toEndOf="#+id/articleTitle"
this parameter will make sure, that your textView end where the parent view ends, means not going out of screen.

I think the tour item not the problem. Check the size of the RecyclerView.

androidx Recycler View match constraint (0dp) with wrap content behaviour

I have simple recycler view here, what I want is:
when list is short: stick the button below the recycler view
when list is long: stick the button bottom of screen yet recycler view is wrapping properly and able to scroll till bottom
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0"
tools:itemCount="50"/>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="example"
android:background="#00ffff"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/rv_user_address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When is wrap_content:
<androidx.recyclerview.widget.RecyclerView
android:layout_height="wrap_content"
...
short-list can stick button below properly but button is off screen when list is long
When is constraint:0dp:
<androidx.recyclerview.widget.RecyclerView
android:layout_height="0dp"
...
long list is correct behavior but short-list not stick button below list
I am out of idea. Thanks for helping.

Just add this line:
app:layout_constrainedHeight="true"
to your Recyclerview as:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
app:layout_constrainedHeight="true" <-- Add this line
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0"
tools:itemCount="50"/>

Try this out. First align button at the end of the layout then add app:layout_constrainedHeight="true" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toTopOf="#id/btn" in our recycler view. This will make your recycler view to cover all the layout except the button which is at the bottom of the layout. Still if you don't anything you can ask me.
<?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"
xmlns:tools="http://schemas.android.com/tools">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="10dp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed"
tools:itemCount="100" />
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#00ffff"
android:gravity="center"
android:orientation="horizontal"
android:text="example"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Change your constraint layout to linear layout.
Add weight-sum to linear layout.
give the desired weights to your recycler view and button.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:weightSum="10">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
...
/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
...
/>
</LinearLayout>
Just make sure the sum of all weights does not exceed your weight-sum.
In the current case. Recycler view will have 90% of parent, while 10% is used by button. Feel free to play around with these number to achieve the desired results.

Android: ScrollView containing two nested ConstraintLayouts, cant fill screen horizontally

I am having an issue with the following 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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
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="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView

I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"

How do I overlap components inside a ConstraintLayout?

I am trying to overlap components inside a constraint layout. I would like to have the bottom of Team One to be on top of the vs container. I was able to align it by using the app:layout_constraintVertical_bias attribute. When the keyboard expands, the component is not responsive. It will push the Team One over the vs past the point of being flush with top of the vs container.
<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/team_divider_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/team_one_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:elevation="2dp"
app:layout_constraintEnd_toStartOf="#id/team_two_name"
app:layout_constraintHorizontal_bias=".3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/select_teams_container">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_gravity="center|end"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_gravity="center|start"
android:id="#+id/team_one_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:focusedByDefault="false"
android:cursorVisible="true"
android:minWidth="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/color_picker_circle"
android:textCursorDrawable="#null"
android:text="#string/start_game"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"/>
<com.madrapps.pikolo.HSLColorPicker
android:id="#+id/team_one_color_picker"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias=".75"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/color_picker_circle"
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="2dp"
app:cardBackgroundColor="#color/color_primary"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintEnd_toEndOf="#id/team_one_color_picker"
app:layout_constraintBottom_toBottomOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="#id/team_one_name"
app:shapeAppearance="#style/ShapeAppearanceOverlay.MyApp.MaterialCardView.Circle"/>
<ImageButton
android:id="#+id/confirm_team_one_color_btn"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/ic_check_circle_black_48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/team_one_color_picker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".25"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/team_two_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:background="#null"
android:cursorVisible="true"
android:focusedByDefault="false"
android:gravity="end"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"
android:textCursorDrawable="#null"
app:layout_constraintBottom_toTopOf="#id/select_teams_container"
app:layout_constraintEnd_toEndOf="#id/select_teams_container"
app:layout_constraintWidth_percent=".25" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/select_teams_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:strokeWidth="2dp"
app:strokeColor="#color/color_primary"
app:shapeAppearance="#style/ShapeAppearance.MaterialComponents.MediumComponent.TeamSelectCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent=".6"
app:layout_constraintHeight_percent=".55">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_one_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_one_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:orientation="vertical"
android:overScrollMode="never"
android:weightSum="5"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/vertical_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="VS"
style="#style/TextAppearance.MyTheme.Headline1"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_two_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_two_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="5"
android:overScrollMode="never"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When I don't use vertical bias:
When I use vertical bias:
When the keyboard is expanded:

I cant do simple comments on the initial post yet.
But it look as if your team_one_color_picker view has a set height of 200, which is making the parent view not fit in the available screen correctly. Try changing that height param to be something dynamic
Also your team_one_name_container object can be a height of 0dp since it is constrained at the top and bottom.

First, set android:windowSoftInputMode="adjustNotjing" in the manifest file or through the Java code, so that your view does not change when the keyboard is in open or closed state, and then you can use translationY=-10dp or any particular dp depending on your need for Team1 to move it on to the top of vs container.

XML constraint layout: Elements placed on top of each other, fix?

My XML code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BottomNavActivity">
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/idCardView" app:layout_constraintEnd_toEndOf="parent"/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp" app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="5dp" android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintBottom_toTopOf="#+id/container">
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
</android.support.v7.widget.CardView>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/idCardView"
app:layout_constraintBottom_toTopOf="#+id/navigation" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation_menu"/>
</android.support.constraint.ConstraintLayout>
I want the TextView on top, followed by the CardView, followed by a ConstraintLayout, followed by the bottomNavigationView. Somehow the elements are stacked on top of each other like this:
I made sure that every element are constrained to the top or bottom of the next element respectively. Still they end up on top of each other. Is there a better way or a fix to this problem?

In card view you added two constraint on top: remove app:layout_constraintTop_toTopOf="parent" and will work.

You don't need to constraint TextView to Carview, only CardView to TextView.
If TextView width is match_parent, you don't need to set right constraint. Only top and left.
remove CarView to parent top constraint
you don't need to constraint CardView to Container, only container to CardView
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp"
tools:layout_editor_absoluteX="5dp"
android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintLeft_toLeftOf="parent"
>
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>

Categories

Resources