Develop Reference

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.

ConstraintLayout inside ScrollView or NestedScrollView won't scroll

I am fairly new to ConstraintLayout and am trying to convert my UI to a responsive layout to support different screen sizes. However, I am having trouble with my ScrollView scrolling when the inner layout is a ConstraintLayout. Even when I change the ScrollView to NestedScrollView it still won't scroll. I tried several solutions of many asking the same question and none of them seemed to have worked.
<android.support.v4.widget.NestedScrollView
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
android:fillViewport="true"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/refresh_text">
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/light_gray"
app:layout_constraintBottom_toTopOf="#+id/key_constraint_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/status_date_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="Status Date"
android:textSize="20sp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/status_date_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="-------"
android:gravity="end|center_vertical"
android:textSize="20sp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0.70"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<!--Other inner layouts are children of innerLayout based on innerLayout2 -->
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView>
What am I doing wrong?

This jumps out at me as the likely cause of your problem:
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
The single child of a scrolling view should always have either a fixed height or a wrap_content height.
The idea of scrolling views is that they hold a single child that is too large to fit on the screen by itself. If you are defining the single child to be match_parent height, then there's nothing to scroll, because the child is no larger than the scrolling view.

Issue with ConstraintLayout (max width, dimension ratio and chain style)

I am having an issue with ConstraintLayout and a specific view.
What is wanted : 3 imageviews in a 6:5 ratio, the first one is bigger with the two other stacked vertically on its right. The whole view has a maxed width of 414dp.
When trying to set the horizontal chain style at packed, the views don't display at all over 414dp.
There is no issue under that limit or with a chain style other than packed.
Here are
the layout :https://gist.github.com/xcaEi/ba46e5e8c2d1d5682e1a5f3221325ed0
screenshots of the problem : https://imgur.com/a/0uZckj0
Am I missing something ?

To achieve what you want, I believe you must nest a ConstraintLayout inside another ConstraintLayout.
The problem is that you can't have both app:layout_constraintWidth_percent and layout_constraintWidth_max defined on the same view; each of these is one option for how to constrain a view set to "match constraints".
MATCH_CONSTRAINT dimensions (Added in 1.1)
When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:
layout_constraintWidth_min and layout_constraintHeight_min: will set the minimum size for this dimension
layout_constraintWidth_max and layout_constraintHeight_max: will set the maximum size for this dimension
layout_constraintWidth_percent and layout_constraintHeight_percent: will set the size of this dimension as a percentage of the parent
(From https://developer.android.com/reference/android/support/constraint/ConstraintLayout)
You can work around this by having your inner ConstraintLayout specify its maximum width, and then have the ImageView children of that inner ConstrainLayout specify their percentages.
<?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="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#eee"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_max="414dp">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#caf"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="H,6:5"
app:layout_constraintWidth_percent="0.666"/>
<ImageView
android:id="#+id/second_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#fac"
app:layout_constraintTop_toTopOf="#+id/main_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toTopOf="#+id/third_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
<ImageView
android:id="#+id/third_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#afc"
app:layout_constraintTop_toBottomOf="#+id/second_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toBottomOf="#+id/main_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

I think this is your need 3 imageview first one bigger. You can change layout_constraintHorizontal_weight properties check below
<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">
<ImageView
android:id="#+id/imageView9"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView11"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView9"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView10"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

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/>

Stretching ConstraintLayout and its content

I built a fragment (with ConstraintLayout), which looks like this:
Fragment image
I would like to reuse it, for example load it (add to fragmentManager) to an Activity's "fragment holder", but if this holder is too small, the images will cover each other.
See this:
Image problem
So, the images won't resize... Is there any solution to achieve the automatic resizing?
Thanks,
Zoltan

Place each of your ImageViews in their own ConstraintLayout. The layout_width and layout_height of the ImageViews should be wrap_content. The layout_width and layout_height of their parent ConstraintViews should be match_parent and wrap_content respectively.
Anchor the left ConstraintView to the top and start of the parent, and the right ConstraintView to the top and end using layout_constraintTop_toTopOf, layout_constraintStart_toStartOf, and layout_constraintEnd_toEndOf.
Also add the margins to the parent ConstraintViews using layout_marginTop and layout_marginLeft for the left; layout_marginTop and layout_marginRight for the right.
Next, create a vertical Guideline as a child of your fragment. Set its layout_constraintGuide_percent to 0.5. Give it an id of #+id/guideline.
Set the left ConstraintView's layout_constraintRight_toLeftOf to #+id/guideline, and the right ConstraintView's layout_constraintLeft_toRightOf to #+id/guideline as well.
This should scale the ImageViews sizes down if the fragment is not that wide.
If you want there to be a minimum gap between the two images, you can add layout_marginRight to the left ConstraintView, and layout_marginLeft to the right ConstraintView. Setting each to 2dp would give a minimum gap of 4dp.
Here is an example layout file. Edit the container ConstraintLayout's layout_width to see it in action:
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="100dp"
android:layout_height="300dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#333333">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"/>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="2dp"
android:background="#FF0000">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#mipmap/ic_launcher"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/guideline"
android:layout_marginLeft="2dp"
android:background="#00FF00">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#mipmap/ic_launcher"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>