Thunkable#5 - Checkbox Introduction and clear explanation

Hello friends, welcome to another thunkable tutorial of programming infinity. This tutorial is about the Check box in user interface section. The checkbox is an important component in android which is used to get multiple answers from the users. It is widely used in shopping apps, quiz apps etc. for getting user answers from multiple options. So let's begin to know about the checkbox..

CHECKBOX

The Checkbox is an user interface component which is a combination of check+box i.e. a box which is checked on click. It is used in groups for getting multiple answers from user. In thunkable we can customize checkbox in many ways like its border color, background color, text color and so on. we can implement checked change listener of it from the blocks section, which will find if a checkbox is checked or not. So, first we will know about the designer properties and after it , we will know about the blocks section.

Designer:-

• Background Color - sets the background color of the checkbox from the available list of colors.
• Checked - If checked, the checkbox will be initially checked on runtime, otherwise unchecked.
• Enabled - If checked, the checkbox will detect clicks from the user, means it will interacts with the user for being checked and unchecked, otherwise not.
• Font Bold - If checked, the text of the checkbox has bold style.
• Font Italic - If checked, the checkbox's text has italic style.
• Font Size - sets the font size of the checkbox's text from the input text box.
• Font Typeface  - sets the font style of the checkbox's text from the available text style.
• Font Typeface Import(.ttf) - It is same as previous properties, but the difference is that you can import custom text style(.ttf) and set it to the checkbox text.
• Height - sets the height of the checkbox from the available options. There are 3 options available as Automatic, Fill parent and a text box for custom height in pixels/percent.
• Width - sets the width of the checkbox from the available options.
• Outline Color - sets the outline color of the checkbox from the available options.
• Text - Sets the text of the checkbox.
• Text color - sets the color of the checkbox's text from the available colors
• Visible - If checked, the checkbox will be visible, otherwise invisible.

Width + Height :-

1. Automatic - automatically sets the width/height of the checkbox to wrap all the content within it.
2. Fill parent - sets the width/height of the checkbox to cover all the available horizontal/vertical space on the screen i.e. covers all the available space for width/height.
3. Custom size -  sets the height/width of the checkbox in pixels or percent.

Blocks:-

• When(Checkbox).Changed - It is the event listener for checkbox which fires when checkbox is checked/unchecked.
• When(Checkbox).Got Focus - It is the focus change listener which fires when the checkbox receives focus i.e user's finger is over the checkbox, making it possible to click.
• When(Checkbox).Lost Focus - It is the focus change listener, which fires when the checkbox loses its focus i.e. user's finger is away from the checkbox, making it no longer possible to click.
• (Checkbox).Background Color - It gives the background color of the checkbox as a color. you can set another elements background color directly with it. you had not to give the color for another component programatically.

• set(Checkbox).(Background Color).to - sets the background color of checkbox. you can use pre-defined color from the colors section, or you can make your custom color from rgb value as shown in below image.

• (Checkbox).Checked - returns true when checkbox is checked, otherwise false. Used with "if" statement.
• set(Checkbox).(Checked).to - sets whether the checkbox is to be checked/unchecked. takes true/false in which true means the checkbox is checked, whereas false means that the checkbox is unchecked.
• (Checkbox).Enabled - returns true when checkbox is enabled. Used with "if" statement.
• set(Checkbox).(Enabled).to - sets whether the checkbox will interacts with the user or not. takes true/false from the logic section, true means that the checkbox will interacts to the user, and false means checkbox is disabled and never interacts with user, until it is enabled.
• (Checkbox).Font size - returns the checkbox text' font size. Can be used for setting another text size as used in colors.
• set(Checkbox).(Font size).to - sets the checkbox text's font size. used with math empty block with custom size.
• set(Checkbox).(Font Typeface Import (.ttf)).to - sets the custom imported text style to checkbox text.
• (Checkbox).Height - returns the height of the checkbox. used with another component for setting its width/height as used in colors.
• set(Checkbox).(Height).to - sets the height of the checkbox. used with empty math block with custom value.
• set(Checkbox).(Height percent).to - sets the height percent of the checkbox in comparision to whole screen's height i.e. 50% means it will cover the half of the screen. used with empty math block.
• (Checkbox).Outline Color - returns the color of the outline of checkbox. can be used to set color of another component as previously used.
• set(Checkbox).(Outline Color).to - sets the checkbox outline color from the pre-defined colors or can make custom colors with rgb value.
• (Checkbox).Text - returns the value of the checkbox's text as a string.
• set(Checkbox).(Text).to - sets the text of the checkbox. used with empty text form the text section.
• (Checkbox).Text Color - returns the color of the checkbox's text. used to set the color of another components as used in (Checkbox).Background Color .
• set(Checkbox).(Text Color).to - sets the color of the checkbox's text.
• (Checkbox).Visible - returns true if checkbox is visible, otherwise false. Used with "if" statement.
• set(Checkbox).(Visible).to - sets the checkbox visibility. takes true/false from the logic section, true means that the checkbox is visible, false means that the checkbox is invisible.
• (Checkbox).Width - returns the width of the checkbox. Can be used for setting another components width/height.
• set(Checkbox).(Width).to - sets the width of the checkbox. Math's empty block with custom value is used along with this for setting its width.
• set(Checkbox).(Width percent).to - sets the width percent of the checkbox.
• (Checkbox) - returns the checkbox component used.

Note - The properties set in the designer section can be overrided by the blocks section. i.e. If checkbox background color is blue in the designer section, whereas blue in blocks section. In runtime, the checkbox has blue background color.