Showing posts from March, 2020

FirebaseAuth phone number verification in Sketchware

To create a login activity using Firebase Auth phone number verification method in Sketchware, follow the steps given below. This method uses Firebase authentication service for creating login. 1. In your Firebase account, go to Firebase authentication. 2. In Firebase authentication web set-up, go to SIGN-IN method, and enable Phone. 3. Go to Project settings in your Firebase project and copy the Web API Key, Project ID, and App ID. 4. Paste the Project ID, App ID, and Web API Key in your project in Sketchware, in the Firebase settings. 5. In main.xml add two EditText edittext1 and edittext2 , and two Buttons button1 and button2 as shown in the image below. 6. On the  MainActivity  page add an Intent  i . Also add a FirebaseAuth component  fa . 7. Create a new page success.xml with a Button button1 . 8. In  onCreate  event of MainActivity , if user is logged in move to SuccessActivity. Use blocks as shown in image below. 9. Create two more blocks,

Create list of YouTube videos with thumbnails and titles

To display a list of YouTube Videos on a page, we can follow the steps given below. 1. In VIEW area of  main.xml  add a ListView listview1 . 2. Create a Custom View custom.xml . Here add an ImageView imageview1 and TextView textview1 . 3. For listview1 select custom.xml as CustomView. 4. Add a RequestNetwork component  rn . Also add an Intent component i . 5. Create a String List idlist , a Map List videoList , a Number variable n , and a Map variable map . 6. In  onCreate  event: a. Add id of YouTube videos to idlist . Note that in video URL   the video id is  dPHreMHHoGY . b. Then use a repeat block. Repeat for length of List  idlist . c. Inside repeat block, use RequestNetwork method GET for url Join and get at n of idlist and &format=json * See image above. d. After this, inside repeat block, use Number variable n increase 1. 7.

YouTube Videos List in Sketchware

Improved app on this topic To display a list of YouTube Videos on a page, we can create multiple WebViews programmatically and add them to a Linear vertical in a ScrollView. Follow the steps given below. 1. In VIEW area of  main.xml  add a ScrollView with padding 0. Inside ScrollView add a LinearV  linear1 . 2. Add a Map List  urlList , and a Number variable n . 3. Add a RequestNetwork component rn . This will add INTERNET permissions in AndroidManifest.xml. 4. In  onCreate  event: a. Add items to the list with key 'url'. Here add the videos in html iframe codes. <html> <iframe width=100% height=100% src="" frameborder="0" allowfullscreen> </iframe> </html> Note that video URL should be as shown above: VIDEO ID) b. Then use a repeat block. Repeat for l

SubscriptSpan and Superscript span example in Sketchware

SubscriptSpan example The span that moves the position of the text baseline lower. Note: Since the span affects the position of the text, if the text is on the last line of a TextView, it may appear cut. Constructor: SubscriptSpan() Creates a SubscriptSpan. This example shows use of SubscriptSpan in Sketchware. 1. In  main.xml  add a TextView  textview1 . 2. In , create a new String  mystring . 3. In  onCreate  of : a. Set the text of  mystring  to: H2O = Water b. Use an add source directly block to put following codes: // Convert this String to a Spannable String  ss . SpannableString ss = new SpannableString(mystring); // Add SubscriptSpan to 2 of H2O in above text. ss.setSpan(new, 1, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); // Display the Spannable String in TextView. textview1.setText(ss); 4. Save and run the project. It will show result as in image below. SuperscriptSpan e

BulletSpan and DrawableMarginSpan example in Sketchware

BulletSpan example A BulletSpan styles paragraphs as bullet points. BulletSpans are attached from the first character to the last character of a single paragraph. BulletSpans allow configuring the following elements: gap width - the distance, in pixels, between the bullet point and the paragraph. Default value is 2px. color - the bullet point color. By default, the bullet point color is 0 - no color, so it uses the TextView's text color. bullet radius - the radius, in pixels, of the bullet point. Default value is 4px. Constructor: BulletSpan(int gapWidth, int color, int bulletRadius) Creates a BulletSpan based on a gap width and a color integer. This example shows how to add Bullets to paragraphs in a TextView using BulletSpan in Sketchware. 1. In  main.xml  add a TextView  textview1 . 2. In , create a new String  mystring . 3. In  onCreate  of : a. Set the text of  mystring  to your text. So let's set String  myst

Add Clickable links to TextView in Sketchware

Here are two ways of adding clickable links to TextView in Sketchware. Method 1 1. In main.xml add a TextView text_html . 2. Create a String html_string . 3. In onCreate event: a. Set the text of  html_string  to your text in html form with links declared in <a> tag ( <a href=""> Google </a> will display 'Google' in link form). So let's set String  html_string  to: <b>text_html_program: Explicit links using &lt;a&gt; markup.</b> This has markup for a <a href="">link</a> specified via an &lt;a&gt; tag. Use a "tel:" URL to <a href="tel:4155551212">dial a phone number</a>. b. Display this String in TextView. In an add source directly block put following codes: text_html.setText( Html.fromHtml(html_string)); text_html.setMovementMethod(android.text.method.LinkMovementMethod.getInstance()); Method 2 1. In  m