How to change status bar color in Sketchware?

Earlier code injection method was required for changing status bar color in sketchware. But now in newer versions of sketchware it can easily be done using add source directly block.

To change the status bar color in sketchware project, insert add source directly block in onCreate event in LOGIC of the project, and then write the following code.

Window w = this.getWindow();
w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); w.setStatusBarColor(Color.parseColor("#000000"));

Change the hex color code in last line of the code as per the requirement. It will change color of status bar to the color code provided in the code above.

This code has to be used on each screen of the app.

Read More

How to enable upload from webview in Sketchware?

Now that Sketchware has a block to add java code directly in the project, it is possible to enable file upload in webview.

To enable file upload in webview in sketchware app, follow the steps given below.

1. Insert a webview in VIEW area in the sketchware project. Note the ID of webview, usually it is webview1.

2. In LOGIC area of project, in onCreate event, add the block add source directly and copy the following code in it:

webview1.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) {
mFilePathCallback = filePathCallback;
Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.setType("*/*"); startActivityForResult(intent, PICKFILE_REQUEST_CODE);
return true;
}
});

Note that if the ID of webview is not webview1, change it accordingly in the code above.

3. Add the block webview loadUrl and write the url to be loaded in webview.

4. Add another add source directly block and copy the following code in it:

}
private ValueCallback <Uri[]> mFilePathCallback;
private static final int PICKFILE_REQUEST_CODE = 0;

@Override protected void onActivityResult(int requestCode, int resultCode, Intent intent) { if (requestCode == PICKFILE_REQUEST_CODE) { Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
Uri[] resultsArray = new Uri[1];
resultsArray[0] = result;
mFilePathCallback.onReceiveValue(resultsArray); }

The code is for android versions 5.0 (Android lollipop) and above.

Read More

How to enable image upload in webview using AIDE

To enable uploading image from webview in android app, follow the steps given below.

1. Open your project in AIDE app. If you are using Sketchware, export source code and then decompress it in a folder. Open the folder containing decompressed code using AIDE.

2. In app level build.gradle file, add the following library to dependencies:
compile 'com.android.support:appcompat-v7:+'

In MainActivity.java

3. Import the following:

import android.annotation.SuppressLint;
import android.provider.MediaStore;
import android.support.annotation.NonNull;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import java.io.File;
import java.io.IOException;

4. Add the following code after the line private webview webview1;

private static final String TAG = MainActivity.class.getSimpleName();
    private String mCM;
    private ValueCallback <Uri> mUM;
    private ValueCallback <Uri[]> mUMA;
    private final static int FCR=1;

5. Add the following code before onCreate event:

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent){
        super.onActivityResult(requestCode, resultCode, intent);
        if(Build.VERSION.SDK_INT >= 21){
            Uri[] results = null;
            //Check if response is positive
            if(resultCode== Activity.RESULT_OK){
                if(requestCode == FCR){
                    if(null == mUMA){
                        return;
                    }
                    if(intent == null){
                        //Capture Photo if no image available
                        if(mCM != null){
                            results = new Uri[]{Uri.parse(mCM)};
                        }
                    }else{
                        String dataString = intent.getDataString();
                        if(dataString != null){
                            results = new Uri[]{Uri.parse(dataString)};
                        }
                    }
                }
            }
            mUMA.onReceiveValue(results);
            mUMA = null;
        }else{
            if(requestCode == FCR){
                if(null == mUM) return;
                Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
                mUM.onReceiveValue(result);
                mUM = null;
            }
        }
    }

    @SuppressLint({"SetJavaScriptEnabled", "WrongViewCast"})


6. Add following code in private void initialize() method, just before closing bracket } :

webview1.setWebChromeClient(new WebChromeClient(){
public boolean onShowFileChooser(
WebView webView, ValueCallback <Uri[]> filePathCallback,
WebChromeClient.FileChooserParams fileChooserParams){
if(mUMA != null){
mUMA.onReceiveValue(null);
}
mUMA = filePathCallback;
Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
if(takePictureIntent.resolveActivity(MainActivity.this.getPackageManager()) != null){
File photoFile = null;
try{
photoFile = createImageFile();
takePictureIntent.putExtra("PhotoPath", mCM);
}catch(IOException ex){
Log.e(TAG, "Image file creation failed", ex);
}
if(photoFile != null){
mCM = "file:" + photoFile.getAbsolutePath();
takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
}else{
takePictureIntent = null;
}
}
Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
contentSelectionIntent.setType("image/*");
Intent[] intentArray;
if(takePictureIntent != null){
intentArray = new Intent[]{takePictureIntent};
}else{
intentArray = new Intent[0];
}

Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
startActivityForResult(chooserIntent, FCR);
return true;
}
});

