Press enter to see results or esc to cancel.

Lesson 19 – Layout (TableLayout) in Kotlin Example

Share this
()

The Layout of type TableLayout groups components into rows and columns. A TableLayout contains a set of TableRow-like components that group visual components for each row (each row can have a different amount of visual components)

Problem:

Have 9 buttons in the form of a TaTeTi board. Use one TableLayout, three TableRow and nine buttons.

First, create Project021 and go to the Layout tab, identify the component “TableLayout” and drag it into the visual interface, then drag three objects of type TableRow into the TableLayout:

Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example -

After this we have the whole screen covered with a component of type “TableLayout”, now we have to start to arrange each of the buttons in each row.

The easiest way is to drag the buttons not to the design view but to the “Component Tree” window to the corresponding row:

Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example -

We must drag each of the 9 buttons to the respective TableRow:

Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example -

Another possibility given by this Layout is that a control expands more than one cell.
Arrange a fourth “TableRow” from the “Layouts” tab and add a button in the fourth row of the TableLayout:

Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example -

Now select the button and load a 3 in the property “layout_span”:

Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example - Lesson 19 - Layout (TableLayout) in Kotlin Example -

…..

How useful was this Lesson?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this post.!

As you found this post useful...

Follow us on social media!

We are sorry that this lesson was not useful for you!

Let us improve this lesson!

Tell us how we can improve this lesson?

Share this