In an android application I am attempting to programmatically add customized ConstraintLayout views to a vertically oriented LinearLayout.
I set the LayoutParams to MATCH_PARENT for width and WRAP_CONTENT for height in the ConstraintLayouts. However, when I run the application the ConstraintView is all scrunched up and the content is overlapping. Below are some relevant snippets and a screenshot of my application. How do I go about correcting this issue?
public class ItemView extends ConstraintLayout {
LinearLayout linearButtons;
LinearLayout linearText;
public ItemView(Context context, String name, String price, ArrayList<String> guests,
ArrayList<String> checked, int id) {
...
addView(linearText);
addView(linearButtons);
set.clone(this);
set.connect(linearText.getId(), ConstraintSet.LEFT, this.getId(),
ConstraintSet.LEFT, 8);
set.connect(linearText.getId(), ConstraintSet.TOP, this.getId(),
ConstraintSet.TOP, 8);
set.connect(linearButtons.getId(), ConstraintSet.RIGHT, this.getId(),
ConstraintSet.RIGHT, 8);
set.connect(linearButtons.getId(), ConstraintSet.TOP, this.getId(),
ConstraintSet.TOP, 8);
}
elsewhere:
for (Item it:r.getItems()) {
ItemView itemView = new ItemView(this, it.getName(), nf.format(it.getPrice()), dinerlist, it.getGuests(), i);
ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_PARENT, ConstraintLayout.LayoutParams.MATCH_PARENT);
itemView.setLayoutParams(params);
vg.addV[enter image description here][1]iew(itemView);
Log.d("ItemView Children: ", itemView.getWidth()+" "+itemView.getHeight());
In ConstraintLayout in xml when you want a "MATCH_PARENT" width, you have to set the width to 0dp and then set the layout_constraintWidth_default attribute to "spread"
Programmatically you can do the same:
a) set a 0 dp width and height
b) set defaultWidth and defaultHeight constraints
//add the view with 0dp width and height
val layoutParams = ConstraintLayout.LayoutParams(0, 0)
val view = View(context)
view.layoutParams = layoutParams
view.id = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) View.generateViewId() else R.id.yourLayoutId
parent.addView(view)
//apply the default width and height constraints in code
val constraints = ConstraintSet()
constraints.clone(parent)
constraints.constrainDefaultHeight(view.id, ConstraintSet.MATCH_CONSTRAINT_SPREAD)
constraints.constrainDefaultWidth(view.id, ConstraintSet.MATCH_CONSTRAINT_SPREAD)
constraints.applyTo(parent)
If you need Java:
//add the view with 0dp width and height
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(0, 0);
View view = View(context);
view.setLayoutParams(layoutParams);
view.setId(R.id.yourLayoutId);
parent.addView(view);
//apply the default width and height constraints in code
ConstraintSet constraints = new ConstraintSet();
constraints.clone(parent);
constraints.constrainDefaultHeight(view.getId(), ConstraintSet.MATCH_CONSTRAINT_SPREAD);
constraints.constrainDefaultWidth(view.getId(), ConstraintSet.MATCH_CONSTRAINT_SPREAD);
constraints.applyTo(parent);
Related
How can I set the height of a ConstraintLayout child to be 0dp?
When I use layoutParams and do the following, ConstraintLayout thinks 0dp = match_parent
val layoutParams = view.layoutParams.apply {
this.height = newHeight
}
view.layoutParams = layoutParams
So if newHeight is 0 here, it thinks it's match_parent
I would like to avoid checking for 0 and if true set it to a negative value
I'm creating TextViews programmatically and adding them to my constraint layout. They are by default placed in the top left corner. I want them to go below each other, the first one being below an EditText.
This is my code:
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.cLayout);
ConstraintSet set = new ConstraintSet();
TextView tv = new TextView(this);
ConstraintLayout.LayoutParams lp = new ConstraintLayout.LayoutParams(
ConstraintLayout.LayoutParams.WRAP_CONTENT, // Width of TextView
ConstraintLayout.LayoutParams.WRAP_CONTENT);
tv.setLayoutParams(lp);
set.clone(layout);
set.connect(tv.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, 8);
set.connect(tv.getId(), ConstraintSet.TOP, editText.getId(), ConstraintSet.BOTTOM, 8);
tv.setId(View.generateViewId());
set.applyTo(layout);
layout.addView(tv,0);
As you see, I've already set a constraint from TOP of View to BOTTOM of editText. Still, it shows in the top left corner. Why is that?
Your code order isn't proper, the following code should work.
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.cLayout);
TextView tv = new TextView(this);
tv.setText("Something");
tv.setId(View.generateViewId());
ConstraintLayout.LayoutParams lp = new ConstraintLayout.LayoutParams(
ConstraintLayout.LayoutParams.WRAP_CONTENT, // Width of TextView
ConstraintLayout.LayoutParams.WRAP_CONTENT);
tv.setLayoutParams(lp);
layout.addView(tv,0);
ConstraintSet set = new ConstraintSet();
set.clone(layout);
set.connect(tv.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, 8);
set.connect(tv.getId(), ConstraintSet.TOP, editText.getId(), ConstraintSet.BOTTOM, 8);
set.applyTo(layout);
P.S - I agree with Syed Ahmed Jamil that you should preferably use a RecyclerView or ListView, but it doesn't hurt to know how to set ConstraintLayout constraints properly.
I have a custom ConstraintLayout, and there's a TextView inside of it. I'm doing everything programmatically WITHOUT XML at all, here's the code:
public class CustomView extends ConstraintLayout {
private TextView textView;
public CustomView(Context context) {
super(context);
textView = new TextView(context);
textView.setId(View.generateViewId());
textView.setText("...");
// Adding border to the view in order to visualize the frame
GradientDrawable border = new GradientDrawable();
border.setColor(Color.TRANSPARENT);
border.setStroke(1, Color.BLACK);
textView.setBackground(border);
addView(textView);
// Apply constraints to textView. Left = right = top = bottom = 120
ConstraintSet set = new ConstraintSet();
set.clone(this);
set.connect(textView.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 120);
set.connect(textView.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, 120);
set.connect(textView.getId(), ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 120);
set.connect(textView.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 120);
set.applyTo(this);
}
}
When I run the above code, I'm getting some wrong results:
If the text in textView is short:
If the text in textView is long:
If I understand correct that your wrong result - you don't see the margins?
I think this because defaults layout_width layout_height of your textview - wrap_content. Defaults must be 0dp.
Try like:
LayoutParams lp = new LayoutParams(0, 0);
textView.setLayoutParams(lp);
I have added 2 views from xml in constraint layout, Now i need to add new view below the view created from xml
This is what i do to add new view
//leftMargin calculation
int topMargin= Utils.pxToDp(20);
ImageView imageView = new ImageView(this);
imageView.setId(View.generateViewId());
constraintLayout.addView(imageView);
ConstraintSet set = new ConstraintSet();
set.clone(constraintLayout);
set.constrainWidth(imageView.getId(), ConstraintSet.MATCH_CONSTRAINT);
set.connect(imageView.getId(), ConstraintSet.TOP, eventsViewPager.getId(), ConstraintSet.BOTTOM, topMargin);
I am defining margin 20dp here, but it just adds a thin line over the view, and if i use margin around 400, then it gives me the desired result, there must be some mistake in conversion may be that i am making here.
This is how i convert values from px to dp
public static int pxToDp(int px){
return (int) (px / Resources.getSystem().getDisplayMetrics().density);
}
I think you should convert DP to pixel and not viceversa, use TypedValue for that like this:
int marginTopDp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20,
getResources().getDisplayMetrics());
I'm writing a custom view to be able to use custom XML attributes to set a view's margin and size based on these attributes, everything worked fine until i got to the part where children of ConstraintLayout get's their margins and size determined by custom values.
The margins doesn't make any difference and the view stays on the top left corner of its parent ConstraintLayout.
What could be the problem? (The Image should be 500PXs away from the screen boundaries)
if (hasCustomWidth || hasCustomHeight || hasCustomTopMargin || hasCustomRightMargin || hasCustomBottomMargin || hasCustomLeftMargin) {
if(((ViewGroup)getParent()) instanceof LinearLayout) {
LinearLayout.LayoutParams newLayoutParams = new LinearLayout.LayoutParams((int) Math.round(customWidth), (int) Math.round(customHeight));
ViewGroup.MarginLayoutParams marginLayoutParams = (ViewGroup.MarginLayoutParams) newLayoutParams;
marginLayoutParams.setMargins((int) Math.round(customLeftMargin), (int) Math.round(customTopMargin), (int) Math.round(customRightMargin), (int) Math.round(customBottomMargin));
setLayoutParams(newLayoutParams);
} else if(((ViewGroup)getParent()) instanceof ConstraintLayout) {
ConstraintLayout parentConstraintLayout = (ConstraintLayout)CustomAppCompatImageView.this.getParent();
ConstraintLayout.LayoutParams newLayoutParams = new ConstraintLayout.LayoutParams((int) Math.round(customWidth), (int) Math.round(customHeight));
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(parentConstraintLayout);
constraintSet.connect(CustomAppCompatImageView.this.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 500);
constraintSet.setMargin(CustomAppCompatImageView.this.getId(), ConstraintSet.LEFT, 500);
setLayoutParams(newLayoutParams);
constraintSet.applyTo(parentConstraintLayout);
parentConstraintLayout.invalidate();
} else {
throw new RuntimeException("no listed parent LayoutParams subclass!");
}
invalidate();
}
Result:
I found the solution: apparently Android doesn't take ConstraintSet.LEFT and ConstraintSet.RIGHT as proper arguments, and must be replaced with ConstraintSet.START and ConstraintSet.END.