This code enables only image upload. In order to enable upload of all types of files, in the code above, replace
contentSelectionIntent.setType("image/*");
With
contentSelectionIntent.setType("*/*");

7. Add following code just before private void initializeLogic() method:

private File createImageFile() throws IOException{
@SuppressLint("SimpleDateFormat") String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
String imageFileName = "img_"+timeStamp+"_";
File storageDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
return File.createTempFile(imageFileName,".jpg",storageDir);
}

8. Save and check for errors. Run the project if there are no errors.

Read More

How to create a dictionary app in Sketchware?

An android app for a dictionary can be created in sketchware using File:shared preferences component. Follow the steps below to create a dictionary app.

1. Start a new project in Sketchware.

2. In VIEW area of project, insert a Linear (H) with Edittext, and a Linear (V) with a ListView and two Textviews.

3. In LOGIC area add a new File (shared preference) component.

4. Go to onCreate event and more blocks named Awords, Bwords, Cwords, etc.

5. Also add a string list and a number variable.

6. In Awords, sequentially add words starting with letter A to file with an integer as key; then add meaning of each word to file with the word itself as key. Similarly add words and meanings to file for defining Bwords, Cwords, etc.

7. In onCreate event, add all words to file by using more blocks. Also add all words to the list and ListView. Use blocks as shown in the image below.

8. Now add events Edittext onTextChanged and ListView onItemClicked.

9. In event Edittext onTextChanged, search file for words with characters entered in Edittext and display them in ListView, using blocks as in the images below.

To be able to search for words with both upper and lower case characters, replace
If (File f getData key (toString a without decimal) substring 0 to length of charSeq) contains (charSeq)
with
If toLowerCase(File f getData key (toString a without decimal) substring 0 to length of charSeq) contains toLowerCase(charSeq)

10. In event ListView onItemClicked, display the meaning of the word clicked, by using blocks as shown in the image below.

11. Save and run the project.

That's all. The dictionary app is ready.

Watch the video below, it will help you understand better:

Second video on how to create a dictionary app:

Read More

How to integrate Admob interstitial ads using​ AIDE?

AIDE can be used to integrate Admob Ads to a Sketchware project. Follow the steps below to integrate Admob interstitial ads to a sketchware project using AIDE.

Prerequisites

• An Android project (Sketchware project)
• AIDE with pro account key purchased
• Account in Google developer console
• Account in Admob

Before placing admob ads in an app, the app needs to be uploaded to google play store, however test ads can be tried in any app.

Always place the test ad ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required.

Do not click on your own Ads.

Export the Sketchware project

In Sketchware, under MY PROJECTS, go to project settings of the app to be exported, and click on Export to PC (Android Studio).

The exported file is a zip file. Create a new folder and decompress the contents of the zip file in it.

Check whether the res folder at location app/src/main/res contains only layout folder with all xml files or it contains all other folders like drawable, drawable-xhdpi, raw, values, values-v21. If all these folders are present then move to the next step of editing AndroidManifest.xml.

Edit the AndroidManifest.xml file

Open AIDE, browse to the AndroidManifest.xml file of the exported project and open it.

In manifest element, after package name, add following:
 android:versionCode="2"
 android:versionName="1.2"
Change version code and version name as per your project.

After that add the following permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

In application element, add the following meta-data:
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />

Also add the following activity:
<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />

Save the file after editing.

Edit MainActivity.java file

Add the following code in imports:
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.InterstitialAd;
import com.google.android.gms.ads.AdListener;

After the code 'public class MainActivity extends Activity {' add the following code:
private InterstitialAd mInterstitialAd;

After that create and load ad by adding following code after line 'setContentView(R.layout.activity_main);' in onCreate event:
mInterstitialAd = new InterstitialAd(this);
mInterstitialAd.setAdUnitId("ca-app-pub-3940256099942544/1033173712");
mInterstitialAd.loadAd(new AdRequest.Builder().build());

