Develop Reference

Android XML ScrollView wrap_content height inside ConstraintLayout

I have the following 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">
<TextView
android:id="#+id/header"
style="#style/CustomFont_Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="#string/welcome_header"
android:textAlignment="center"
android:textColor="#color/text_header"
tools:text="Header Title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.1" />
<ScrollView
android:id="#+id/scrollview"
android:layout_width="#dimen/subtext_width"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/subtext_margin_top"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header">
<TextView
android:id="#+id/subtext"
style="#style/CustomFont_Subheader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/welcome_text"
android:textColor="#color/color_subtext"
tools:text="#string/testtext_short" />
</ScrollView>
<ImageView
android:id="#+id/logo"
android:layout_width="300dp"
android:layout_height="150dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:scaleType="fitCenter"
android:src="#drawable/logo_pic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/scrollview"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to make subtext scrollable, because it can sometimes be short sometimes long.
I can make it work if I change scrollView and add:
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/logo
But in this case, if the text is short, then the logo is pushed to the bottom:
I always need to have the logo in the middle between the subtext and parent bottom and at the same time subtext must be constraint to the bottom of header if it is short.
I can think of something programmatically, but I think it can be done in XML, right?

Do not give the wrap content width. Make it match parent and provide the padding to first layout in the scroll bar

Remove these two lines from ScrollView:
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/logo
And add
android:fillViewport="true"
And do not give the ScrollView height as 'wrap_content' set the height of the ScrollView to some fixed dp e.g 120dp then you will be able to have the scrollable text between header and logo.

Why is the text in the text view cut off in the recycler view?

I'm trying to make an items with just an image and a title below it in a recycler view. For some reason my text view's that hold the title are getting cut off on the bottom.
See below:
I've tried setting the text view height to wrap_content but that will result in my images being pushed up and not consistently the same size across all items. Also I find it odd that the text view size & positioning doesn't even match the preview layout in android studios.
Any suggestions?
My view holder layout:
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Why did you created a linear layout inside a constraint layout?
You can remove linear layout an put your ImageView and TextView directly inside constraint layout and constraint TextView top to bottom of ImageView
and instead of using weight you can use layout_constraintHeight_percent just like below:
app:layout_constraintHeight_percent="0.2"
But I recommend you not to use height_percant or weight and also avoid sizing the views width/height statically. it can cause problems on different screens
I think its better to remove LinearLayout and also remove weight and add this line to your ImageView:
app:layout_constraintDimensionRatio="H,5:4"
Write your TextView and ImageView like below:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/dark_red"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#id/thumbnail_item"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

I believe I have found the problem and it's the weight you're using in your LinearLayout.
Depending on the ImageView height (80) you have determined TextView height (20). Because of that TextView cannot wrap, so text is being cut from the bottom.
Solution 1: remove weight in linear layout and set image height to fixed height, and TextView to wrap_content. Just like below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
Solution 2: You can remove padding in the TextView or set it to smaller one, but the problem might reoccur on smaller screens.

Make the weight of imageview to 60 and the weight of textview to 40. In short keep adjusting the weight attr value in order to solve your problem. Use thia solution only when you really need weight attr in your code. Or else, just remove weight and set the height to wrap_content for both of them.

Scrollview and layout_constraintHeight_max making view disappear

