Layout Properties Text Properties Image Properties View Properties SeekBar Properties layout_width layout_height orientation text_size text_style input_type ime_option spinnerMode scale_type resource gravity layout_gravity single_line lines enabled clickable checked text_color hint_color background_color background_resource text hint weight weightSum ID rotate padding margin dividerHeight choiceMode image alpha max progress translationX translationY scaleX scaleY customView Intent is used to start a new Activity File is used to save data locally Calendar is used to calculate time and date Vibrator is used vibrate the device Timer is used to delay certain actions SoundPool is used to play short sound effects MediaPlayer is used to play big sound files Dialog is used to create a pop-up ObjectAnimator is used to animate certain properties of a View On activity create MoreBlock On back button press On activity start-up complete On activity becoming visible On activity no longer visible onClick onCheckChanged onItemSelected onTextChanged onProgressChanged onStartTrackingTouch onStopTrackingTouch onPageStarted onPageFinished onAnimationStart onAnimationEnd onAnimationCancel onItemClicked onItemLongClicked onBindCustomView Define When On activity create On back button press On activity start-up complete On activity becoming visible On activity no longer visible clicked checkChanged itemSelected textChanged pageStarted pageFinished progressChanged onStartTrackingTouch onStopTrackingTouch onAnimationStart onAnimationEnd onAnimationCancel itemClicked itemLongClicked onBindCustomView All Variable List Control Math Operator View Component More Block set to set to increase 1 decrease 1 set to add to insert at to get at of index in contains add to insert at to get at of index in contains add key value to insert key value at to get value at key of set key value at to contains at key delete at of length of clear repeat forever stop if then if then else true false < = > and or not + - * / % pick random to length of join and index of substring to equals contains replace all with replace first RegEx with replace all RegEx with toNumber trim toUpperCase toLowerCase toString without decimal toString with decimal toDecimalFormat add source directly getDip getDisplayWidthPixels getDisplayHeightPixels PI(π) E(e) to the power minimum of and maximum of and square root of absolute value of round ceil floor sin cos tan arcsin arccos arctan exp ln log Degree to Radian Radian to Degree When clicked setEnable getEnable setVisible setClickable setText getText setBackgroundColor setBackgroundResource setTextColor setImage setRotation getRotation setAlpha getAlpha setTranslationX getTranslationX setTranslationY getTranslationY setScaleX getScaleX setScaleY getScaleY setChecked getChecked setThumbResource setTrackResource setListViewData setListCustomViewData setSpinnerData setSelection getSelection setProgress getProgress setMax getMax refreshData refreshData loadUrl getUrl setCacheMode canGoBack canGoForward goBack goForward clearCache clearHistory stopLoading zoomIn zoomOut setAction setData setScreen putExtra key value setFlagss StartActivityt Activity getExtra key Finish Activity getData key setData key value removeData key getNow add value set value Format Difference - vibrate for ms after ms after ms for every ms cancel set title set message show dismiss OK Button Clicked Cancel Button Clicked Neutral Button Clicked create start pause seek to get current duration get song duration reset release is playing set looping is looping create max stream count SoundID : load StreamID : play Sound ID 1 + times stop stream ID set target set property set value set values from to set duration set repeat mode set repeat count set interpolator start cancel is running Toast copyToClipboard Activity set title An index is either negative or greater than or equal to the size of the list A number cannot be divided by zero An index is either negative or greater than the size of the string Thrown to indicate that the application has attempted to convert a string to one of the numeric types Unreachable statement or stop block outside repeat block or forever block Occurred when parameters of Intent is invalid Join two conditions Set the specified variable to the condition Boolean variable The condition for checking if two strings are equal The condition for checking if the string contains a value Replaces all string value to the given value False condition A loop that will never end\n* this must be used with stop block Get the text the widget is displaying the enabled status for the widget Check the condition\n - if the condition is true, the blocks inside the first C will activate,\nand if the condition is false, the blocks inside the second C will activate Check the condition\n - if the condition is true, the blocks inside it will activate When application is executed, the block activates Sets the specified variable to the number Number variable The two values put right next to each other The length of the string Add an item to the list (the item goes at the bottom of the list of items) with the specified content in it Clear the list The condition for checking if an item\'s content is the specified value Deletes the item off the list Gets the item\'s value The position value of the item Adds an item to the list (the item goes where you specify in the list of items) with the specified content in it. How many items there are in the specified list Add a (String, String) Map to the list of Maps Insert a (key, value) pair into a Map at a certain index of the Map List Modify a (key, value) pair inside a Map at a certain index of the Map List Check if the Map at a certain index of the Map List contains a key Gets the (key, value) pair from the Map at a certain index of the Map List The value of the division The remainder of the division The condition for checking if two values are equal The condition for checking if a value is greater than the other The condition for checking if a value is less than the other The value of the subtraction The value of the multiplication The value of the addition Make the condition checked if it is false, not true Join two conditions, but they function separately Pick a random number between the two limits A loop that repeats for the specified amount Set the background color for the widget Set the enabled state of the widget Set selected image as the content of the ImageView Set the text of the widget Set the text color of the widget Display the text in notification popup Stop the wrapped loop The first index of the given string, or -1 Set the specified variable to the string String variable A string containing the given subsequence of the string Converts to number Converts to string True condition Returns a string with no spaces at the beginning or end Set the Intent action to be performed\nIntent : a component for load a Activity(view)\n-ACTION_CALL : Perform a call to someone specified by the data(permission:CALL_PHONE)\n-ACTION_DIAL : Dial a number as specified by the data(no permission)\n-ACTION_VIEW : Display the data to the user\n*You need to add \'Intent\' in [Component] to use this Set special conditions controlling how this intent is handled\n-SINGLE_TOP : Views are usually maintained like a deck of cards, stacked on top of each other. This block makes the application manage views in a way that if the view you’re about to transition to was already called before, it would bring that view to the front rather than putting a new view on top.\n-CLEAR_TOP : Clears all the previous views under the current view.\n *You need to add \'Intent\' in [Component] to use this Set the data this Intent is operating on\n-ACTION_CALL : must start with "tel:"\n (EX:"tel:021111111)\n-ACTION_DIAL : must start with "tel:"\n (EX:"tel:021111111)\n-ACTION_VIEW : must follow URL form starting with "http:" or "https:"\n (EX: "http://google.com")\n *A run-time error may occur if you don\'t follow the recommendation\n *You need to add \'Intent\' in [Component] to use this Set the Activity(View) to be performed\n*You need to add \'Intent\' in [Component] to use this Bind the data to Intent\n*Send to Activity with key : value format\n*Intent can have multiple keys and values\n*You need to add \'Intent\' in [Component] to use this Get the data from Intent\n*Only the value saved by Intent PutExtra block can be retrieved\n*Get the empty string("") when the key does not exist\n*You need to add \'Intent\' in [Component] to use this Launch a new Activity by Intent\n*A run-time error may occur if the Intent parameters is invalid\n*You need to add \'Intent\' in [Component] to use this Finish the current Activity Retrieve a value from the preference file\nThe value saved by File SetData block can be retrieved\n*You need to add \'File(Shared Preference)\' from [Component] to use this Set a value in the preference file\n*Application can have multiple files and a file can have multiple values\n*the keys in the file must be unique. If same key is used several times, only the latest saved value is accessible \n*format - key : value\nEx) key : new_memo , value : hello\n*You need to add \'File(Shared Preference\' from [Component] to use this remove file data with the following key Get the current date and time\n*You need to add \'Calendar\' from [Component] to use this Add the given amount of time to the Calendar field\n*Positive Value : adds time\n*Negative Value : subtracts time\n*You need to add \'Calendar\' from [Component] to use this Set the Calendar field to a specific value\n*You need to add \'Calendar\' from [Component] to use this Format the Calendar as a string using the pattern\nYear(y) | Month(M) | Day(d)\nHour(h) 1~12 | Hour(H) 0~23 | Minute(m) | Second(s)\nEx : yyyy-MM-dd hh:mm:ss ( 2106-01-01 03:01:02 )\nEx : yyyy-MM-dd HH:mm:ss ( 2106-01-01 15:01:02 )\nEx : yyyy-MM-dd ( 2106-01-01 )\nEx : hh:mm:ss ( 12:01:02 )\n*A run-time error if the given string format is invalid\n*You need to add \'Calendar\' from [Component] to use this Get the differences between the given calendars (time)\nUnit : milliseconds\n*You need to add \'Calendar\' from [Component] to use this Increment Value by 1 Decrement Value by 1 Refresh Spinner\nRefresh List Item using Spinner Set Spinner Data\nData Format: String Select a spinner item at a given index\nSetting an index greater than the number of items in the spinner will result in runtime error Get the index of selected spinner item\nIndex starts from 0 Set ListView Data\nSetting the data for a ListView\nData Format: String Inflate the CustomView layout to an item Refresh ListView\nRefresh the ListView data Set the value of a ListView item at a given index\nOnly Works when the ChoiceMode for the ListView is either single or multi\nSetting an index greater than the number of items in the ListView will result in runtime error Get the index of selected ListView item\nOnly Works when the ChoiceMode for the ListView is either single or multi Get an array of indices for the selected ListView items\nOnly Works when the ChoiceMode for the ListView is either single or multi Get the number of selected ListView items\nOnly Works when the ChoiceMode for the ListView is either single or multi Get the status of a checkbox\nTrue if checked, else false Set the status of a checkbox\nChecked if set true, else unchecked Set the rotation on a widget Get the rotation of a widget Set the alpha value of a widget Get the current alpha value of a widget Set the translation X value of a widget Get the current translation X value of a widget Set the translation Y value of a widget Get the current translation Y value of a widget Set the scale X value of a widget Get the current scale X value of a widget Set the scale Y value of a widget Get the current scale Y value of a widget Set the visibility of a widget\nVisibility Properties\n- VISIBLE : This view is visible\n- INVISIBLE : This view is invisible, but it still takes up space for layout purposes\n- GONE : This view is invisible, and it doesn\'t take any space for layout purposes Vibrate for the set amount of time\n- Time Unit: millisecond\n* You need to add \'Vibrator\' from [Component] to use this Execute the blocks after a set time period\n- Time Unit: millisecond\n* You can only set one task per timer\n* You need to add \'Timer\' from [Component] to use this Execute the blocks after a set time period for every set time period\n- Time Unit: millisecond\n* You can only set one task per timer\n* You need to add \'Timer\' from [Component] to use this Cancels the designated timer task\n- Time Unit: millisecond\n* You need to add \'Timer\' from [Component] to use this Replaces the first string value with the given value Replaces all the string value with the given value Changes all the characters to uppercase value Changes all the characters in the string to lowercase Converts the number to a string including the decimal value Used to format numbers to a certain decimal place. \nEx: Formating numbers to a 2 decimal places takes in the input of 0.00 Value of Pi, 3.14159... Value of e, 2.71828... Calculate nth power of the given value Calculate the smaller value between two values Calculate the bigger value between two values Calculate the square root of the given value Calculate the absolute value of the given value Round the given value up or down Round the given value up Round the given value down Calculate the sine function of the given value Calculate the cosine function of the given value Calculate the tangent function of the given value Calculate the arcsine function of the given value Calculate the arccosine function of the given value Calculate the arctangent function of the given value Calculate the exponential function of the given value Calculate the natural log of the given value Calculate the log based 10 of the given value Convert the given value to Radian from Degree Convert the given value to Degree from Radian Calculate device\'s dip(dp) value using the input Retrieve the device\'s width size in pixels Retrieve the device\'s height size in pixels Load the url to the WebView Retrieve the url of the current WebView Enable or disable saving cache Check if previous page is available Check if there is next page available Go back to the previous page Go forward a page Clear cache from websites Clear previous browsing history Force stops the load Zoom in to the WebView Zoom out from the WebView Set the title for the current Activity Set the tile for the current Dialog Set the body message for the Dialog Determine the action for OK Pressed Determine the action for Cancel Pressed Determine the action for Neutral Button Pressed Show the Dialog Programatically close the Dialog Initialize the MediaPlayer with a sound Start the MediaPlayer Pause the MediaPlayer Seeks the MediaPlayer to given milliseconds Get the current duration in milliseconds Get the duration of the sound in milliseconds Check if MediaPlayer is playing Enable or disable loop for the sound Check if the sound is on loop Reset the MediaPlayer to initial state, seeking to 0 milliseconds Release the sound the MediaPlayer is holding onto Initialize how many sounds the pool can hold Load the pool with a sound. Returns the soundID (number) Play the sound with the matching soundID. Returns the streamID (number) Stops the sound with the matching streamID Sets the progress value of the SeekBar Retrieves the current value of the SeekBar Sets the maximum value of the SeekBar Retrieves the current maximum value of the SeekBar Set the desired target for animation Set the desired animation property Set the desired value for the property Set the initial and result value for the animation Set the duration for the animation Set if the animation should repeat or not Set how many times the animation should repeat Set the type of interpolator for the animation Start the animation Cancel the animation Check if the animation is running Add Java source code directly Add text in your app Adding TextView and changing text value Increasing the font size Making the text bold Changing the color of the text Using setText block to change the text value Joining your first and last name together Showing a toast message with the TextView\'s value Creating a Magic 8-Ball app Place and position widgets differently Placing widgets horizontally Placing widgets vertically Resizing layouts to different sizes Aligning widgets in the layout Creating screen-size responsive layouts Mixing vertical and horizontal layouts Making a scrollable layout Perform actions when a button is clicked Similarities and differences between a TextView and a Button Disabling a Button Changing the TextView\'s value when a Button is clicked Take user input Hinting the user for the input Setting the default value of the input box Setting the maximum number of lines an input can display Disabling the input box Changing keyboard type for different input types Showing the current user input when a Button is clicked Firing events whenever the input value is changed Creating a custom input validator Display fascinating images Adding an image Understanding different scale types Creating an image slideshow using a ScrollView Understanding 9-Patch images Toggle on and off Understanding checkbox and switch Toggling the check programmatically Showing/hiding an image based on the checked state Professionally design your app Understanding padding and margin property Layout gravity vs gravity Rotating a widget Making a widget transparent Creating a loading spinner Navigate to a different screen or apps Opening the native Android Phone app Opening a web browser programmatically Navigating to a different screen Understanding the setFlag block Save and retrieve data locally Saving and retrieving data Removing data Creating a Sign-up / Login page Remembering an option for next launch Figure out what time it is Retrieving the current time Adding time value to calendar component Finding the difference between two times Setting a specific time value Creating a digital clock app Vibrate your device Vibrating your device Delay your actions Show a message after 3 seconds Increase a number every 1 second Animate a running cheetah (Sprite) Create a stopwatch Add some flavor in your app Adding and playing a sound file Playing and pausing sound file Infinitely looping a sound Getting the duration of the song Creating a 3-key piano Designing a music player Learn and optimize your logic Swapping two values of TextViews Printing a triangle of asterisks Checking if a number is even or odd Reverse the items in a list by creating a new list Creating a deck of card (1/2) Shuffling a deck of card (2/2) Calculating how many times a word is repeated Welcome to the tutorial! Tap the screen to continue Goal View Goal Logic Goal Logic Recap Logic Explained Click on the %s category Explanation Continued Prerequisite Summary Summary continued Click on the "Copy" button Click on the "Paste" button to paste the block you copied Click on the %s category Click on the %s tab Click on properties Long-press the \"%s\" widget Long-press the \"%s\" layout Long-press the \"%s\" block Add the %s event by clicking the + button Add the %s component with the name of \"%s\" Add the %s component with the name of \"%s\" and the File name of \"%s\" Something went wrong. Click on properties again Something went wrong. Click the event again Select %s Select the appropriate %s Choose the %s inside the menu Choose the \"%s\" image Add an activity view named \"%s\" Add a sound file and name it \"%s\" Your \"%s\" has been added successfully! Try running and installing this example to try it out Congratulations! You completed the tutorial Good job! Press the back button to return to the editor Press the back button to see the change Press the back button to save Drop the %s onto the %s layout Drop the \"%s\" onto the editor Drop it under the \"%s\" block Drop it into the \"%s\" block Drop it inside the \"%s\" block Drop it inside the condition of the \"%s\" block Drop it inside the first parameter of the \"%s\" block Drop it inside the second parameter of the \"%s\" block Select \"%s\" for the first parameter Select \"%s\" for the second parameter Set \"%s\" for the first parameter Set \"%s\" for the second parameter Since the change happens when the app starts, you will need to RUN the application Perfect! This is how you can add widgets to the editor We can change the text value by editing its property The "text" property can be changed to alter the text value Try changing the text value to anything you want Try changing it to anything other than \"%s\" The text value has been changed Change the font size Click on the TextView to show the Properties tab Try increasing or decreasing the font size Try changing the font size to a different value The font size has been changed Make the TextView bold through its Properties Click on the TextView to show the Properties tab Choose the \"bold\" option for the text style Try changing the text style to \"%s\"! The TextView is now bold! Change the color of the TextView Click on the TextView to show the Properties tab Choose a new text color Choose a new text color other than \"%s\" The color of the TextView has been changed Change the value of the TextView using Logic Editor This is the Logic tab Logic tab is made up of events. For example, clicking a button would be an event [onCreate] event is provided by default. It\'s an event that always gets triggered once when your application starts Let\'s edit this event to change the value of the TextView when the app starts You need to finish this event This is where you program how your application behaves with blocks You can use the setText block to change text values Change the text value to whatever you want Change it to anything other than \"%s\" Use the operator block to join your first and last name Edit this event to change the value of the TextView You need to finish this event Click on the Operator tab Write your first name here Don\'t leave it as empty Write your last name here Use the [Toast] and [getText] block Let\'s edit this event to show a message when the app starts You need to finish this event Since the change happens when the app starts, you will need to RUN the application Create a Magic 8-Ball app What is a Magic 8-Ball? The Magic 8-Ball is a toy used for fortune-telling or seeking advice, developed in the 1950s and manufactured by Mattel. It is often used in fiction, often for humor related to its giving accurate, inaccurate, or otherwise statistically improbable answers This is the Magic 8-Ball When the button is pressed, we will change the "answer" text This is the answer text, which will give either "Yes" or "No" answers The [ask_button\'s onClick] event gets fired everytime the button is clicked. Let\'s edit this event 1. When the ask button is clicked\n2. Generate a random number between 0 and 1\n3. If number is 0, show "No", else if 1, show "Yes" Since we want a value of either 0 or 1, put "0" here Let\'s put \"%s\" here In our first condition, let\'s check if the number random is 0. Put \"%s\" here Select the \"%s\" TextView Let\'s change the text value to \"%s\" Whenever the ask button is clicked, we generate a random number between 0 and 1.\nIf the generated number is 0, we make the Magic 8-ball say "Yes", else "No." Place widgets horizontally Drop the layout onto the editor The layout automatically receives the width of "match_parent" since it\'s a horizontal layout We\'re going to add two TextView\'s to the layout Add the TextView to the layout Drop the 1st TextView inside the layout Let\'s add one more TextView to the layout Drop the TextView to the right of the first TextView You can see that the layout takes in children horizontally Place widgets vertically Drop the layout onto the editor The layout automatically receives the height of "match_parent" since it\'s a vertical layout We\'re going to add two TextView\'s to the vertical layout Add the TextView to the layout Drop the 1st TextView inside the layout Let\'s add one more TextView to the layout Add one more TextView to the layout "Drop the TextView below the first TextView You can see that the layout takes in children vertically Resize layouts to different sizes We provided this layout for you. Click on the layout Let\'s change this layout\'s size by editing its property We will first try changing the layout\'s width Try changing the width to "match_parent" "match_parent" property changes the layout\'s width to match its parent\'s width Since the root layout is the parent and it fills up the entire screen, the layout\'s width of "match_parent" fills the entire screen Let\'s try a different option! Try changing the width to \"%s\" "wrap_content" property changes the layout\'s width to wrap whatever is inside Since the layout has nothing in it, it shrunk to its smallest size Let\'s try the last option! Try changing the dp to any value greater than \"%s\" "dp" assigns a fixed width to the layout Align widgets in the layout We provided this horizontal layout for you. Click on the layout The layout we provided has width and height of "wrap_content" Let\'s make this layout fill up the entire screen Try changing the width to "match_parent" Try changing the height to "match_parent" Since the width and height are both "match_parent," the layout fills up the entire screen We\'re going to add a TextView to the layout Drop the TextView onto the editor Perfect! Now, let\'s align the TextView to the center of the layout Click on the linear layout that contains the TextView Let\'s change its properties Gravity handles the positioning of the its children widgets Select "center_horizontal" from the options You can see that the TextView is now horizontally aligned in the center Let\'s try adding a different gravity Select both "center_horizontal" and "center_vertical" from the options You can see that the TextView is now aligned in the center Create responsive layouts that are proportional in any device screen size We provided two layouts with the width of "match_parent" Let\'s change their properties so that the height of Blue to Green layout ratio will be 1:3 First, let\'s edit the Blue layout\'s property Weight property determines how much "proportion" of the parent layout it should take Weight is proportionally compared to other children\'s weight in the same layout Try changing the weight to \"%s\" Since the Blue layout\'s weight is 1 and the Green layout\'s weight is 0, Blue layout takes as much room as possible Now, let\'s edit the Green layout\'s property We will also change its weight Since both layouts have a weight of 1, they take up equal amount of space with the ratio of 1:1 Let\'s try changing Green\'s weight to \"%s\" Since Blue layout has a weight of 1 and the Green layout has a weight of 3, they take up the space with the proportion of 1:3 Mix differently oriented layouts together Drop the horizontal layout onto the editor Let\'s make this layout fill up the entire screen Try changing the height to "match_parent" Since the width and height are both "match_parent," the layout fills up the entire screen We\'re going to add differently oriented layouts onto the layout we previously placed Drop the layout onto the horizontal layout we previously placed We\'re going to add two TextView\'s to the vertical layout we just placed Add two TextView\'s to the vertical layout Drop the 1st TextView inside the vertical layout Let\'s add one more TextView Drop the TextView anywhere inside the vertical layout The widgets are placed horizontally and vertically depending on the orientation of the layout you add them to Drop the layout to the right of the vertical layout We\'re going to add two TextView\'s in the horizontal layout we just placed Add two TextView\'s in the horizontal layout we just placed Drop the 1st TextView to the layout Let\'s add one more TextView to the layout Drop the TextView anywhere inside the horizontal layout The TextView\'s are placed horizontally inside the horizontal layout We\'ve successfully added widgets in different orientations using differently oriented layouts Make a scrollable layout Drop the scroll layout onto the editor Scroll layouts can take in only ONE layout or widget Anything inside the scroll layout becomes scrollable, even widgets However, it\'s ideal to add a linear layout inside the scroll layout Drop the horizontal linear layout inside the scroll layout The scroll and linear layout usually share the same orientation. In this case, they are both horizontal We are going to add a long TextView inside the horizontal layout to force the layout to scroll Drop the TextView inside the linear layout Let\'s increase this TextView\'s width so the layout becomes scrollable Try changing the dp to \"%s\" Try running and installing this example to try it out Understanding the similarities and the differences between a TextView and a Button Drop the Button onto the editor A Button shares the same text properties with the TextView For example, you could change the text of a Button by editing the "text" property Let\'s go back to the editor by pressing the back button Unlike the TextView, Button\'s "onClick" event is automatically generated whenever a Button widget is added onto the View Editor This event would fire whenever the Button is clicked You need to finish this event Disable the Button We provided this Button for you. Click on it You can disable the Button by editing its "enabled" property Toggle the switch to disable the Button Let\'s go back to the editor Disable the Button when it is clicked Drop the Button here Let\'s edit the Button\'s onClick event Change the value of TextView when the Button is clicked Drop the Button below the TextView The Button\'s onClick event fires whenever the Button is clicked Let\'s edit the event so that the text changes when the Button is clicked Click on the View tab to find the setText block Change the text value to whatever you want Change the value to anything other than \"%s\" Change the hint of an input box EditText has the default hint of "Edit Text" "hint" is the text value that hints the user on what he or she should input Let\'s change the hint value by editing its property The "hint" property handles the text value of the hint Try changing it to any hint value you want The hint value has been changed Change the default text value of an input box EditText has an empty text value until the user types anything in You can initially set the text value by editing its property Let\'s change the default text value by editing its property The "text" property handles the text value of the EditText Try changing the text value to any value you want Try changing it to anything other than an empty value! The default text value has been changed Set the maximum number of lines an input can display By default, EditText only displays one line of text Let\'s change the number of lines it displays by editing its property The "lines" property determines how many lines the EditText is going to display Try changing the value to %s The EditText widget can now display %s lines of text Disable the input box Sometimes, we may want to disable the EditText widget so the user can\'t input anything Let\'s disable it by editing its property Disable it by clicking on the switch The EditText is now disabled, and the user will not be able to input any value Change the input type property to "textPassword" Sometimes, we may want the EditText to take in sensitive information like password and censor it Let\'s change the input type by editing its property Let\'s change the input_type to "textPassword" The EditText will now censor the text value it takes in Show the current input value when the Button is clicked When the Button is clicked, we will want to show the current value of EditText The Button\'s onClick event fires whenever the Button is clicked Let\'s edit the event so that the text value of EditText shows when the Button is clicked Fire an event whenever a new value is entered When the user enters any value into EditText, we are going to show it back on the screen Unlike the Button widget, EditText\'s events are not automatically added The EditText\'s "onTextChanged" event gets fired every time the text value is changed Let\'s edit the event so that the text value of EditText shows whenever it\'s changed The purple block in the root block indicates the changed text value Drop it in the Toast block parameter Create a custom input validator with a word filter Any input with the word "hate" will be trigger a warning message We will display the warning message here Let\'s initially hide the warning message when the app starts Set the default warning message to an empty message Select the \"%s\" TextView We will leave this empty, since we want it to be an empty string "onTextChanged" event has been successfully added Let\'s edit this event to validate the sentence whenever the text change occurs 1. Every time a change occurs, "onTextChanged" event gets fired\n2. Check if the input contains the word "hate"\n3. If it does, show a warning message, else set the warning message as an empty String Since we\'re filtering for the word "hate," put "hate" here Drop it inside the "if then" sub-section Drop it inside the "else" sub-section Input a warning message you want to display, other than an empty String value We will leave this empty, since we don\'t want to hide the warning message if it doesn\'t contain any filtered word Add an image of your choice The menu button on the top-right corner contains different managers that handle different parts of the app Inside the Image Manager, you can add different kinds of icons and import your own images from your camera roll Let\'s try adding our own image by clicking the + button Import the image and name it \"%s\" ImageView has a grey android icon by default We are going to change it to the image we just added The image has been changed Understand different scale type properties We\'ve provided this ImageView with the width and height of "match_parent" for you Click on the ImageView Different scale types change how the image is displayed Try changing the scale type to \"%s\" The scale type for the ImageView has changed to \"%s\" "FIT_XY" scale type stretches to take up the space given, ignoring the image ratio Let\'s try a different scale type property "FIT_START" scale type stretches to take up the space given, maintains the image ratio, and aligns the image top "FIT_CENTER" scale type stretches to take up the space given, maintains the image ratio, and aligns the image center The "FIT_END" scale type is similar to "FIT_START" and "FIT_CENTER", except that it aligns the image bottom "CENTER" maintains the image size while aligning it to center "CENTER_CROP" scales the image uniformly so that both width and height of the image will be equal to or larger than the corresponding dimension of the layout "CENTER_INSIDE" scales the image uniformly so that both width and height of the image will be equal to or less than the corresponding dimension of the layout Try changing the scale type to \"%s\" Make a scrollable image slideshow Let\'s try adding our own image by clicking the + button Add an image of your choice with the name of \"%s\" Name your imported image \"%s\" Scroll layouts can take in only ONE layout or widget Anything inside the scroll layout becomes scrollable, even widgets However, it\'s ideal to add a linear layout inside the scroll layout Drop the horizontal linear layout inside the scroll layout The scroll and linear layout usually share the same orientation. In this case, they are both horizontal We are going to add two images Drop the ImageView inside the linear layout Let\'s change the image through its properties Choose the \"%s\" image Let\'s add one more ImageView in the linear layout Let\'s change the image through its properties Choose the \"%s\" image Understand nine patch images Nine Patch Images Nine patch images are bitmap images that automatically resize to accommodate the contents of the view and the size of the screen Nine Patch Images Continued We\'re going to apply a nine patch image to different widgets to see how they are affected Click on the TextView widget to edit its properties Let\'s change the background image through its properties Click on the Linear layout to edit its properties Click on the Button widget to edit its properties As you can see, even though we used one image file, it automatically fits the size of all the widgets/layouts That is why ninepatch images are useful for creating responsive designs on different screen sizes Understand Checkbox and Switch widget We\'ve provided two widgets for you, a Checkbox and a Switch Both of these widgets are commonly used\n to take user\'s YES/NO input For example, you can usually find checkboxes in login screens, with descriptions such as \"%s\" Switch can be used with the same concept, it just gives different user interface and experience Both Checkbox and Switch are used to take YES/NO input from the user For Checkboxes, more than one of them are usually placed to take in multiple inputs Let\'s try toggling this to checked by editing its property Toggle the \"%s\" switch Similar to Checkbox, you can toggle on the Switch the same way by editing its property Toggle the checkbox with a click of a Button Drop the Button below the CheckBox When the button is clicked, we will check/uncheck the checkbox depending on its current state Let\'s edit the Button\'s onClick event so that check state toggles when the Button is clicked Before we continue, let\'s think about how the blocks should be placed 1. Get the current state of the checkbox\n2. If the checkbox is checked, un-check it\n3. Else, check it Let\'s learn more about %s block The blocks under "if (condition) then" gets executed if the condition is true, else the blocks under "else" will get executed Toggle the visibility of an image with a with a CheckBox Drop the CheckBox below the ImageView When the checkbox is clicked, we will show/hide the image First, let\'s change the text of the checkbox Try changing the text value to \"%s\" Toggle the \"%s\" switch, since image will be visible on the first launch Nice! The CheckBox has been edited "The CheckBox's "onCheckChanged" event gets fired every time the check value is toggled Let\'s edit the event so that the image shows/hides depending on the check value Before we continue, let\'s think about how the blocks should be placed 1. If the CheckBox is checked, show the image\n2. Else, hide it Let\'s review the if/else block The blocks under "if (condition) then" gets executed if the condition is true, else the blocks under "else" will get executed The purple block in the root block indicates the changed CheckBox value Understand padding and margin property Spacing Spacing between widgets is very important for app design. We use margin and padding to keep content separated from other widgets, by giving extra space around or inside it Padding The padding represents the inner space of an element. By default, Sketchware provides 8dp of padding to every widget when it is placed The blue layout has a padding of %dp, so there is a spacing between two layouts First, let\'s click on the Blue layout Try changing the padding to \"%s\" The applied padding gave more space between two layouts The margin represents the outer space of an element. By default, Sketchware provides no margin to the widget when it is placed Now, let\'s click on the Blue layout to edit the margin Try changing the margin to \"%s\" There is now spacing on the outside of the Blue layout Understanding Gravity vs Layout Gravity In the "Layout" tutorial category, we learned how to align widgets using "gravity" property The "gravity" property sets the gravity of the content of the View its used on The "layout_gravity" property sets the gravity of itself in its parent Let\'s try and change the \"%s\" The layout has been aligned to the right side of its parent Rotate a widget by changing "rotate" property Every widget comes with a "rotate" property. By default, widgets have 0 rotation value Let\'s try changing its rotation value Try changing the rotation value to \"%s\" The layout has rotated \"%s\" degrees Make a widget transparent by changing its "alpha" value Every widget comes with a "alpha" property, which determines the transparency Alpha value ranges from 0.0 to 1.0. By default, widgets have 1.0 alpha value--or 100% visibility Let\'s try changing its alpha value Try changing the alpha value to \"%s\" The layout and the content inside now has \"%s\" transparency Create a loading spinner If you haven\'t completed the tutorials for "Timer" component, please complete them before trying this one Here, we\'ve provided an ImageView with a loading spinner image We will start rotating the spinner when the app starts 1. Create a "rotation" Number variable that keeps track of the current rotation value\n2. Using the "Timer every" block, increase the "rotation" value by 1 every 5 milliseconds\n3. Apply the new rotation value to the ImageView Create a Number variable called \"%s\" The rotation variable will be used to keep track of the rotation value. Its value defaults to 0 We will execute this block after \"%s\" millisecond Let\'s update the rotation value every \"%s\" milliseconds Select the \"%s\" Number variable Select the \"%s\" ImageView Using the "Timer every" block, we increase the "rotation" Number variable by 1 every 5 milliseconds. Then, we apply the new rotation value to the "spinner" ImageView Navigate to a different screen What is an Intent? An Intent is an "intention" to perform an action, such as opening an app or moving to a new screen By clicking on the navigate button, we will navigate to %s that we\'ve provided in this tutorial We will use the Intent component to navigate to a different screen Let\'s navigate to a different screen when the navigate button is clicked When the button is clicked, use the "setScreen" and "startActivity" block to navigate to a different screen Intent setScreen We can use the "Intent setScreen" block to determine which screen we\'re trying to navigate to We can use the "startActivity" block to carry out the intent of our action Open the native Android Phone app Functions of Intent Intent can be used to open other applications, such as a browser or a phone app Let\'s try opening the native phone app when this button is clicked Let\'s edit the open button\'s onClick event Select the \"%s\" option The "setAction" block determines which action will follow. In this case, we set the action of the intent to open the "dial" or the phone app Enter \"%s\" in the second parameter The "setData" block can carry data along with the action. In this example, we\'re going to carry the telephone data of "1234". Note that the prefix of the data could change depending on the action The "startActivity" block triggers the action of the Intent Programmatically call a phone number Functions of Intent Intent Component can be also used to dial a phone number programmatically We will call the desired number when the call button is pressed Let\'s edit the call button\'s onClick event Select the \"%s\" option The \"%s\" action calls the desired number Enter \"%s\" in the second parameter The "setData" block can carry data along with the action. In this example, we\'re going to call the telephone number of "1234". Note that the prefix of the data could change depending on the action The "startActivity" block triggers the action of the Intent Programmatically open a web browser We will open the browser when this button is clicked Let\'s edit the open button\'s onClick event Select the \"%s\" option Enter \"%s\" in the second parameter The "setData" block can carry data along with the action. In this example, we\'re giong to open a view with the data of ,"https://google.com" The "startActivity" block triggers the action of the Intent. In this case, the Intent component will open a browser Transfer data to another screen When this button is clicked, we will navigate to \"%s\" and transfer the value of EditText above Click on the file selector to navigate to the Logic Editor of \"%s\" Let\'s receive the transferred data when the Activity is newly created inside "onCreate" event Finish an activity Finishing Activity Just like how we can start an activity, we can finish an activity.Even though the function is not dependent on the Intent Component, it\'s closely related When this button is clicked, we will close the current activity Let\'s edit close button\'s onClick event to close the activity When the close button is clicked, we will close the current activity. Again, note that this block is not dependent on the Intent Component Understand "setFlag" block What is Flag? In programming, flag is a variable that usually indicates some program state "For example, say you have a program that displays a view, but the user can toggle the visibility of the view with a boolean variable called \"visible\", with true indicating it\'s visible, and false indicating it\'s not. In this case, "visibility" variable is the flag that determines the visibility When to use the "setFlags" block? The "setFlags" block is really only useful when you want to navigate to another screen inside the app. It will be explained in greater detail later in this tutorial Let\'s find the "setFlags" block inside the "onCreate" event "setFlags" block is only given when you add the "Intent" component Flag Types Inside Sketchware, we provide two types of Intent flag for you:\n1. SINGLE_TOP\n2. CLEAR_TOP Single top flag organizes the views in a way that if the view you\’re about to transition to was already called before, it would bring that view to the top rather than putting another copy on the top. Clear top clears all the previous views after navigating to the desired screen 1. Save data locally\n2. Load and display the saved data onto the TextView File Explained Using the File Component, you can save data using Android\'s native Shared Preference library "We will save the value of the EditText when we press this button Then, we will load the saved data value onto this TextView Let\'s edit save button\'s onClick event to save the data when needed Let\'s put \"%s\" as the key value Drop it inside the second parameter of the "File setData" block Select the \"%s\" EditText setData Block Explained The "setData" block saves the data locally in "[key,value]" format. We save and retrieve value using the same key Let\'s load the saved data inside the load button\'s onClick event Load Logic Goal We\'re going to load the saved value and change the TextView\'s text with the loaded value Drop it inside the first parameter of the TextView We are going to use the same key we used to load the value you saved, \"%s\" ile Load The File component can be used across all screens to save and load value from the same file, as long as the file name is the identical Remove data from the File compoonent Friendly Reminder This tutorial is very similar to the previous one. If you haven\'t, please complete the previous tutorial! We will save the value of the EditText when we press this button Then, we will load the saved data value onto this TextView We\'ve provided the File Component for you We also provided some logic for you Like the previous tutorial, we locally save the value of the EditText with the key of \"%s\" Let\'s check the \"%s\" event Here, we load the data with the key of \"%s\" and update the TextView\'s value Our job is to fill in the \"%s\" event Remove the value from the File Component with the key of \"%s\" Let\'s remove the data with the key value of \"%s\" Things to try after installing 1. Save any data by entering any data into EditText and clicking on "save"\n2. Load the data by clicking on the "load" button\n3. Remove the data by clicking on the "remove" button and try loading the data again Create a Sign-up / Login page with local database We will create a page where we can both sign up and login User will input their username here And password here If the user tries to login with an account that doesn\'t exist, we\'ll tell them to sign up first And if an account exists, we will show a message that says "Login Success!" We\'ve provided a File component \"%s\" with the filename of \"%s\" Let\'s handle the signup event first 1. Check if the user actually filled out the username and the password\n2.If one of them is empty, show a message saying that they need to fill out both forms\n3. If they are both filled out, check if the username exists\n4. If it doesn\'t exist, save their login information locally" Inside the if statement, we check for two conditions First, we check if the username has any text by measuring and comparing its length Also, we check if the user typed anything for the password If one or both of them are not filled out, we tell them to enter them Select the \"%s\" EditText Here, we\'re just checking if there already exists an account with the same username. We want each username to be unique so we don\'t overwrite the existing username Tell the user "Username already exists! We first check if both the username and the password is filled out. Then, we check if the username is already taken. If it\'s not taken, save the login information in "[key,value]" format, with key being the username and the value being the password Let\'s handle the login event now The logic is very similar to the Sign-up logic. We check if the user entered both the password and the username, and then check if the username exists in the file. Here, instead, when the username exsits, we try to login. If the password matches with the saved password, we log them in. If no username is saved in the file, we tell them to sign up first Note that there is a "not" block to check if the username exists Show the message %s Ther are two cases. If the username exists, we try to login--if the password matches with the saved one, we successfully logged in, else it fails. If the username doesn\'t exist, we alert the user to sign up first Remember an option for next launch When the app launches, we will remember the previous input and load it We\'ve provided a File component \"%s\" with the filename of \"%s\" We\'ll first try to load from the File when the app starts 1. Check if the check value exists in the File\n2. If it exists, retrieve the value of the check value\n3. We will set the CheckBox to checked if the value is 1, else unchecked We will keep the check value under the key name of \"%s\" We\'re retrieving the value with the key of \"%s\" Check if the value equals to \"%s\" Select the \"%s\" CheckBox We first check if the check value exists in the file. When the app launches for the first time ever, it will not have this value. \nIf the value exists, we update the CheckBox depending on its value--0 or 1 Saving CheckBox State We handled the loading part. Now, let\'s handle the saving part We will save the new CheckBox value whenever it updates Set the key as %s When the CheckBox\'s value updates, we update the "check" key inside the File component with the value of 0 or 1 depending on the check value Retrieve the current time and show it with TextView Let\'s edit the "onCreate" event to retrieve the time when the app starts Calendar component\'s "getNow" block retrieves the current time Calendar Format Calendar time can be formatted into numberous formats. For example,\n\n1-1-1990\n01-01-1990\nJanuary 1st, 1990\n\nall have different date formats Type in the format \"%s\" This format should display the date in the format of \"%s\" When the app starts, the "getNow" block will get the current time. Then, we will set the TextView\'s value to the formatted time Click the back button to return to the editor Add time to Calendar Component The TextView will show the current day When we click on the button, we will add a day to the current day Let\'s edit the "onCreate" event to display the day onto TextView when the app starts Change the TextView\'s value to current time\'s day value Select the \"%s\" TextView Let\'s return to the Component category Since we only want the day, set the format as \"%s\" When the app starts, the Calendar component will retrieve the current time and change the TextView\'s value to the according day Let\'s edit the Add Day button\'s onClick event to add the day 1. Add a day to the Calendar Component\n2. Update the TextView\'s value to the updated Calendar value Choose the \"%s\" option Since we want to add a day, let\'s add 24 hours Whenever the button is clicked, it will add 24 hours to the current Calendar component and update the TextView with the new day value Find the difference between two time values We will show the difference of two times here One Calendar component can hold a single time value. We provided two Calendar components so that you can find the difference between the two Let\'s check out the "onCreate" event Here, we\'ve already provided the time for both Calendar components We first get the current time for the first Calendar component, \"%s\" Then, we get the current time for the second Calendar component, \"%s\" For the sake of the example, we\'ve added an extra second to the \"%s\" Calendar component Time Difference Now, we\'re going to find the difference between these two Calendar components and display the value onto the TextView Select the \"%s\" TextView toString Block Since the difference is a Number format, we can\'t immediately set the text to the difference value. We need to change the format from "Number" to "String" in order for the blocks to fit together toString without decimal The difference between "without decimal" and "with decimal" is that "without decimal" will display the Number without any decimal points Select the \"%s\" Calendar component 1. Set the "c2" Calendar component so that it has 1 more second than the "c1" Calendar component\n2. Set the time difference value to the \"diff\" TextView using the \"toString\" and \"Difference\" block\n3. The difference will show in milliseconds. 1 second is equivalent to 1,000 milliseconds Set a specific time value Instead of retrieving the current time, we sometimes may need to assign a specific time value to the Calendar component Let\'s set a specific time value and display it on this TextView Let\'s edit the "onCreate" event to set a specific time and display it Select the \"%s\" option Let\'s input \"%s\" for the year Let\'s input \"%s\" for the month Even though we input 0 for the month, it would actually display January, since the months start from 0 in Java programming language Let\'s only display the year and the month by entering \"%s\" 1. Set the YEAR value to 1990\n2. Set the MONTH value to 0 (Note that January is 0)\n3. Update the TextView with the appropriate format Create a digital clock app We are going to use the Calendar to retrieve time and display it onto this TextView We have provided two components, Timer and Calendar, for you Let\'s run the clock as soon as the app starts 1. Using the "Timer ... every" block, we will retrieve the time every second\n2. With the retrieved time, we will format the text and display it on the TextView Let\'s start this block after %s ms We want this block to repeat every %s ms Select the \"%s\" TextView Enter "hh:mm:ss" for the format, since we want the clock in "hours:minutes:seconds" format 1. "Timer every" block retrieves the time every 1 second\n2. We retrieve the current time using the "Calendar getNow" block and update the TextView with the retrieved value Create a birthday countdown app Let\'s first populate the spinner data in the "onCreate" event First, let\'s create a String list named \"%s\" "Let's create a Number variable called \"%s\" This Number variable will be used to add the years from 1990 to 2010 into the \"%s\" Select the \"%s\" Number variable Since we want the year to start from 1990, enter "1990" here Since we want to add %s years starting 1990, put \"%s\" here The reason why it\'s 21 is that 1990 is being added to the list before the "temp_year" is increased, unlike the months Select the \"%s\" String list Select the \"%s\" Spinner Select the \"%s\" List Let\'s populate the data for days now First, let\'s create a list String named \"%s\" Let\'s create a Number variable called \"%s\" This Number variable will be used to add the days from 1 to 31 into the \"%s\" Add %s to the repeat condition Two Calendar components will be used to calculate the difference of two dates Let\'s calculate the difference and show the difference when the calculate button is clicked 1. Get the current time for c2 Calendar component\n2. Set the year, month, and day for the c1 Calendar component from the retrieved user input\n3. Calculate the difference in days and display it onto the TextView Vibrate your device for x seconds When the button is clicked, we will vibrate the device for 1 second Let\'s edit the Button\'s onClick event to vibrate the device when it is clicked Vibrate the device when the button is clicked The first parameter determines how long the device will vibrate for in milliseconds Since we want the device to vibrate for %s second, let\'s add \"%s\" inside the param Show a message after %s seconds Timer Component is used to delay certain actions, or repeat a certain action with a duration in between Let\'s fire the timer inside the "onCreate" event When the application starts, show a message after %s seconds Let\'s add \"%s\" milliseconds inside the parameter, since we want the block to execute after %s seconds Enter any String value you want to show 1. When the application starts\n2. Timer \"t\" after 3000 ms block gets executed\n3. ShowMessage inside the Timer block gets executed after 3,000 milliseconds or 3 seconds Create an animating Cheetah using Sprite images Definition of Sprite Sprite is an image sheet that contains all the frames needed for an animation to happen Cheetah Frames In this tutorial, we\'ve provided %s frames of a cheetah running for you Let\'s now animate this image using Timer Component We\'re going to start animating the image right away when the application starts 1. Create a Number variable that keeps track of which frame the animation is on\n2. Use the \"Timer ... every\" block to update the frame variable every x milliseconds\n3. Update the image with the new frame index Create a Number variable named \"%s\" Great! You\'ve created a Number variable called \"%s\". The value of the number variables default to %s Let\'s execute this block right when the application starts--input %s Also, let\'s execute this every block every %s milliseconds Add %s to the second parameter of the \"%s\" block Add %s to the second parameter of the \"%s\" block Let\'s understand why we need this condition before we move on Every time the timer block gets executed, the frame variable increases by 1, indicating that the image should change to the next frame.\nAfter the frame variable updates, we should check which frame it is on, and update to the respective frame. Since there are 8 frames, we need 8 "if ... then" condition blocks We want to update the frame to the first image if frame value is %s Click on the "if then" block to copy it Put 1 here to check for the first frame When the frame is %s, we want the image to change to \"%s\" Let\'s paste another "if then" block Connect it under the first "if then" block Put 2 here to check for the second frame Put 3 here to check for the third frame Put 4 here to check for the fourth frame Put 5 here to check for the fifth frame Put 6 here to check for the sixth frame Put 7 here to check for the seventh frame 1. We use the Timer block to increase the "frame" variable by 1 every 150ms\n2. When the frame variable increases, 1, 2, 3 ... 15, we use the remainder block to only get a result between 1 and 7 no matter how big the \"frame variable is\"\n3. We use the "=" block to check the current value of the frame, and update the ImageView accordingly Create a Stopwatch There are five TextViews inside this layout in %s format Minutes Seconds And Milliseconds When the start button is clicked, we will start the stopwatch And when the stop button is pressed, we will pause it if it\'s running, else clear the stop watch The Timer component is used to update the TextView every x milliseconds The c1 and c2 Calendar components are used to hold and find differnce between two times Let\'s start the stopwatch timer when the start button is clicked 1. When the button is clicked, set the "started" Boolean varaible as true and get the current time for c1 Calendar component\n2. Start a timer that repeats every millisecond, and get the time for c2 Calendar component\n3. Find the difference between c2 and c1 time\n4. Calculate the minutes, seconds, and milliseconds from the difference and update the TextViews Create a Boolean variable called \"%s\" \"%s\" Boolean variable will let us know if the stopwatch is started or not Create a Number variable called \"%s\" \"%s\" Number variable will be used to hold the time difference Select the \"%s\" Boolean variable Select the \"%s\" Calendar component Let\'s execute this after \"%s\"ms Repeat this timer block every \"%s\" millisecond Select the \"%s\" Number variable Select the \"%s\" TextView Since we only want the milliseconds, put \"%s\" here" Milliseconds Logic Explained The "Difference" block returns the time in milliseconds. Let\'s say the difference value is 5153ms--5153%1000 would be 153. The "%" block caps the maximum value of the milliseconds to 1,000 Put \"%s\" here, since we want to calculate the seconds only Put \"%s\" here, since we want to put a %s second cap Put \"%s\" here, since we want to calculate the minutes, and %s milliseconds equal %s minute Put \"%s\" here, since we want to put a %s minute cap 1. When the "start" button is clicked, we get the time for "c1" Calendar component\n2. Starting the timer, we retrieve a new current time for \"c2\" Calendar component and find the difference\n3. Then, we parse the milliseconds into minutes, seconds, and milliseconds Let\'s stop the timer when the stop button is clicked 1. Check if the stopwatch is started\n2. If started, we pause the stopwatch \n3. If it\'s stopped, we clear the time to 0:00:00 and set the "started" boolean to false Click on the %s block Put \"%s\" to reset the milliseconds Put \"%s\" to reset the seconds Put \"%s\" to reset the minutes 1. Check if the stopwatch is started\n2. If started, we pause the stopwatch \n3. If it\'s stopped, we clear the time to 0:00:00 and set the "started" boolean to false Increase a Number variable by %s every second When the app starts, we will increase this digit by %s every second Let\'s start the timer when the app starts 1. Create a Number variable that will keep track of the current number value\n2. Using the "Timer every" block, we will increase the Number variable and update the TextView Create a Number variable called \"%s\" You\'ve successfully created a Number variable. Its value defaults to %s Let\'s execute the timer after \"%s\"ms Since we want to increment the number value every second, put \"%s\"ms Select the \"%s\" Number variable Select the \"%s\" TextView 1. Once the app starts, the "Timer every" block gets executed every 1000ms or 1 second\n2. Using the \"num\" Number variable, we keep track of the increasing value of the digit\n3. Since Number variables are in number format, we use the "toString" block to cast the number type to String before updating the TextView Adding and playing a sound file SoundPool vs MediaPlayer "- SoundPool Component is used for loading and playing short sound files, such as a sound effect\n- MediaPlayer Component is used for playing longer sound files, such as a background music We will use this button to play the sound using SoundPool Component We will use this button to play the sound using MediaPlayer Component Adding sound First, let\'s try adding a sound file. Download and prepare a sound file to load Sound Manager You can add and manage sound files using the Sound Manager Let\'s try playing the sound file using the SoundPool Component SoundPool Explained Playing a sound with SoundPool component is broken down into 4 steps: \n1. Create a pool that can hold x number of sounds\n2. Create a Number variable and load the ID of the sound into the variable\n3. Create another Number variable that plays the sound and holds the "playing ID" Let\'s first create the pool in the "onCreate" event Since we only have %s sound file, let\'s add \"%s\" here Let\'s create the Number variable that can hold the ID of the sound Create a Number variable named \"%s\" %s variable will be used to load the sound file %s variable will be used to play the sound file Let\'s now load the ID of the sound into the Number variable we\'ve just created Select the \"%s\" Number variable Select the \"%s\" sound file you\'ve previously added Let\'s now edit the Button\'s onClick event to play the sound when it is clicked Click on play_soundspool\'s onClick event You can determine how many times the sound will play here. By default, it plays one time. Let\'s add %s here The reason why SoundPool requires you to create a Number variable to store the playingID is to make sure you can stop the sound if you need to, using the ID Note that there is a stop block that can stop the sound using the playingID when needed SoundPool is for Short Sounds The sound you\'ve added may or may NOT play, since SoundPool can only play short sound files Let\'s play the same sound file using the MediaPlayer component Now let\'s try playing the sound using MediaPlayer Component MediaPlayer Explained "MediaPlayer Component procedure is broken down into 2 steps: \n1. Create a MediaPlayer that can hold 1 sound\n2. Play the MediaPlayer\nNote that MediaPlayer does not need a Number variable to operate, but it requires more system memory Let\'s create the MediaPlayer that can hold a sound inside the "onCreate" event Select the \"%s\" sound file you\'ve previously uploaded Now, let\'s play the sound when the button is clicked 1. SoundPool Component is used to play short sounds--the sound may not play if the sound file is too long.\nYou need to create TWO Number variables to load the sound and play the sound\n2. MediaPlayer Component is used to play longer sounds. It doesn\'t need a Number variable, but it uses more system memory Playing and pausing sounds You can add and manage sound files using the Sound Manager Here, we\'ve provided a song called \"%s\" for you to use Whenever we click on the "Play" button, it will start playing the music Whenever we click on the "Pause" button, it will pause the music We\'ve also provided the MediaPlayer Component \"%s\" for you Let\'s create the MediaPlayer inside the "onCreate" event Select the sound file \"%s\" Let\'s play the sound when the "play" button is clicked, and let\'s pause the sound when the "pause" button is clicked Let\'s edit the play button\'s onClick event Let\'s edit pause button\'s onClick event 1. We create the MediaPlayer with the appropriate sound file inside the "onCreate" event\n2. When the play button is clicked, we play the sound file using the \"MediaPlayer start\" block\n3. When the pause button is clicked, we pause the sound file using the "MediaPlayer pause" block Infinitely loop a sound file You can add and manage sound files using the Sound Manager Here, we\'ve provided a song called \"%s\" for you to use Let\'s edit the "onCreate" event to play the sound and set it on loop Unlike the SoundPool component, MediaPlayer Component has more interesting features, such as "set looping," "get song duration," and more Select the \"%s\" sound file you\'ve previously uploaded 1. Create a MediaPlayer Component\n2. Load the sound into the MediaPlayer\n3. Set looping to true\n4. Start the MediaPlayer Getting the duration of the song You can add and manage sound files using the Sound Manager Here, we\'ve provided a song called \"%s\" for you to use The duration of the song is 18 seconds (~18,000 milliseconds) We will retrieve and display the total duration of the song here Let\'s retrieve the duration of the song when the app starts Select the \"%s\" sound file Select the \"%s\" TextView When the app starts, we first load the sound "tobu_mesmerize" into the MediaPlayer component.\nThen, we retrieve the duration of the song (in milliseconds) and update the TextView Create a 3-key pian Design Explained We will walk through step by step and understand how this app is designed Many different layouts are positioned inside this layout, which has the height of 200dp We\'ve set the gravity of top and bottom layout to "center_horizontal" so that keys align to the center" The keys are "Button" widgets with white or black background They have a width of 50dp and height of 100dp For the middle key, we\'ve given it a margin of 4dp to the left and the right so that it has a little spacing between the keys The same applies for the black keys Piano sound files We\'ve provided five different sound files\n\nc1, c1s (black key), d1, d1s (black key), and e1 In this app, we only use the SoundPool component. The reason why we use SoundPool instead of MediaPlayer is that piano sounds are relatively short Let\'s analyze the "onCreate" event Inside the "onCreate" event, we initialize the SoundPool and load appropriate sound files There are %s Number variables available. The variables that end with \"%s\" are used to load the sound The variables that end with \"%s\" are used to play the sound We initialize the SoundPool with %s stream counts. This lets us load %s sound files into the SoundPool Note that we need to use the "set Number to" block to both load and play the sound files when using the SoundPool component Here, we load the sound files using the "SoundPool load" block Note that different sound files are loaded to different Number variables Let\'s fill in the missing parameters in the last "set Number to" block Select the \"%s\" Number variable Select the \"%s\" sound file Playing Sounds "Now, let\'s understand how the sound files are being played There are different Button onClick events available--one for each key Let\'s play the sound for the \"%s\" key when it is clicked Like loading the sound, "set Number to" block is also used to play the sound First, we select the appropriate Number variable that ends in \"%s\" Since this is for onClick event for \"%s\", select \"%s\" Then we need the "SoundPool play" block to play the sound file Let\'s make it play one time by putting 0 here The logic for other key events are identical, so they\'ve been filled out for you 1. We created 10 Number variables, 5 with the suffix of "_sound" and 5 with "_play2. "_sound" variables were used to load the sound in "onCreate" event, and "_play" variables were used to play the sound on the key's onClick event Design a music player We\'ve provided %s images for you Tobu - Mesmerize album art Play button Pause button Fast-forward button Rewind button First, we changed the background color property of the layout that holds all other widgets There are two Linear (V) layouts--this is the first one with the centered gravity We applied the album art to an ImageView We\'ve added the music and the artist title using a TextView This is the second layout, with the centered gravity as well This horizontal layout is inside the second layout, with three ImageViews In this tutorial, we will only be concerned with the "play" button Let\'s first load the song into the MediaPlayer when the app starts Load the song \"%s\" into the MediaPlayer component Select the song \"%s\" Then, let\'s play the sound when the play button is clicked 1. Check if the song is already playing\n2. If playing, pause the song and change the icon to play icon\n3. Else, play the song and change the icon to pause icon Create a Boolean variable called \"%s\" Great! We\'ll use this variable to check if the song is playing or not. Its value defaults to "false" Select the \"%s\" ImageView Select the \"%s\" image Select the \"%s\" Boolean variable 1. Check if the song is already playing\n2. If playing, pause the song and change the icon to play icon\n3. Else, play the song and change the icon to pause icon Rotate a widget with Object Animator Component What is Object Animator? Object Animator is used to make creating animations more simple. Instead of using Timers, we can now use the Object Animator Component to animate widgets We\'re going to rotate this TextView using Object Animator The ObjectAnimator Component has been added Let\'s animate the TextView when the app starts Logic Goal Use the ObjectAnimator component to animate the TextView Click on the Component category Logic Goal Logic Goal Swap values of two text values After the value swap, the text will be displayed as\n\nB\nA Let\'s swap the two values when the \"swap\" button is clicked 1. Create a temporary variable that holds the value of \"%s\"\n2. Change the value of \"%s\" to \"%s\"\n3. Set the value of \"%s\" to \"%s\" Create a String variable named \"%s\" In order to swap two values, we need to create a temporary placeholder that can temporarily hold one value while we make the swap Print a triangle of asterisks We will display the trinagle through the provided TextView Let\'s generate the trinagle of asterisks in the onCreate event We want to acquire a tringle of asterisks that look like this:\n*\n**\n***\n****\n***** Create a Number variable called \"%s\" This number variable will help us keep track of how many asterisks will be printed on each row We set i to 1, since we want to print one * on the first row Click on the Control category Click on the Variable category Create a String variable called \"%s\" Select the \"%s\" block We use two repeat blocks\n1. The first repeat block is used to determine how many rows of * we want to print by adding a new line every loop\n2. The repeat block inside the repeat block is used to print each row\n 3. The inside loop is repeated \"i\" times, which increments in the outer repeat loop. This lets us acquire the triangular looking print\n4. Finally, we set the TextView to the text we\'ve been joining on \"stars\" variable will contain the value of what we want to print Calculate if number is even or odd After the user enters a numeric input and clicks on the button, we will toast either \"even\" or \"odd\" Let\'s perform the calculation when the button is clicked Even numbers are numbers that are divisible by 2. In order to check if the input is even, we just need to check if there are any remainders left when the number is divided by 2 When there is a remainder, we\'ll toast \"odd\" When there is no remainder, we\'ll toast \"even\" We decide if the number is even by calculating if the input has any remainders after it is divided by 2 Challenge The application might crash if you enter no numbers at all. Try to create another if statement that helps you check if the EditText has any input Reverse the items in the list The provided ListView is going to display the items inside the list When the Reverse button is pressed, the content of the list will be reversed Let\'s check out the onCreate event We\'ve already created and populated three items in a String list, \"a, b, c\" Let\'s reverse the list inside the reverse button\'s onClick event 1. Create a new String list\n2. Iterate the existing list and copy the items in a backwards manner\n3.Update the listview with the new content Create a String list named \"%s\" Create a Number variable named \"%s\" We initially clear the list, so that even when the reverse button is clicked multiple times, the \"r_list\" starts with the same blank state every time. We created a Number variable called index, which will help us iterate through the original list starting from the last item. Create a Number variable named \"%s\" We set the index to \"size - 1\", since the index of the first item in a list starts with 0, and we wanted to start from the last item. Since the size of the list is 3, we want to start from index 2, which is the index of the last item.\n\n Using the repeat block, we iterate from the last item inside the \"list1\", and add them into \"r_list\". We decrease the index variable by 1 every iteration to get the previous item in the \"list1\". Then, we reset the data for the ListView and update it, so that the ListView can display the new data of \"r_list\" Create a Deck of playing cards The provided ListView is going to display the cards after they have been generated Let\'s generate and populate the ListView when the app starts In playing cards, there are four suits and 13 cards for each suite. In the deck we\'re going to create, we will denote the suites with numbers:\n 1. Diamonds - 0\n2. Hearts - 1\n3. Spades - 2\n4. Clubs - 3\n\nFor example, an Ace of Spades would be denoted as 20, in suite-card number format Create a Number variable named \"%s\" Set the value to \"%s\" for the number of suits Set the value to \"%s\" for the number of cards Create a String List named \"%s\" The inner repeat loop repeats 13 times every time the outer repeat loop happens one time. We add 13 different cards with every suit repeat, and resets the card value to 0 so that other suit will get the same 13 cards as well We\'ve successfully created 52 cards. The format the cards are displayed may be a little funky, but in the world of programming, it\'s sometimes necessary to use various data foramts for different situations\n\n The first digit indicates which suit it is, and the following number indicates the number of the card. For example, 09 would be a Jack of Diamonds, since first item starts with 0th index Shuffle a Deck of playing cards Prerequisite If you haven\'t, please complete the previous tutorial, since this is a cumulative tutorial We will use this ListView to display the shuffled deck We\'ve already provided the logic for onCreate event The logic is the same with the previous tutorial, except that we\'ve created a new MoreBlock function called \"shuffleDeck\" Let\'s edit the shuffleDeck function to shuffle the deck and populate the ListView 1. Create a new List called \"s_deck\"\n2. Randomly choose 1 card from the \"deck\" list and copy it over to \"s_deck\" Create a Number variable named \"%s\" Create a String list named \"%s\" Set the value to \"%s\", since there are 52 cards in the deck Note that we subtract 1, since the 1st item inside the list starts with the index of 0, which means the index of the last item always be the length - 1 During the 52 repeat loops, we generate a random number variable that takes a random index from 0 to the length of the deck list - 1. Using the index, we copy the card from the deck list to the s_deck list, and delete it from the deck list so the same card does not get copied over Count how many times the word \"a\" repeats in a sentence Here, we\'ve provided a TextView with the text of \"a b c a a\", we\'ll create an algorithm that counts how many times \"a\" has repeated We\'ll calculate and show the count when the app starts Go through each character using a for loop We\'ve provided 4 variables for you \"%s\" will help us iterate through each character \"%s\" will be a a temporary variable that holds/updates each word \"%s\" will temporarly hold the value of each character it iterates through \"%s\" will keep count of how many times \"a\" has appeared Store a character into the \"character\" variable Check if the character is an empty space.\n1. If the character is not an empty space, join the character into the \"word\" variable by doing \"word\" join \"word + character\"\n 2. If the character is an empty space, check if the word equals \"a\". If it\'s equal, increment count. Finally, reset the \"word\" variable 1. Join the character into word until you reach an empty space\n 2. If the word equals \"a\", increment the count\n 3. Reset the word variable to an empty String and increment the index\n 4. Toast the number of count it happened