After testing with test ads replace the adUnitId with your own adUnitId.

Then after the code to create and load ad, add code for adListener just below it:

mInterstitialAd.setAdListener(new AdListener() {
@Override
public void onAdLoaded() {
// Code to be executed when an ad finishes loading.
Log.i("Ads", "onAdLoaded");
}

@Override
public void onAdFailedToLoad(int errorCode) {
// Code to be executed when an ad request fails.
Log.i("Ads", "onAdFailedToLoad");
}

@Override
public void onAdOpened() {
// Code to be executed when the ad is displayed.
Log.i("Ads", "onAdOpened");
}

@Override
public void onAdLeftApplication() {
// Code to be executed when the user has left the app.
Log.i("Ads", "onAdLeftApplication");
}

@Override
public void onAdClosed() {
// Code to be executed when when the interstitial ad is closed.
Log.i("Ads", "onAdClosed");
mInterstitialAd.loadAd(new AdRequest.Builder().build());
}
});

Add code to show the ad

The code to display interstitial ads has to be added to the event or activity when the ad is intended to be displayed. The code for displaying ads is:
if (mInterstitialAd.isLoaded()) {
            mInterstitialAd.show();
        } else {
           Log.d("TAG", "The interstitial wasn't loaded yet.");

        }

If you want to display ads on page start then it should look like this:

@Override
public void onStart() {
super.onStart();
if (mInterstitialAd.isLoaded()) {
            mInterstitialAd.show();
        } else {
            Log.d("TAG", "The interstitial wasn't loaded yet.");
        }
}

Changes to build.gradle file

Navigate to app level build.gradle and Add following to project:
'com.google.android.gms:play-services-ads:+'

Also, in build.gradle file change version code and version name to same as in AndroidManifest.xml.

Save the file.

After this if you find no errors, then run the project. If you find the error 'R cannot be resolved', then go to AndroidManifest.xml and make any small change like removing a space and then save the file again. If you find any other error, try to resolve as per the error message.

Watch the video below to understand better:

This post is only regarding integration of Admob interstitial ads. The App ID and Ad unit ID used here are those for test ads and can be used in any android project. The ad unit ID for interstitial ads and banner ads are different.

For banner ads integration using AIDE click here.

Read More

How to integrate Admob Ads in Sketchware project using AIDE?

AIDE can be used to integrate Admob Ads to a Sketchware project. For that the source code needs to be exported first. Follow the steps below to learn the complete process.

Prerequisites

• A Sketchware project
• AIDE with pro account key purchased
• Account in Google developer console
• Account in Admob

Before placing admob ads in an app, the app needs to be uploaded to google play store, however test ads can be tried in any app.

Always place the test ad ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required.

Do not click on your own Ads.

Export the Sketchware project

In Sketchware, under MY PROJECTS, go to project settings of the app to be exported, and click on Export to PC (Android Studio).

The exported file is a zip file. Create a new folder and decompress the contents of the zip file in it.

Check whether the res folder at location app/src/main/res contains only layout folder with all xml files or it contains all other folders like drawable, drawable-xhdpi, raw, values, values-v21.

If all these folders are present then move to the next step of editing AndroidManifest.xml.

If the folders like drawable, drawable-xhdpi, raw, values, values-v21 are missing then they should be added manually as described below.

Add these folders, namely drawable, drawable-xhdpi, raw, values, values-v21, in the res folder.

Now copy all images used in the sketchware project from location:
sdcard/.sketchware/resources/images/621(specific to project)/
to the drawable folder created in exported project.

Also copy the image used as app icon to the drawable-xhdpi folder and rename the image as app_icon.png.

Copy all sound files to raw folder in the exported project.

To values and values-v21 folders add styles.xml files, which contains​ information on theme of project (like NoActionBar) and other details regarding the project. Earlier these files were available on exporting source code from sketchware, but now sketchware doesn't provide these. Styles.xml files from one of my older sketchware projects can be downloaded from this link: https://docs.google.com/uc?export=download&id=0B66os0i4YjhqWTlBc05kZEx0SFU.

Edit the AndroidManifest.xml file

Open AIDE, browse to the AndroidManifest.xml file of the exported project and open it.

In manifest element, after package name, add following:
 android:versionCode="2"
 android:versionName="1.2"
Change version code and version name as per your project.

After that add the following permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

