ConstraintLayout: Adding components programmatically.

Step by step adding a component to ConstraintLayout.

Vladislav Shesternin
5 min readDec 19, 2020
Programmatically adding components to ConstraintLayout

In this step-by-step tutorial, you will learn how to add UI components to ConstraintLayout.

The example uses viewBinding.

What should happen:

Perform step by step:

Step 1: Project creation

Сreate EmptyProject with root ConstraintLayout (id = constraint_layout):

EmptyProject | root ConstraintLayout

Step 2: Component creation

In folder app -> res -> layout create a file button (tools: works only for preview), and in this file create a button:

Path | Button | Preview

Step 3: The concept of programmatically adding components to the ConstraintLayout

Hide the vertical line in AndroidStudio:

Editor -> General -> Appearance -> Show hard wrap guide

Open MainActivity and create a method for adding components UI to ConstraintLayout:

Explanation by lines of code:

13. binding — To get a layout containing ConstraintLayout.

16. increment — To change id.

18. lastID — To get the last id.

30. layout — To get ConstraintLayout to which will be added components UI.

31. button — To get Button to be added to ConstraintLayout.

33. button.id — To change id.

35. addView — to add a component.

37. set — initialization ConstraintSet.

38. clone — clone the current layout.

39. also — we use a short name instead of a long name.

40. connect — constrain the component. (1 param — who to attach,

2 param — which side to attach, 3 param — to whom to attach, 4 patam -which side to attach).

41. if — attach the first component to the top.

43. else — to attach other components to the previous ones.

48. applyTo — apply modified layout.

Step 4: Add component onClick

Add View.OnClickListener, create a listener initialization method and add it to onClick:

OnClickListener | initListener | call initListener

Create a method:

Add Button

Implement onClick:

onClick

Run the application:

Application

Step 5: Adding a component when clicking on an existing component

Foreword: there will be an error in this step, but we will find a SOLUTION.

Add a button to activity_main:

activiti_main | preview

Attach a listener to a button:

btn | onClickListener

Run the application:

Application

As you can see, the initial button has lost its limitations, and this is normal, in the next step We will SOLVE this problem.

Step 6: Solving the problem of losing restrictions by parent components

Of course, the very first thing that comes to mind is just to add constraints to the root component along with the external components, BUT this is a VERY BAD IDEA.

WHY !!!???

Everything is very simple, imagine that you have not only a button but also 5–6 components. It turns out that everyone will have to write the old restrictions.

WHAT TO DO !!!???

Just read on =)))

SOLUTION — components will be added not to the parent ConstreintLayout but to the external:

In folder app -> res -> layout create a file constraint_layout:

Path | constraint_layout

Include constraint_layout in activity_main:

constraint_layout | activity_main

Slightly change the method of adding components:

before | after

Run the application:

Application

Step 7: Attaching a listener to external components

In activity_main add TextView:

TextView | preview

Change activity_main:

Button | preview

Change increment:

Increment

Slightly change the method of adding components:

before | after

Run the application:

Application

Conclusion:

This example is good for adding every, ABSOLUTELY every component to kccclll, as well as events — the example is suitable for every, ABSOLUTELY every event.

Make your application beautiful.

Love what you do and EXPERIMENT !!!!))).

If you have any questions, you can ask them personally to Me at Twitter.

--

--