I have a layout composed of a ScrollView with a ConstraintLayout as a container. This container has some views and I want one of those views to have a maximum height, so I used layout_constrainedHeight_max, but then the view just disapear when lauching the app...
Here is my xml sample :
<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:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constrainedHeight="true"
app:layout_constraintHeight_max="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="1500dp"
android:layout_margin="8dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView1"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
I simplified the xml to just reproduce the bug with minimum components. I tried many things but imageView1 just keep disappearing and I don't understand why. fillViewport or isScrollContainer changed nothing and I am using version 1.1.3 of constraint-layout. ImageView1 will appear if the constraintlayout is not in a ScrollView or if I don't use layout_constraintHeight_max (android:maxHeight doesn't work) but the combination of both just doesn't work. So what am I missing ?

It turns out that for layout_constraintWidth_max and layout_constraintHeight_max to work all constraints (left, right, top, bottom) needs to be set. It is not applicable to imageView1 as a view at the top with variable height and other views relating to it.
I assume you want to make your imageView1 have a maximum height of 20dp. To achieve that try this code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:adjustViewBounds="true"
android:maxHeight="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
Here changes are:
adding android:maxHeight="20dp" and android:adjustViewBounds="true"
removing app:layout_constrainedHeight="true" and app:layout_constraintHeight_max="20dp"
I would also advice you to set layout_height attribute of ConstraintLayout to wrap_content as ScrollView is assumed to contain a child that is bigger than itself.

How to make stretchable view with min height inside ConstraintLayout?

Want I want to achieve is to compose two views, where one has some fixed aspect ratio and the other one stays below the first (unless the first gives enough space for the second one).
Here is one case:
Here is second case:
These two views are placed inside ConstraintLayout. I tried to use this part of code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_min="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But it works only in the first case where there is enough space for View 2. In the second case, View 2 is moved below View 1 and it's outside the screen.
Edit
I've found solution, which I'm not proud of it, but it works. Still waiting for better idea. How it works? I put additional view (placeholder) which doesn't have constrained width to MATCH_PARENT but it has bottom margin (simulating minimum height for View 2). Placeholder behaves in the same way like View 1 when there is more space than minimum height, but in other cases it narrows a little bit to leave bottom margin.
<?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="#android:color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/placeholder"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Well for starters, I don't see you trying to add any constraint to the dimensions of the first view. If you want it to have a fixed aspect ratio of 3:4 you should set app:layout_constraintDimensionRatio="H,3:4" to your desired view and remove the app:layout_constraintDimensionRatio="0.75". Therefore you won't need the placeholder view any longer. So your layout would look something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,3:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1" />
But if you wish to keep your view1 heigh to a 75% screen ratio, then you should replace your placeholder view with a horizontal Guideline to which you set your app:layout_constraintGuide_percent="0.75". So the layout would look like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1" />
Also please keep in mind that using match_parent inside a ConstraintLayout is not recommended. Instead, use the 0dp height/width dimension and set the appropriate constraint for the margins depending on the case (top, bottom / start, end)

Move View out of Constraint Layout

I want to move my ImageView so it will be half way out of the ConstraintLayout (parent one)
You can imagine this as I make negative margin in my LinearLayout
What I have is an Image and it should be cut as on picture, so only button side of the image should be displayed on the actual device. Other part should be cut off.
Here is a part of my layout.
<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="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="71dp"
android:layout_height="71dp"
android:src="#drawable/someImage"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
So, is there any good way to do that?

So I found the solution.
Basically you need to make a translation of the image out of its container.
android:translationY="-22dp"

Add a guide line and say that your ImageView should be above that guidelines for example this code will make everything appear like your 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/your_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/guideline" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="163dp" />
</android.support.constraint.ConstraintLayout>

To position the ImageView halfway outside parent enforce the vertical constraints by setting layout_height to 0dp. To maintain the appropriate size of the ImageView set the dimensionRatio to 1:1. The code will look like this (note that parent ConstraintLayout now has layout_height matching parent):
<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">
<ImageView
android:layout_width="71dp"
android:layout_height="0dp"
android:src="#drawable/someImage"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>

Put the image inside of the Linear Layout.
<LinearLayout....>
<ImageView..../>
</LinearLayout>
And add attribute called clipChildren and make it true.

One trick would be to set negative margin for the side you want, in the ConstraintLayout itself. This requires that other views that have constraint to that side be offset. The right button in the images is below the ConstraintLayout and hidden under the bottom bar:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
...
android:layout_marginBottom="-48dp">
<ImageButton
android:id="#+id/leftButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="72dp"
android:background="#drawable/shape_next_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageButton
android:id="#+id/rightButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="24dp"
android:background="#drawable/shape_previous_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

I did this by adding View inside the ConstraintLayout and give it some margin.
View provides background to ConstraintLayout.
ConstraintLayout must be of transparent background.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_transparent">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="38dp"
android:background="#drawable/bg_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView/>