Added View programmatically to Constraint Layout jumps to origin

Question

I'm doing some animations in android and I have players inside a soccer court. For some of the elements I want to add a label, add some constraints to group them with their respective view and when the animation starts have the labels sort of follow them around.

I've tried this two solutions but the textview keeps jumping to the origin of the constraint layout:

How to programmatically add views and constraints to a ConstraintLayout?

Add a view programmatically in ConstraintLayout

I've tried A LOT of variations for these solutions with no luck. I'm missing something of course...any thoughts would be greatly appreciated!

My code where I create the views:

   //init imageview
                ImageView imageView = new ImageView(this);
                imageView.setId(View.generateViewId());
                imageView.setTag(key);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                //buscar el drawable correspondiente
                imageView.setImageDrawable(setViewDrawable(vista));
                imageView.setOnLongClickListener(this);
//set width and height of the view
                Pair<Integer, Integer> widthAndHeight = getWidthAndHeight(key);
                //set ancho y alto
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(widthAndHeight.first, widthAndHeight.second);
                imageView.setLayoutParams(params);
                mTacticLayout.addView(imageView);
                //set position
                if (!isEdit) {
                    Pair<Float, Float> xAndY = getViewXY(key);
                    Float rotation = getViewRotation(key);
                    //account for offsets
                    imageView.setX(xAndY.first - widthAndHeight.first / 2);
                    imageView.setY(xAndY.second - widthAndHeight.second / 2);
                    imageView.setRotation(rotation);
                }

//HERE HERE HERE LOOK AT ME  
       if(imageView.getTag().toString().equals(r.getString(R.string.ball_tag))){
                    TextView textView = new TextView(this);
                    textView.setId(View.generateViewId());
                    textView.setText("My View");

                    mTacticLayout.addView(textView);
                    ConstraintSet set = new ConstraintSet();
                    set.clone(mTacticLayout);
                    set.connect(textView.getId(), ConstraintSet.TOP, imageView.getId(), ConstraintSet.BOTTOM, 0);
                    set.connect(textView.getId(), ConstraintSet.RIGHT, imageView.getId(), ConstraintSet.RIGHT, 0);
                    set.connect(textView.getId(), ConstraintSet.LEFT, imageView.getId(), ConstraintSet.LEFT, 0);
                    set.applyTo(mTacticLayout);
                }

That kinda somewhat difficult but define a group in XML and view through code to that group view — Ankit Tale, Jul 21 '18 at 18:54

score 0 · Answer 1 · answered Jul 21 '18 at 19:37

0

setX() does the following according to the documentation:

Sets the visual x position of this view, in pixels. This is equivalent to setting the translationX property to be the difference between the x value passed in and the current left property.

setTranslationX() does this also according to the documentation:

Sets the horizontal location of this view relative to its left position. This effectively positions the object post-layout, in addition to wherever the object's layout placed it.

setY() and setTranslationY() do the same for the y coordinate.

The key phrase here is post-layout. Your ImageView is being placed at the top/left because it has no constraints. The TextView is placed on the ImageView according to its constraints, so it is also placed in the top/left. Now that both views are laid out in the top/left, the ImageView is shifted according to setX() and setY() leaving the TextView behind.

There are a couple of approaches to fixing this. Probably the easiest is to apply the same translation that was applied to the ImageView to the TextView.

answered Jul 21 '18 at 19:37

Cheticamp

61,413
10
78
131

I'll give it a go! Would the label move when the animation starts? What would your guess be? – Miguel Lasa Jul 21 '18 at 19:54
@Koopa Can't say if it would follow in the animation or not. – Cheticamp Jul 21 '18 at 20:01
So after applying the translation to the TextView the label is placed correctly underneath the ImageView. However after setting up the animation (which involves a drag and drop of the ImageView) the label doesn't follow the ImageView. The margins of the label stay at zero the entire time (maybe was "hoping" the margins adapted and somehow I could fix that). – Miguel Lasa Jul 21 '18 at 20:17
1

@Koopa That would be the next problem. If the `TextView` and the `ImageVIew` are always together, you may want to consider a [`compound control'](https://developer.android.com/guide/topics/ui/custom-components#compound). – Cheticamp Jul 21 '18 at 20:45
Hmm, never used them. I'll take a look and see if it suitable for my case, specially taking into account my views have drag and drop as well as rotation interactions. Cheers. – Miguel Lasa Jul 22 '18 at 17:11

Added View programmatically to Constraint Layout jumps to origin

1 Answers1