Posts

Drag and drop in Sketchware

Image
Here is an example of implementation of a simple drag and drop operation in Sketchware. Follow the steps given below.

1. Create a new project in Sketchware.
2. In main.xml, add a LinearH linear1 with width and height match_parent. Inside linear1 and a LinearV linear2 and a LinearH linear3.
For linear3 set background colour as grey.
Inside linear2 add three ImageViews with width and height 50, and scale type FIT_CENTER.
2. Add three Images and set them as images of ImageViews in linear2.
3. Add a Vibrator component vib.
4. Create two More Blocks: i. setLongClickListener to ImageView:imageview ii. drag_listener Note that setLongClickListener block contains an ImageView variable imageview.
5. Define more block setLongClickListener by using following codes: _imageview.setOnLongClickListener(new View.OnLongClickListener() { public boolean onLongClick(View v) { ClipData.Item item = new ClipData.Item(v.getTag().toString()); ClipData dragData = new ClipData(v.getTag().toString(), new String[]{ Cl…

FirebaseAuth phone number verification in Sketchware

Image
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, sendVerificationCode and verifyCode.

10. Create…

Create list of YouTube videos with thumbnails and titles

Image
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 https://youtu.be/dPHreMHHoGY  
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
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=
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. Add RequestNetworkonResponse method. Here, Get the response to map variabl…

YouTube Videos List in Sketchware

Image
Improved app on this topic
https://www.sketchwarehelp.com/2020/03/create-list-of-youtube-videos-with.html?m=1

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="https://www.youtube.com/embed/abIuko6FM3M" frameborder="0" allowfullscreen>
</iframe>
</html>

Note that video URL should be as shown above:
https://www.youtube.com/embed/( VIDEO ID)

b. Then use a repeat block. Repeat for length of List urlList.

c. Inside repeat bloc…

SubscriptSpan and Superscript span example in Sketchware

Image
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 MainActivity.java, create a new String mystring.

3. In onCreate of MainActivity.java:
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 android.text.style.SubscriptSpan(), 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 example

The span that moves the position of the text baseline h…

BulletSpan and DrawableMarginSpan example in Sketchware

Image
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 MainActivity.java, create a new String mystring.

3. In onCreate of MainActivity.java:
a. Set the text of mystring to your text.
So let's set String mystring to:
BulletSpans allow configuring the fol…

Add Clickable links to TextView in Sketchware

Image
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="http://google.com"> 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="http://www.google.com">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 main.xml add a TextView text_spannabl…

Androidx ViewPager in Sketchware

Image
The example provided below shows how to create a simple ViewPager with four pages in Sketchware.

1. In VIEW area of main.xml add a LinearV linear1 with width and height as match_parent. Set it's padding to 0. ViewPager will be created programmatically and added to linear1.

2. Switch On AppCompat and design.


3. Add four CustomViews page0.xmlpage1.xmlpage2.xml, and page3.xml. These will act as the pages of the ViewPager.

In page0.xml add a TextView textview1.


In page1.xml add a TextView textview1.


In page2.xml add a Button button1.


In page3.xml add a TextView textview1.

4. Create a more block extra and define the block using an add source directly block.

Put following code in the add source directly block.

}
// Create a list of pages
int[] pageId = {
R.layout.page0, R.layout.page1, R.layout.page2, R.layout.page3
};

// Define PagerAdapter for ViewPager
private class MyPagerAdapter extends androidx.viewpager.widget.PagerAdapter {

// Get total number of pages
public int getCount() {
retu…