Hey I am working in constraint layout with recylerview. My bottom item is cut in the screen. I read this stack overflow post. I don't want to use relative layout or linear layout. Can someone guide me how to fix this in constraint layout.
abc.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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
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" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintBottom_toTopOf="#+id/exploreList"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
My view cut from
UPDATE
#Zain after your suggestion i tried in my xml any my HorizontalScrollView is going behind my RV. I am adding my blueprint and you can see clearly that, HorizontalScrollView is going behind. After removing app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView.
2nd suggestion try
Disclaimer Using a wrap_content height with vertical RecyclerView
can have impact on performance in terms of recycling views; specially
if the height is going to change frequently. Check this article
for more illustration.
So, the first step is to designate the RecyclerView height or to constraint it; from the constraints you want it to expand to the bottom; so use 0dp for that. But in order to make the minimum height to wrap content of the RecyclerView (in case that the items don't exceed the screen height); you can set the default height constraint to wrap with app:layout_constraintHeight_default="wrap" constraint.
Then remove app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView, this actually made the bottom item of the RV hide (your main issue); because it is an over-constraint; the HorizontalScrollView tends to push the RV to the bottom while the RV tends to push the HorizontalScrollView to the top.
This will solve the main issue; but when the items are fully accommodated by the screen (no scrolling in the RV), then it will be biased in the middle; to fix this use the bias with app:layout_constraintVertical_bias="0.0" to be biased to the top.
Adding this in place into 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
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" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I'm putting together a screen with 3 controls stacked vertically. Specifically, a RecyclerView sandwiched between two TextView. I have two situations I am trying to address.
When few items are displayed in the RecyclerView the 3 items should be packed towards the top of the screen with blank space BELOW them.
When many items are displayed in the RecyclerView the full screen will be used with the last TextView along the bottom of the screen and scrolling in the center RecyclerView.
I'm struggling to get the position of the last TextView correct as it either gets pushed off the screen or buried behind the RecyclerView if there are many items in the RecyclerView. What I need is a way to tell the RecyclerView to wrap contents, but stop growing when it starts to push the TextView off of the screen.
Below is my layout, any suggestions?
<?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">
<TextView
android:id="#+id/topItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/middleItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/middleItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
app:layout_constraintBottom_toTopOf="#+id/bottomItem"
app:layout_constraintTop_toBottomOf="#+id/topItem" />
<TextView
android:id="#+id/bottomItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/middleItem" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try the following:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/topItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is the top item."
app:layout_constraintBottom_toTopOf="#+id/middleItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/middleItem"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="none"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/bottomItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topItem"
tools:itemCount="3" />
<TextView
android:id="#+id/bottomItem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal|top"
android:text="This is the bottom item."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/middleItem" />
</androidx.constraintlayout.widget.ConstraintLayout>
With three items in the RecyclerView:
With 50 items in the RecyclerView:
The key changes are:
Added app:layout_constraintVertical_bias="0.0" to the top TextView to position the chain always at the top;
Added app:layout_constrainedHeight="true" to the RecyclerView to make sure views don't go off-screen;
Changed match_parent to 0dp and set the horizontal constraints for direct children of the ConstraintLayout.
Changed the RecyclerView's height to '0dp'.
Update: Although the above works, it is a little overdone. As noted in the comments, the same effect can be accomplished by simply setting the height of the RecyclerView to 0dp.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/topItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is the top item."
app:layout_constraintBottom_toTopOf="#+id/middleItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/middleItem"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="none"
app:layout_constraintBottom_toTopOf="#+id/bottomItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topItem"
tools:itemCount="3" />
<TextView
android:id="#+id/bottomItem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal|top"
android:text="This is the bottom item."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/middleItem" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am using constraint layout with a vertical bias to fill view in recycler view. I successfully did that.
<?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="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
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>
My recyclerview items showing me in reverse order because I want to make chat application. So I added reverseLayout and stackFromEnd true. So it look like this.
If my item is single my ui convert into like this by above xml code
Now I want to add edittext and button in bottom. Its not working vertical bias. Does any one know how to fix. Any suggestion to what can i use
Expected Output
Scenerio 1
Scenerio 2
Actual Output
I tried this code
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
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_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="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/crecyclerView">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="200dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After adding #MartinMarconcini answer it fixed my Scenario 2. I want to fix as Scenario 1 as well.
The idea is that your RV will handle its own item size and space by itself. You don't need to worry about this.
The Remainder of the space, will be used by ConstraintLayout.
So you need to pin the RV and the "Bottom Container" together. This would by default cause the CL to try to pull and balance layouts, so you have to tell the bottom container to be biased at the bottom.
In pseudo-XML:
<ConstraintLayout>
<RecyclerView
width=0dp
height=0dp
start/end = parent
TopToTop=parent
BottomToTopOf=BottomContainer
>
<BottomContainer>
width=0dp
height=wrap_content
TopToBottomOf=RecyclerView
BottomToBottomOf=parent
start/end = parent>
</ConstraintLayout>
Now this needs one more thing, because the RV would take all the space, you want to ensure the BottomContainer has more information about where it wants to be placed.
So you add:
app:layout_constraintVertical_bias="1.0"
to the Bottom Container.
This means, vertically, as "bottom" as you can. (0.0 would be the opposite).
The end result is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
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_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#android:layout/simple_list_item_2" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
app:layout_constraintVertical_bias="1.0"
android:layout_height="wrap_content"
android:id="#+id/bottomContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/recylerview"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Which looks like this:
UPDATE
If you add both
app:stackFromEnd="true"
app:reverseLayout="true"
It works the same way, except the item "0" is at the bottom, and the "last" item is at the top. Adding another item would add it at the top but the BottomContainer has no participation (or influence) over this:
I have a simple layout for the items in RecyclerView, which contains a TextView and a RadioButton. Here is the layout xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_thali_name"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:hint="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/materialRadioButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/materialRadioButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now when I run the app, the RecyclerView looks like this -
If I set a fixed width (which I don't want to) for the TextView, then it is showing the TextView content.
I also tested the xml code in a separate layout,
As you can see it is showing the view as it should. But when using it as an item in RecyclerView, then only the TextView is not showing.
Am I missing something?
Try this edit:
<?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="50dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_thali_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/materialRadioButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I removed some extra constraint app:layout_constraintEnd_toStartOf="#+id/materialRadioButton" and added minor changes. This got to work.
Okay I fixed it. All I had to do is setting the RecyclerView width as match_parent. Previously it was 0dp.
I have a simple web view in between image and button. For some reason, if I put a long text, the web view is overlapping with the logo and the button. It works for a short text. I used constraint layout. It seems that the web view is expanding beyond the parent view.
Please see the pictures.
Below is my layout 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv_logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/card_big_margin"
android:src="#drawable/login_cashnetusa_color"
android:tint="#color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<androidx.cardview.widget.CardView
android:id="#+id/cv_splash_screen"
style="#style/CardTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/card_normal_outer_margin"
android:layout_marginTop="#dimen/card_normal_outer_margin"
android:layout_marginRight="#dimen/card_normal_outer_margin"
android:layout_marginBottom="#dimen/card_normal_outer_margin"
app:layout_constraintBottom_toTopOf="#id/btn_cta"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/iv_logo">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_header"
style="#style/CardContent.CustomBlack.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/card_normal_margin"
android:text="#string/dummy_full_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<WebView
android:id="#+id/wv_update_text"
style="#style/CardContent.White"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="#dimen/card_normal_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btn_cta"
style="#style/Button.OrangeGradient"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/card_normal_margin"
android:layout_marginRight="#dimen/card_normal_margin"
android:layout_marginBottom="#dimen/card_item_normal_margin"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#id/tv_skip"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:text="#string/dummy_btn_ok" />
<TextView
android:id="#+id/tv_skip"
style="#style/CardContent.White"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_normal_margin"
android:text="#string/skip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem lies in here:
<androidx.cardview.widget.CardView
android:id="#+id/cv_splash_screen"
style="#style/CardTheme"
android:layout_width="match_parent"
<-- change layout:height from wrap_content to some specific height let it be 300-400dp -->
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/card_normal_outer_margin"
android:layout_marginTop="#dimen/card_normal_outer_margin"
android:layout_marginRight="#dimen/card_normal_outer_margin"
android:layout_marginBottom="#dimen/card_normal_outer_margin"
app:layout_constraintBottom_toTopOf="#id/btn_cta"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/iv_logo">
or the second option is you can use minHeight and maxHeight in your cardview or it's child layout which is Constraint layout to prevent it from expanding on full screen
and if you have long texts to read use ScrollView inside cardview.
As you have set the height of your CardView to wrapContent it will expand to the content that is put in it, what you can do is set app:layout_constrainedHeight="true" that will prevent it from expanding beyond its bounds.
Note that you do have to set up the view bound chaining properly for this to work, ie set app:layout_constraintTop_toX and app:layout_constraintBottom_toX on all the views in the 'chain' from the top of the view through to the bottom.
so in your code:
<androidx.cardview.widget.CardView
android:id="#+id/cv_splash_screen"
style="#style/CardTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/card_normal_outer_margin"
android:layout_marginTop="#dimen/card_normal_outer_margin"
android:layout_marginRight="#dimen/card_normal_outer_margin"
android:layout_marginBottom="#dimen/card_normal_outer_margin"
<!-- add this line --> app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/btn_cta"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/iv_logo">
Hello guys, I need to add 2 fixed width and height imageview in to center of screen using constraint layout how we can achieve something like this.
xml layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activity.profile.view.UserDetailsActivity">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="#string/you_are"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/iv_prof"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toRightOf="#+id/iv_farmer"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
</android.support.constraint.ConstraintLayout>
i am trying this but views are not centerd.
I have updated your xml code. Please try with this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="You are"
app:layout_constraintBottom_toTopOf="#+id/iv_farmer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/iv_prof"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_farmer"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it helps :)
In your first CircularImageView there's a problem with your right constraint:
app:layout_constraintRight_toRightOf="#+id/iv_prof"
This should be constrained to the left of iv_prof:
app:layout_constraintRight_toLeftOf="#id/iv_prof"
If you want the to be closer together in the center then change the style of the chain to packed by adding this attribute to the first CircularImageView:
app:layout_constraintHorizontal_chainStyle="packed"
To center the Views vertically in the parent you need to constraint the top and bottom of each View to the top and bottom of the parent respectively.
Also you're using left/right constraints for some Views and start/end for others. Try using just one set of them across the whole layout.
It worked for me using bias:
<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:layout_gravity="center">
<ImageView
android:id="#+id/img_splash_logo"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/weather_logo"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>