Android - Setting constraints to newly added imageviews and textviews

Question

I have a constraint layout view where I add circleimageviews and text views programmatically, However, when I do that, the UI is not affected at all, I cannot find the mistake and I would appreciate it if anyone would help me with that issue.

I use a function to add all image views and text views to my layout, after that I call another function to set the constraints I need.

Regarding my design for the UI, I want to display the image views as a table consisting of 3 columns, and rows are determined during run time, I do that by placing them next to each others and below each others if needed using constraint set. And above each image view is the name inside the text view

Here's my code:

private void initializeFriendsInImageViews(){
    friendsImageViews=new ArrayList<ImageView>();
    friendNamesTextViews=new ArrayList<TextView>();

    //Initializing Layout params
    ConstraintLayout.LayoutParams textViewLayoutParams = new ConstraintLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    ConstraintLayout.LayoutParams circleImageViewLayoutParams = new ConstraintLayout.LayoutParams(220, 220);

    //Declaring both views
    CircleImageView friendPic;
    TextView friendName;

    for(int i=0; i<countFriends; i++) {
        //Initializing both views
        friendPic = new CircleImageView(getActivity());
        friendName = new TextView(getActivity());

        //Setting IDs
        friendPic.setId(i);
        friendName.setId(countFriends+i);

        //Setting layout params
        friendPic.setLayoutParams(circleImageViewLayoutParams);
        friendName.setLayoutParams(textViewLayoutParams);

        //Setting border
        friendPic.setBorderColor(ContextCompat.getColor(getActivity(), R.color.border_grey));
        friendPic.setBorderWidth(8);

        //Load friend picture into imageview
        Picasso.with(getActivity()).load(Uri.parse(friendsPicURLs.get(i))).transform(new CircleTransform()).into(friendPic);

        //Load friend name into text view
        friendName.setText(friendNames.get(i));

        //add image view to list of image views
        friendsImageViews.add(friendPic);
        //add text view to list of text views
        friendNamesTextViews.add(friendName);

        //Add image view to my layout
        friendsConstraintLayout.addView(friendPic);
        //Add text view to my layout
        friendsConstraintLayout.addView(friendName);
    }
    addConstraints();
}

private void addConstraints(){
    //Initializing constraint set
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(friendsConstraintLayout);
    for (int i=0;i<countFriends;i++){
        //positioning a new row of friends (circle image views)
        if (i==0){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsConstraintLayout.getId(),ConstraintSet.LEFT,15);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsConstraintLayout.getId(),ConstraintSet.TOP,15);
        }
        else if ((i+1)<=3){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i-1).getId(),ConstraintSet.RIGHT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsImageViews.get(i-1).getId(),ConstraintSet.TOP);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.BOTTOM,friendsImageViews.get(i-1).getId(),ConstraintSet.BOTTOM);
        }
        else if ((i+1)>3){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i-3).getId(),ConstraintSet.LEFT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.RIGHT,friendsImageViews.get(i-3).getId(),ConstraintSet.RIGHT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsImageViews.get(i-3).getId(),ConstraintSet.BOTTOM);
        }

        //positioning friend names
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i).getId(),ConstraintSet.LEFT);
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.RIGHT,friendsImageViews.get(i).getId(),ConstraintSet.RIGHT);
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.BOTTOM,friendsImageViews.get(i).getId(),ConstraintSet.TOP);
    }
    //Apply Constraints
    constraintSet.applyTo(friendsConstraintLayout);
}

Answer 1

You need to create a new set of layout params each time you add a view. Each successively added view is trouncing the layout params for previously added views. Do something like to following:

//Setting layout params
circleImageViewLayoutParams = new ConstraintLayout.LayoutParams(220, 220);
friendPic.setLayoutParams(circleImageViewLayoutParams);
textViewLayoutParams = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT);
friendName.setLayoutParams(textViewLayoutParams);

Although this may not be causing you a problem now, it may in the future: I would avoid using zero as an id.