In application element, add the following meta-data:
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />

Also add the following activity:
<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />

Save the file after editing.

Edit main.xml file

In main.xml file change the outermost LinearLayout to RelativeLayout (optional). For this the first and last line of main.xml is to be changed.

Now in RelativeLayout element add the following code:
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"

Then add the code for banner ad just before closing RelativeLayout element.

<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>

After that save the file. Note that this code can be placed in all the pages where ads are to be displayed.

Also the adUnitId has to be replaced with your own after testing with test ads.

Edit MainActivity.java file

Add the following code in imports:
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.AdListener;

And following code as shown in image below:
private AdView mAdView;

After that initialize and load Adview, and setAdListener with following code:
MobileAds.initialize(getApplicationContext(), "ca-app-pub-3940256099942544~3347511713");
mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);

mAdView.setAdListener(new AdListener() {
@Override
public void onAdLoaded() {
// Code to be executed when an ad finishes loading.
Log.i("Ads", "onAdLoaded");
}
@Override
public void onAdFailedToLoad(int errorCode) {
// Code to be executed when an ad request fails.
Log.i("Ads", "onAdFailedToLoad");
}
@Override
public void onAdOpened() {
// Code to be executed when an ad opens an overlay that
// covers the screen.
Log.i("Ads", "onAdOpened");
}
@Override
public void onAdLeftApplication() {
// Code to be executed when the user has left the app.
Log.i("Ads", "onAdLeftApplication");
 }
@Override
public void onAdClosed() {
// Code to be executed when when the user is about to return
// to the app after tapping on an ad.
Log.i("Ads", "onAdClosed");
}
});

The App ID here has to be replaced with your own App ID received from Admob.

Changes to build.gradle file

Navigate to app level build.gradle and Add following to project:
'com.google.android.gms:play-services-ads:+'

Also, in build.gradle file change version code and version name to same as in AndroidManifest.xml.

Save the file.

After this if you find no errors, then run the project. If you find the error 'R cannot be resolved', then go to main.xml and make any small change and then save the file again. If you find any other error, try to resolve as per the error message.

Watch the videos below to understand better:

This post is only regarding integration of Admob banner ads. The App ID and Ad unit ID used here are those for test ads and can be used in any android project.

For interstitial ads, get the ad unit ID and code from admob follow the steps here:
http://www.sketchwarehelp.com/2017/09/how-to-integrate-admob-interstitial-ads.html.

For more information on integration of Admob Ads visit here:
https://developers.google.com/admob/android/quick-start?hl=en-GB.

Read More

Use of List String blocks in Sketchware android projects

A string list is an ordered collection of strings, where user has precise control over where in list each string is added. Use of list blocks in Sketchware projects is described below.

Adding elements to list

Elements can be add to a list one by one, and they take the position as per the sequence in which they are added.
For example, if we add Google, Yahoo, Amazon, YouTube, and Android to a list, they will take positions 0, 1, 2, 3, and 4 respectively.

If a very large number of elements are to be added to the list, as in some kind of word game, then multiple more blocks can be used to add elements to the list, and the more blocks can be used in a sequence in the event where list is to be created.
The images below show an example.

An important aspect of lists is that they allow duplicate elements and they allow multiple null elements.

Using List elements in Spinner or ListView

Elements added to a list can be shown in Spinner or ListView by setting their data to the list, as shown in the images below.
  a. Use of list in ListView

  b. Use of list in Spinner

Use of individual list blocks

1. Add...to List String...

This block is used to add elements to a list, as described above.

2. Inset...at...to List String...

This block can be used to insert an element at a particular position in between a list. If an element is inserted at position 3, the previous element at position 3 will shift to position 4, and all other elements at later positions will shift to one higher position.

The blocks used in the image above will give following result.

3. Delete at...of List...

This block can be used to delete an element from a particular position in list. All elements at higher positions will then shift down by one position.

4. Get at...of List String...

This block gets an element from a particular position in list.

5. Index...in list string...

This block gets the position of an element. For example, if Yahoo is at position 1, index Yahoo in List String will return result 1.

6. List String... contains...

This block checks if a particular string is there in the list.

7. Length of List...

This block gets the number of elements in the List. It counts from 1 to the last element. Thus, length of list is one higher than the last position in list.

8. Clear List...

This block deletes elements from all positions of the list.

Read More