My Screen has Image and Titleview. I need to announce talkback as the Title text when the page loads. But it always announces the contentDescription of an ImageView.
View Hierarichy
ImageView and then title.
What I tried ?
Tried to set focus on title,
For that I set these attributes to ImageView
android:focusable="false"
android:accessibilityTraversalAfter="#id/title"
android:importantForAccessibility="no"
Bad luck, none of these worked in my case. As a second try, I added these in my fragment
onResume {
if (accessibilityManager?.isEnabled == true) {
activity.title = title
activity.window.decorView.sendAccessibilityEvent(AccessibilityEvent.TYPE_WINDOW_STATE_CHANGED)
}
}
Still not working !! Does contentDescription of an ImageView has this much power?
I need to announce the title text when the page loads and if the user taps (or swipe left/right)then Imageview description needs to announce
XML
....
<data>
.....
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/vertical_padding"
android:theme="#style/CL.Theme.Light">
<ImageView
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_close"
android:importantForAccessibility="no"
android:contentDescription="CLOSE"
android:accessibilityTraversalAfter="#id/title"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="BACK"
android:src="#drawable/icon_back"
android:importantForAccessibility="no"
android:accessibilityTraversalAfter="#id/title
android:layout_margin="#dimen/icon_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/back_button"
app:layout_constraintBottom_toTopOf="#id/primary_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|clip_horizontal"
android:paddingStart="#dimen/horizontal_padding"
android:paddingTop="#dimen/error_screen_top_offset"
android:paddingEnd="#dimen/horizontal_padding"
android:paddingBottom="#dimen/vertical_padding">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/margin_top"
android:gravity="center"
android:text="HEADER TITLE"
android:focusable="true"
android:focusableInTouchMode="true"
android:importantForAccessibility="yes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginTop="62dp"
tools:text="Title" />
<TextView
android:id="#+id/subtitle
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/subtitle_margin_top"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
tools:text="Subtitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/cta_margin_top"
android:layout_marginStart="#dimen/horizontal_padding"
android:layout_marginEnd="#dimen/horizontal_padding"
android:layout_marginBottom="#dimen/secondary_cta_margin"
/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="#dimen/horizontal_padding"
android:layout_marginEnd="#dimen/horizontal_padding"
android:gravity="center"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Found better solutions from a different StackOverflow question
Hope this is able to help anyone else facing a similar issue.
fun View?.requestAccessibilityFocus(): View? {
this?.performAccessibilityAction(ACTION_ACCESSIBILITY_FOCUS, null)
this?.sendAccessibilityEvent(TYPE_VIEW_SELECTED)
return this
}
I have a layout for my recyclerview item:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_hotel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/tv_hotel_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_hotel"
tools:text="Belleclaire Hotel" />
<include
android:id="#+id/include"
layout="#layout/include_stars_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/tv_hotel_name"
app:layout_constraintTop_toBottomOf="#+id/tv_hotel_name" />
<TextView
android:id="#+id/tv_hotel_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/include"
app:layout_constraintTop_toBottomOf="#+id/include"
tools:text="250 West 77th Street, Manhattan" />
<TextView
android:id="#+id/tv_distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/tv_hotel_address"
app:layout_constraintTop_toBottomOf="#+id/tv_hotel_address"
tools:text="100.0" />
<TextView
android:id="#+id/tv_suites_available_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/label_suites_availability"
app:layout_constraintStart_toStartOf="#+id/tv_distance"
app:layout_constraintTop_toBottomOf="#+id/tv_distance" />
<TextView
android:id="#+id/tv_suites_available"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/tv_suites_available_label"
app:layout_constraintTop_toTopOf="#+id/tv_suites_available_label" />
<ProgressBar
android:id="#+id/progress_hotel_image"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/iv_hotel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_hotel" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
It seems like this:
enter image description here
However after building I have this view:
enter image description here
As you can see, I see only a half of my progressbar after I'm trying to dowload an image to my iv_hotel with a help of Glide.
How can I solve this problem? I'm a bit bad at xml guidelines understanding, so I'm asking for a help(
Use placeholder to show default image while a request is in progress
Glide.with(context)
.load(url)
.placeholder(R.drawable.placeholder)
.into(view);
if (!imageUrl.isNullOrEmpty()) {
imageView?.let { iv ->
Glide.with(iv.context)
.load(AppUtility.IMAGE_THUMB_URL.plus(imageUrl))
.apply(options)
.into(iv)
}
} else {
imageView?.setImageDrawable(error)
// set here your error img
}
I've a simple ListView with a custom adapter. I've modeled items layout with ConstraintLayout. Everything is working fine, except when a certain TextView contains a long text, making it going on the second row and overlapping the next text. How can I make the item to expand vertically, only when needed?
My list view:
<?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="org.altervista.realms.biomap.fragments.EditFragment">
<ListView
android:id="#+id/recordsListView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fillViewport="true"
android:divider="#drawable/list_divider"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
My adapter 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="wrap_content"
android:background="#drawable/record_row"
android:longClickable="true"
>
<Button
android:id="#+id/editRecordDeleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:background="#drawable/button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:minHeight="40dp"
android:minWidth="40dp"
android:text="#string/icon_delete"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<TextView
android:id="#+id/editRecordDate"
android:text="21/06/2015"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/editRecordSpecies"
android:text="Russola Magnificens Russola Magnificens"
android:textColor="#000000"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/editRecordDate"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/editRecordAbundance"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/editRecordLocHab"
android:text="Faggeta acidofila a Luzula Croce di Forcella Piccola"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginBottom="4dp"
app:layout_constraintRight_toLeftOf="#+id/editRecordDeleteButton"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="#+id/editRecordSpecies"
/>
<TextView
android:id="#+id/editRecordTime"
android:text="14:44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/editRecordDeleteButton"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/editRecordAbundance"
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/editRecordTime"
app:layout_constraintRight_toLeftOf="#+id/editRecordDeleteButton"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
/>
</android.support.constraint.ConstraintLayout>
How it looks now:
I'd like to have 3rd item (and 3rd item only) to expand vertically.
Thank you!
Edit:
I've noticed that this problem occurs only if the text is slightly longer than the line. Using a longer text cause the TextView to expand, as expected.
It seems to me that it's using the parent width to decide when to expand the layout, whereas it's using the textview width to decide when to go on a new line.
Please notice that the XML for the images below is identical. I've only changed the text string.
removing app:layout_constraintBottom_toBottomOf="parent" property from you editRecordLocHab textView solved the issue in my replicated code.
I am not sure whether it is a bug of ConstraintLayout or not, so I try to ask if somebody knows I made any mistake.
I have a layout which I want to spread evenly on the screen 3 elements.
Just like below:
I formed horizontal chains between them and as you can see, they are distributing themselves evenly and working good.
Now I want to place an image plus a TextView centered inside each element, like this:
So this is what I tried to do, taking element 1 as example:
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/image1"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintHorizontal_chainStyle="packed"/>
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:text="#string/text1"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
android:gravity="center_vertical"/>
Sadly, it seems to "break" the chain of the 3 elements. The 3 elements now does not spread horizontally, but wrapped to a very small size:
If I removed the chain between the ImageView and TextView, it works fine. But then I cannot center the ImageView and TextView inside the element.
Does anyone encountered something like this? How do you solve it?
Now, I know I have at least 2 alternatives to solve this problem:
(1) Use one TextView with a compound drawable, instead of ImageView + TextView;
(2) Use a LinearLayout to wrap the ImageView and TextView
But I want to know why it does not work (So that we can have better understanding of ConstraintLayout), instead of finding an alternative.
Thanks!
After posting my other answer to this question, I realized that it did not address how to center a multi-line TextView.
Referring to the image above, the leftmost box has a single line TextView. The TextView and the ImageView are centered as a group in the the box. This was accomplished by specifying the following for the TextView.
<TextView
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
.. the rest of it .../>
See this posting regarding the use of app:layout_constraintWidth_default="wrap".
app:layout_constraintWidth_default="wrap" (with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)
Update: It looks like the XML above needs to be changed for ConstraintLayout 1.1.0 beta2. See the release update.
I think what we are now looking for in the XML is the following:
<TextView
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
.. the rest of it .../>
I have left the rest of this posting using the pre-1.1.0 beta2 layout. To update, just make the changes mentioned above. The centering issue remains.
This works great for the single line example and the views are centered in the box, but we run into difficulty when the TextView spans multiple lines as it does in the middle box of image above. Although the text within the TextView is wrapped and does not expand beyond its constraints, the ImageView and TextView are not centered like we might expect. In fact, the bounds of the TextView extend to the right of the blue box.
My quick fix for this is to insert a zero-width Space widget to the left of the ImageView in the rightmost box. The chain is that box is now anchored between the Space widget and the righthand side of the box. The ImageView is constrained on the left by the Space.
The Space widget can now be expanded to act like a shim to move the ImageView to the right by the amount that will center the chain. (See right box in the image above.) The getExcessWidth() method of MainActivity calculates how wide the Space widget needs to be.
Here is the XML:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/element_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/element_3"
app:layout_constraintStart_toEndOf="#+id/element_1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<ImageView
android:id="#+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_2"
app:layout_constraintRight_toLeftOf="#+id/text2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<android.support.v4.widget.Space
android:id="#+id/spacer3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintLeft_toLeftOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<ImageView
android:id="#+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/spacer3"
app:layout_constraintRight_toLeftOf="#id/text3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="String"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintLeft_toRightOf="#id/image2"
app:layout_constraintRight_toRightOf="#id/element_2"
app:layout_constraintTop_toTopOf="#id/element_2"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/text3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintLeft_toRightOf="#id/image3"
app:layout_constraintRight_toRightOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3"
app:layout_constraintWidth_default="wrap" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chained_chains);
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.constraintLayout);
layout.post(new Runnable() {
#Override
public void run() {
final TextView textView = (TextView) findViewById(R.id.text3);
int excessWidth = getExcessWidth(textView);
if (excessWidth > 0) {
Space spacer = (Space) findViewById(R.id.spacer3);
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) spacer.getLayoutParams();
lp.width = getExcessWidth(textView) / 2;
spacer.setLayoutParams(lp);
}
}
});
}
private int getExcessWidth(TextView textView) {
if (textView.getLineCount() <= 1) {
return 0;
}
Layout layout = textView.getLayout();
int maxWidth = 0;
for (int i = 0; i < textView.getLineCount(); i++) {
maxWidth = Math.max(maxWidth, (int) layout.getLineWidth(i));
}
return Math.max(textView.getWidth() - maxWidth, 0);
}
}
ConstraintLayout appears to be working as expected. You don't specify what kind of view the elements are, so I have taken the TextView and ImageView and chained them inside a View. I also changed the width of the TextView from 0dp (match_constraints) to wrap_content. Here is the result:
..and the XML.
<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">
<View
android:id="#+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<View
android:id="#+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/element_1"
app:layout_constraintRight_toLeftOf="#+id/element_3"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_2"
app:layout_constraintRight_toLeftOf="#+id/text2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A longer string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image2"
app:layout_constraintRight_toRightOf="#id/element_2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<View
android:id="#+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/element_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_3"
app:layout_constraintRight_toLeftOf="#+id/text3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A still longer string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image3"
app:layout_constraintRight_toRightOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3" />
</android.support.constraint.ConstraintLayout>
If this continues to be a problem for you, it would be helpful if you can post more of your XML including the elements. In the meantime, a couple of thoughts.
First, check to make sure that you are not mixing left/right with start/end constraints. If you supply both, they should agree. There has been an inconsistency in how these have been applied by the designer in the past.
Secondly, you can set up barriers to the left and right of each of your elements and chain the TextView and ImageView between these barriers. See this writeup about barriers in ConstraintLayout.
I noticed that you have your inner view chains set to 'packed' with the line
app:layout_constraintHorizontal_chainStyle="packed"
It almost seems like the this functionality is extending out to the parent views (the 'elements in your case').
You should try temporarily removing this line in your markup to see if your problem goes away.
If so, the fix should be easy enough. There are many ways to achieve that same effect without nesting layouts.
This is perhaps the closest you can get to centering the ImageView and TextView in the ConstraintLayout without any kind of Nested layouts.
And here is the code that does that
<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">
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/frameLayout2"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:id="#+id/frameLayout"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout3"
app:layout_constraintLeft_toRightOf="#+id/frameLayout2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/border_normal"
app:layout_constraintLeft_toRightOf="#+id/frameLayout"
android:id="#+id/frameLayout3"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout2"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout3"
app:layout_constraintTop_toTopOf="#+id/frameLayout3"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout3"
app:layout_constraintTop_toTopOf="#+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout3"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView3"
android:text="TextView"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
Alternate Solution
A better solution would be to wrap the Image view and Text view in a ConstraintLayout
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView2" />
</android.support.constraint.ConstraintLayout>
EDIT
<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:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout3"
app:layout_constraintLeft_toRightOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout3"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="#id/frameLayout2"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginLeft="24dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toRightOf="#id/frameLayout2"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginRight="24dp" />
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="0dp"
android:layout_height="110dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/border_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The layout will be positioned correctly only if the chain style is set to app:layout_constraintHorizontal_chainStyle="spread_inside"
This is how the output will look like
I have a recyclerview using the following xml as a list item for each of its views
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
app:cardElevation="2dp">
<android.support.constraint.ConstraintLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/item_question_name"
style="?android:attr/textAppearanceLarge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/app_margin"
app:layout_constraintBottom_toTopOf="#+id/item_question_question"
app:layout_constraintEnd_toStartOf="#+id/item_question_needs_sync"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is the name" />
<android.support.v7.widget.AppCompatImageView android:id="#+id/item_question_needs_sync"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/item_question_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/item_question_name"
app:srcCompat="#drawable/ic_sync" />
<TextView android:id="#+id/item_question_question"
style="?android:attr/textAppearanceMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/app_margin"
app:layout_constraintBottom_toTopOf="#+id/item_question_type"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/item_question_name"
app:layout_constraintTop_toBottomOf="#+id/item_question_name"
tools:text="this is the question" />
<TextView android:id="#+id/item_question_type"
style="?android:attr/textAppearanceMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/app_margin"
android:layout_marginTop="#dimen/app_margin"
app:layout_constraintBottom_toTopOf="#+id/item_question_separator"
app:layout_constraintEnd_toStartOf="#+id/item_question_info"
app:layout_constraintHorizontal_weight="5"
app:layout_constraintStart_toStartOf="#+id/item_question_question"
app:layout_constraintTop_toBottomOf="#+id/item_question_question"
tools:text="Four faces which are awesome" />
<TextView android:id="#+id/item_question_info"
style="?android:attr/textAppearanceSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/item_question_type"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintStart_toEndOf="#+id/item_question_type"
app:layout_constraintTop_toTopOf="#+id/item_question_type"
tools:text="answered ALL the questions" />
<View android:id="#+id/item_question_separator"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toTopOf="#+id/item_question_buttons"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_question_info" />
<android.support.constraint.ConstraintLayout android:id="#+id/item_question_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_question_separator">
<Button android:id="#+id/item_question_delete"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/item_question_button_delete"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/item_question_edit"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button android:id="#+id/item_question_edit"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/item_question_button_edit"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="#+id/item_question_delete"
app:layout_constraintEnd_toStartOf="#+id/item_question_view"
app:layout_constraintStart_toEndOf="#+id/item_question_delete"
app:layout_constraintTop_toTopOf="#+id/item_question_delete" />
<Button android:id="#+id/item_question_view"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/item_question_button_view"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="#+id/item_question_delete"
app:layout_constraintEnd_toStartOf="#+id/item_question_start"
app:layout_constraintStart_toEndOf="#+id/item_question_edit"
app:layout_constraintTop_toTopOf="#+id/item_question_delete" />
<Button android:id="#+id/item_question_start"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/item_question_button_start"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="#+id/item_question_delete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/item_question_view"
app:layout_constraintTop_toTopOf="#+id/item_question_delete" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
my problem is that when the user clicks on the view I have the viewholder toggling whether the #+id/item_question_buttons will be shown or not like so:
void bind_view(Info info, boolean selected) {
//load the data from info
.....
// _buttons is a View object where I stored the constraint layout with the buttons
if (selected) {
_buttons.setVisibility(VISIBLE);
} else {
_buttons.setVisibility(GONE);
}
}
my problem is that every other time (i.e. the 2nd 4th 6th etc) the user toggles the visibility of the _buttons View the view expands to triple the normal size (which is the same as the max height a button can have).
I solved it by using android:maxLines="1" but I was wandering , why does this happen? and is there a better way to fix this?
thanks in advance for any help you can provide