Thunkable #3 - Layouts Introduction and clear explanation

Hello friends, Welcome to Programming Infinity another thunkable tutorial. In this tutorial, we will learn about Layouts. We will learn more about it by creating a app as example which contains all the layouts. So friends, let's begin to know everything about layouts..

LAYOUTS

Layout is a useful component for android development. It is used to hold all the components within it at desired place. In Thunkable, there are total of 5 types of layouts. These layouts are Horizontal layout, Horizontal scroll layout, Table layout, Vertical layout and Vertical Scroll layout. Now let's know about each of these in detail.

HORIZONTAL LAYOUT

The name of this layout suggests it to be a layout which is used to align components horizontally i.e. It is used to align the components side-by-side or in one line drawn from left to right or from right to left.

HORIZONTAL SCROLL LAYOUT

Horizontal scroll layout is a type of layout which is same as horizontal layout, but the things that makes difference between both is the scrolling behaviour of this layout horizontally. This layout can hold more number of components within it than the horizontal layout, and on real device, you can scroll this and see all the components embedded in it. The best example of this layout, you can see on the google play store app, just below the tabs.

VERTICAL LAYOUT

Vertical layout is a type of layout which is used to hold the components within it vertically i.e. It holds the components in row wise, means one over another. If we compare this with the horizontal layout, then everything is same, except the behaviour of holding components. This means that the customization property will be same as of horizontal layout, that we see at last.

VERTICAL SCROLL LAYOUT

If we had understand vertical layout properly, then we had no any problem to understand the vertical scroll layout. As the name suggests, that it is a combination of vertical layout and scroll view i.e It is a layout which holds the components vertically (one over other) and It can holds more components than the vertical layout, and show the components on scrolling.

TABLE LAYOUT

Table layout is a type of layout which has the property of Horizontal layout as well as vertical layout i.e. It is a table like in excel and had rows and columns in it. This layout is not scrollable, but it can hold maximum number of components than other layout easily as shown in above image. The more of table layout can be easily understand from the below statement:-

Table layout = Horizontal layout (Columns wise) + Vertical Layout (Row wise)

PROPERTIES

Here, Button = Any Visible Components.

For Horizontal layout, Horizontal Scroll layout, Vertical layout and Vertical Scroll Layout...

1) Align Horizontal:- This property is used to set the alignment of item horizontally i.e. If a button is added in the layout then, by default, it is aligned at the center, which means the button will be at the center of the layout. This property has 3 options as Center, Left and Right. The center is used for aligning the button to the center of the layout, Left is used for aligning the button to left of layout, means the button will go to the start of the layout, Right is used for aligning the button to right of layout, means the button will go to the end of the layout.

For Horizontal layout, Horizontal Scroll layout, Vertical layout and Vertical Scroll Layout...

2) Align Vertical:- This property is same as align horizontal, but the only difference is that it aligns the components vertically i.e. If a button is added in the layout and the height of the layout is more than the height of button, then this property, by default, will align the components to center-vertical as shown in below image. This property has 3 options as Top, center and bottom. Top is used to align the component to the top of layout, Center for aligning the button to center of the layout and Bottom will align the component to the bottom of the layout.

For Horizontal layout, Horizontal Scroll layout, Vertical layout and Vertical Scroll Layout...

3) Background Color:- It is used to set the background color of the layout from the available list of colors.

For Horizontal layout, Horizontal Scroll layout, Table layout, Vertical layout and Vertical Scroll Layout...

4) Height:- It is used to set the height of the layout. There are 3 options available for this, as, Automatic, fill parent and you can also define your custom height in given text box in pixels or percent.

• Automatic - automatically sets the height of the layout to properly fits the components inside it i.e. If a button is added in this layout, then the height of this layout will be the height of the button and when two button is added vertically, then the height of the layout will be the sum of the height of buttons placed vertically over one another.
• Fill Parent - This will set the height of the layout to cover all the available height on the screen.

For Horizontal layout, Horizontal Scroll layout, Table layout, Vertical layout and Vertical Scroll Layout...

5) Width:- It is used to set the width of the layout. There are 3 options available for this, as, Automatic, fill parent and you can also define your custom width in given text box in pixels or percent.

• Automatic - automatically sets the width of the layout to properly fits the components inside it i.e. If a button is added in this layout, then the width of this layout will be the width of the button and when two button is added horizontally, then the width of the layout will be the sum of the width of buttons placed side-by-side.
• Fill Parent - This will set the width of the layout to cover all the available width on the screen.

For Horizontal layout, Horizontal Scroll layout,Vertical layout and Vertical Scroll Layout...

6) Image:- It is used to set the background image of layout. 

For Horizontal layout, Horizontal Scroll layout, Table layout, Vertical layout and Vertical Scroll Layout...

7) Visible:- If checked, the layout and its inner components will be visible, otherwise, Invisible.

For Table Layout...

8) Columns - Sets the number of columns for the table layout i.e. Number of  components that can be added horizontally (side by side).

For Table Layout...

9) Rows - Sets the number of rows for the table layout i.e. Number of columns that can be added vertically (one over another).
So friends, that's all for today friends. Hope you enjoyed this tutorial, If you had got any problem in this tutorial or had any question, then ask me in comment box.