Thunkable #1 | Button designing and blocks explanation

Hello friends, Welcome to the first tutorial of Programming Infinity. In this tutorial, we will know about the Thunkable, its use and know about the Button which is a  element of User Interface of Thunkable. We will also create a app as an example which links a button with Page i.e. When a button is click a new screen/activity is opened.

THUNKABLE

Thunkable is a Online Platform, which is used to create Android/IOS App without Coding. It is almost similar to MIT App Inventor, but the unique feature of Thunkable, which overcomes it as a best Online Platform for Creating Android Application without Coding. The features that is only in the Thunkable Includes Admob Banner & Interestial Ads, Push Notifications and many more. These features helps the developer to create a Professional App which is best suited for Users.

Website Link - https://thunkable.com/

BUTTON

Thunkable allows the user to design the app using drag and drop the elements (Components in Palette of Thunkable Dashboard). Every element is properly arranged according to some common factors. Today, we will know about the Button, which is a element of the User Interface of Thunkable Dashboard. Button is a element which has the ability to detect clicks. Now, let's know, how to customize and design a button and add some code for button to work through an example.

EXAMPLE APP

The App which will be made by us, links a button with a Page/Activity i.e. when a button is click  a new Page/Activity will open. The app is developed in two stages designing and coding. The designing includes decorating a button that is best suited according to the theme of app and coding means adding the life to button i.e. giving it ability to detect clicks.

PROPERTIES OF BUTTON - 

1) Designer-

> Background Color - Sets the background color of button.
> Enabled - If Checked, button is able to detect clicks otherwise not.
> Font Bold - If Checked, sets the Bold style to button text.
> Font Italic - If Checked, sets the Italic Style to button text.
> Font Size - Sets the text-size of button text.
> Font Typeface - Sets the font-family of button text from the option available. (Roboto Regular, Roboto Thin, Sans Serif, Serif, and Monospace. )
> Font Typeface Import (.ttf) - Do the same function as of previos property, but the only difference is that you had not any default font provided in this property. you had to import a .ttf format font from your desktop and that font-family is applied to button text.
> Height - Sets the height of the button.
> Width - Sets the width of the button.
> Image - you can upload any image from your computer and it will automatically applies that image as background image of button by neglecting the background color, height and width.
> Shape - Sets the shape to the button from the options available. The default is rectangle. When an Image is assigned to a button, this property will never work.
> Show Feedback - If checked, shows visual feedback for a button with an image displayed.
> Text - Sets the text which is displayed on Button.
Note: If image is assigned, remove the text, otherwise text is displayed on Image, that may look weird.
> Text Color - Sets the color of the text from the options available. The Default is Black.
> Text Alignment - Sets the Alignment of the button text. The default is center which is recommended.
> Visible - If checked, Button will be visible on the Android Screen otherwise Invisible.  

2) Blocks - 

> Click - Used to detect whether a button is click i.e. user tapped and released the button.
> Got Focus - User is about to click the button i.e. User's finger is over the button, making it possible to click.
> Long Click - User pressed the button for a long time i.e. used to detect long clicks.
> Lost Focus - User's finger is away from the button, making it no longer possible to click.
> Touch Down - User tapped down the button i.e. user pressed the button.
> Touch Up - User released the button.