ZOFTINO.COM

Adding Views & Constraints to Android Constraint Layout Programmatically

Using constraint layout, you can create flat layouts. Like any other layouts in android, constraint layouts also can be created in code or defined in xml.

In this post, I am going to write about creating constraint layout in java.

To know more about constraint layout, properties of it, and layout editor to create constraint layouts, read constraint layout article.

While creating layouts in xml has its own advantages, like speed with which you can create layouts using layout editor, layout can be tested without running the app as layout editor displays how layout looks at runtime, and it is easy to enhance or reuse layouts due to separation of layout from code, creating layouts in java is useful when you need to provide dynamic user interface.

To create constraint layout in code, the main class that you need to use is ConstraintSet. Using ConstraintSet, you can add constraints, set bias, resize views, and create chains.

Instantiating Constraint Layout

To create constraint layout, you need to first instantiate ConstraintLayout object by passing context to constructor, then set id to it, and set content view for activity in onCreate() method of the activity.

        ConstraintLayout constraintLayout = new ConstraintLayout(this);
        constraintLayout.setId(R.id.mainL);
        setContentView(constraintLayout); 

Adding Widgets in Code

Then create view instance and set properties like text size, background etc. You can also set layout properties for the view. ViewGroup.LayoutParams contains layout settings of views, which are used by parents while views are laid out. The view can be added to constraint layout by calling addView() passing view object to it.

 TextView contactUs = new TextView(this);
contactUs.setText(R.string.contactus);
contactUs.setTextSize(25);
contactUs.setId(R.id.contactUs);

ConstraintLayout.LayoutParams clpcontactUs = new ConstraintLayout.LayoutParams(
        ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT);
contactUs.setLayoutParams(clpcontactUs);

constraintLayout.addView(contactUs);

Adding Constraints Using ConstraintSet

After adding views to constraint layout, you can add constraint to views. To add a constraint to a view, first you need to create an instance of ConstraintSet and then call clone() on the constraint set object passing constraint layout instance you created. Then call connect() method on the constraint set object. This method takes parameters such as id and side of the view you want to add constraint to, id and side of the target view for the constraint and constraint margin.

Below code adds constraints to textview widget. One constraint aligns the view to the top side of the parent and second one make it align to left side of the parent with constraint margin 18.

 ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(constraintLayout);

constraintSet.connect(contactUs.getId(), ConstraintSet.TOP, constraintLayout.getId(), ConstraintSet.TOP, 18);
constraintSet.connect(contactUs.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 18);

constraintSet.applyTo(constraintLayout);

Aligning Widget to the Center of Layout

If you want to horizontally align a widget to the center of the layout, you need to add two horizontal constraints like below. Similarly if you want to vertically align a view to center, use top and bottom sides in two vertical constraints.

constraintSet.connect(contactUs.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 18);
constraintSet.connect(contactUs.getId(), ConstraintSet.RIGHT, constraintLayout.getId(), ConstraintSet.RIGHT, 18);

Constraint Layout Bias Setting in Code

Bias comes into picture when you set constraints to two side of a view on the same axis. Default bias is 0.5 that is why view is displayed at center on that axis. You can change bias in code by calling setHorizontalBias method for horizontal adjustment or setVerticalBias method for vertical adjustment, on constraint set object passing view id and bias value.

constraintSet.connect(contactUs.getId(), ConstraintSet.TOP, constraintLayout.getId(), ConstraintSet.TOP, 18);
constraintSet.connect(contactUs.getId(), ConstraintSet.BOTTOM, constraintLayout.getId(), ConstraintSet.BOTTOM, 18);
constraintSet.setVerticalBias(contactUs.getId(), (float)0.2);

Constraint Layout Text Baseline Alignment in Code

To align text baselines of two views, you need to add baseline constraint to views by calling connect method on constraintset object and passing two view’s ids and ConstraintSet.BASELINE like below.

        TextView senderNameL = new TextView(this);
        senderNameL.setId(R.id.nameL);
        senderNameL.setText(R.string.name);
        senderNameL.setTextSize(20);

        constraintLayout.addView(senderNameL);

        EditText senderName = new EditText(this);
        senderName.setId(R.id.name);
        constraintLayout.addView(senderName);

        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);


        constraintSet.connect(senderNameL.getId(), ConstraintSet.TOP, contactUs.getId(), ConstraintSet.BOTTOM, 8);
        constraintSet.connect(senderNameL.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 8);

        constraintSet.connect(senderName.getId(), ConstraintSet.LEFT, senderNameL.getId(), ConstraintSet.RIGHT, 8);
        constraintSet.connect(senderName.getId(), ConstraintSet.RIGHT, constraintLayout.getId(), ConstraintSet.RIGHT, 8);

        constraintSet.connect(senderName.getId(), ConstraintSet.BASELINE, senderNameL.getId(), ConstraintSet.BASELINE, 0);

Adding Guideline and Constraint Relative to Guideline in Code

To add a guideline to constraint layout, you need to call create() method on the constraintset object passing id of the guideline to be created and orientation of guideline.

To set the margin for the guideline, you can call setGuidelineBegin() method or setGuidelineEnd() method on constraintset object passing guideline id and margin. For vertical guidelines, using these methods set left and right margins respectively and for horizontal guideline, these methods set top and bottom margins respectively.

        constraintSet.create(R.id.guideline, ConstraintSet.VERTICAL_GUIDELINE);
        constraintSet.setGuidelineBegin(R.id.guideline, 190);
Below is the code to add constraint to a view against a guideline.
constraintSet.connect(contactUs.getId(), ConstraintSet.LEFT, R.id.guideline, ConstraintSet.RIGHT, 18); 

Adding View Size Constraint in Code

To add width or height constraint to a view, you can call constrainWidth or constrainHeight methods of constraintset passing view id and value, either match_constraint or wrap_content.

 constraintSet.connect(submit.getId(), ConstraintSet.TOP, senderNameL.getId(), ConstraintSet.BOTTOM, 18);
constraintSet.connect(submit.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 18);
constraintSet.connect(submit.getId(), ConstraintSet.RIGHT, constraintLayout.getId(), ConstraintSet.RIGHT, 18);

constraintSet.constrainWidth(submit.getId(), ConstraintSet.MATCH_CONSTRAINT);
 

You can set dimension of a view as ratio by calling setDimensionRatio method.