Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ConstraintLayout: How to add several views programmatically?

I want to add 2 buttons to a ConstraintLayout. My current code is as following:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.activity_main);
    ConstraintSet set = new ConstraintSet();
    set.clone(layout);

    //Button 1: 
    Button button = new Button(this);
    button.setText("Hello");
    layout.addView(button);

    set.connect(button.getId(), ConstraintSet.LEFT, layout.getId(), ConstraintSet.LEFT, 0);
    set.connect(button.getId(), ConstraintSet.RIGHT, layout.getId(), ConstraintSet.RIGHT, 0);
    set.connect(button.getId(), ConstraintSet.BOTTOM, layout.getId(), ConstraintSet.BOTTOM, 0);
    set.constrainWidth(button.getId(), ConstraintSet.MATCH_CONSTRAINT);
    set.constrainHeight(button.getId(), 200);
    set.applyTo(layout);


    //Button 2:     
    Button newButton = new Button(this);
    newButton.setText("Yeeey");
    layout.addView(newButton);

    set.connect(newButton.getId(), ConstraintSet.BOTTOM, button.getId(), ConstraintSet.TOP, 0);
    set.connect(newButton.getId(), ConstraintSet.LEFT, button.getId(), ConstraintSet.LEFT, 0);
    set.connect(newButton.getId(), ConstraintSet.RIGHT, button.getId(), ConstraintSet.RIGHT, 0);
    set.constrainHeight(newButton.getId(), 200);
    set.applyTo(layout);

}

But I only get 1 visible button (the other is probably hidden behind this one), and it's in the top left corner of the screen. There's supposed to be 2 buttons, at the bottom of the screen, linked to each other.

What am I doing wrong here?

enter image description here

Desired outcome:

enter image description here

like image 723
Einar Avatar asked Jan 15 '17 21:01

Einar


People also ask

What is the constraintlayout class used for?

One nice feature of the ConstraintLayout class is its ability to chain views in a horizontal or vertical sequence and then configure how those views will be distributed across the screen.

What is the difference between constraintlayout and relativelayout?

How ConstraintLayout differs from RelativeLayout? In Constraint Layout, we have to add constraints to the view on all four sides whereas in Relative Layout we can simply align our UI component relative to its ID using the ids of UI components.

What is the difference between constraint layout and grid layout?

In Grid Layout the UI components are only arranged in Grid Manner and we cannot arrange the UI components according to requirement, whereas in Constraint Layout we can align UI components according to the requirement.

What is flow in constraintlayout?

In ConstraintLayout 2.0, the Flow virtual layout was introduced. If you’re unfamiliar with Flow, this blog post provides a simple introduction. The main benefits of using Flow are: Bingo. That’s exactly what I needed. We’ll start by creating the Flow instance and adding it to the ConstraintLayout.


1 Answers

Here is the working code of what you want to achieve

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.activity_main);
        ConstraintSet set = new ConstraintSet();
        set.clone(layout);

        //Button 1:
        Button button = new Button(this);
        button.setText("Hello");
        button.setId(100);           // <-- Important
        layout.addView(button);
        set.connect(button.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 0);
        set.connect(button.getId(),ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT,0);
        set.connect(button.getId(),ConstraintSet.LEFT,ConstraintSet.PARENT_ID,ConstraintSet.LEFT,0);
        set.constrainHeight(button.getId(), 200);
        set.applyTo(layout);


        //Button 2:
        Button newButton = new Button(this);
        newButton.setText("Yeeey");
        layout.addView(newButton);
        set.connect(newButton.getId(), ConstraintSet.BOTTOM, button.getId(), ConstraintSet.TOP, 0);
        set.connect(newButton.getId(),ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT,0);
        set.connect(newButton.getId(),ConstraintSet.LEFT,ConstraintSet.PARENT_ID,ConstraintSet.LEFT,0);
        set.constrainHeight(newButton.getId(), 200);
        set.applyTo(layout);


    }

Important:
If id is not set explicitly, all the elements will get the same id(-1).

like image 188
Darshan Soni Avatar answered Oct 05 '22 21:10

Darshan Soni