Posts

Showing posts from July, 2017

Android App: Let people find your shop on map

Image
In android a button or any other event can be set to open a particular location in Google Maps app, with the use of Intent.

Suppose you have an Android app for your shop or organization developed in Sketchware, and you want people to reach you. You can provide your address to the app users but a location on maps is always better and preferable. Below is a description of how to link to Google Maps from an android app created in Sketchware.

For this Google maps app is a prerequisite and if your user do not have it installed on their device, they may not be able to locate your address on map.

Step 1. Download Sketchware App, and create an app for your shop. Insert a button which says 'Locate us' or 'Reach us'.

Step 2. Add a new Intent component and name it as share.

Step 3. Open Google Maps app. Find Your shop and copy it's coordinates.
 Or copy share URL for your address.
Step 4. In button onClick event, use blocks as shown below to link your app to Google Maps.
Inte…

Creating a Quiz Android App

Image
This is a tutorial on creating a quiz in Android. After this tutorial you will be able to create your own Android App with your own quiz.
Follow the instructions given below to learn how to create a quiz app in Android.
1. Download Sketchware App for Android devices.
2. Open Sketchware and start a new project. Enter the app name and other details as per your wishes and click save.
3. Now in the View area (main.xml), insert a Scroll(V) and inside that a Linear(V). Set the width of both the Layouts to match parent and set the padding of Scroll(V) to 0. Also set the background color of Linear(V) to green or a color of your choice, and gravity of Linear(V) to center_horizontal, center_vertical.
4. Now insert 4 button widgets (depends on your requirement), one each for each of the quiz. Each quiz can have several questions. Rename the buttons as Quiz1, Quiz2, Quiz3 and Quiz4 respectively. Now for each of the buttons: increase font size to 18, set margin of each to 8, set text style to bol…

Difference between setVisible_INVISIBLE and setVisible_GONE

Image
Though both setVisible INVISIBLE and setVisible GONE appear to achieve similar tasks, but both are different.

With setVisible INVISIBLE object remains on screen but is not seen. Whereas with setVisible GONE, object disappears from screen.

Here is an illustration. Suppose there are six imageviews arranged horizontally inside a linear horizontal as shown below.

Now in the Logic section, if the fourth image is set VISIBLE and rest of the images are set INVISIBLE,
the fourth image will be visible at it's position and rest of the images will disappear, as shown in the image below.

Whereas if the fourth image is set VISIBLE and rest of the images are set GONE,
all other images will disappear and fourth image will shift to left to occupy the initial available space on left side, as shown in the image below.

It appears to be a simple difference but it is important to be aware of this as it can be useful in fixing many bugs in android games and apps.

Use of Intent to share text and links

Image
The text from Edittext fields and from Textview fields can be shared from the App using Intent. Here are the Logic blocks to be used for the purpose.

1. To share text to WhatsApp Intent (name) setActionACTION_VIEWIntent (name) setDatajoin whatsapp://send?text=and (Edittext/Textview)getTextStartActivity (name)
2. To share text to Twitter Intent (name) setActionACTION_VIEWIntent (name) setData join http://twitter.com/share?text=and (Edittext/Textview)getTextStartActivity (name)
3. To share text on Facebook Intent (name) setActionACTION_VIEWIntent (name) setData joinhttps://www.facebook.com/sharer.php?u=[URL]&t=and (Edittext/Textview)getTextStartActivity (name)
4. To share on Google plus Intent (name) setActionACTION_VIEWIntent (name) setData joinhttps://plus.google.com/share?url=[URL]&text=and (Edittext/Textview)getTextStartActivity (name)
5. To share a link on LinkedIn Intent (name) setActionACTION_VIEWIntent (name) setDatahttps://www.linkedin.com/shareArticle?mini=true&url=[UR…

Use of Intent to Mail, SMS, MMS and Call

Image
In Sketchware, the uses of Intent activity are limited as it contains only three setAction options: ACTION_VIEW, ACTION_DIAL, and ACTION_CALL.

Here I mention the logic/codes for a few uses of Intent.

1. Open a Url in mobile browser.
Intent (name) setActionACTION_VIEWIntent (name) setDatahttp://xyz.comStartActivity (name) 2. Open mobile contacts. Intent (name) setActionACTION_VIEWIntent (name) setDatacontent://contacts/people/StartActivity (name) 3. Open mobile dialer. Intent (name) setActionACTION_DIALIntent (name) setDatatel:894......StartActivity (name) Also, Intent (name) setActionACTION_VIEWIntent (name) setDatatel:894......StartActivity (name) 4. Call a number. Intent (name) setActionACTION_CALLIntent (name) setDatatel:894......StartActivity (name) 5. Send Email. Intent (name) setActionACTION_VIEWIntent (name) setDatamailto:myname@gmail.comIntent (name) putExtra key subject value write your subjectIntent (name) putExtra keybody value write your message which is to be mailedStartActivi…

How to create a new screen and link to it in Sketchware

Image
To link to a new screen in your Sketchware App, follow the instructions given below:

1. Click on main.xml at left bottom of screen and click on add symbol to add a new View.

2. Give a name to your new screen (View name).

3. Next add a new Intent component.
 4. Use Intent setScreen and Start Activity blocks in the event when you want to open a new screen.

Embed one or more YouTube videos​ in Sketchware App

Image
Embedding a YouTube video in Sketchware Android App is very easy using iframe. YouTube itself provides the iframe code for embedding youtube videos.

To insert a YouTube video in your app, insert a webview in View area, at a location you want to display the YouTube video. You can insert more webview widgets, one for each video you want to display.

Set the layout_height of all webview widgets to wrap_content.

After that in Logic area, in On activity create event, use webview loadUrl block. In the space for Url, write the following code as shown in image below:
data:text/html, <iframe width="100%" height="" src="http://www.youtube.com/embed/5aMQZ7mSgD4" frameborder="0"></iframe>

Replace the highlighted code with your YouTube video id, and change height and width of iframe as per your requirement.

Save and Run the App. Your app will display your YouTube videos at your desired location.

Here is a video of the process:

Vertical Sliding menu in Sketchware

Image
To create a sliding menu in Sketchware, with links to different websites, follow the steps below.

1. In View area insert two linear(H). Insert a spinnerin first linear(H), and a webview in second linear(H). Set padding of both linear(H) to 0, and set layout_height of second linear(H) to match parent.

2. In view manager, change theme to NoActionBar.

3. In image manager​, select an icon to be used as menu button.

4. Set background color of the first linear(H) to green/blue, or any color of your choice.

5. Change layout_width and layout_height of spinner to 40dp each. Also set background_resource of spinner to the Image icon selected in image manager.

6. Move to logic area and create a new string list. Add items to this list and then setSpinnerdata to the list.

7. Add event spinner onitemselected.

8. In spinner on item selected, use webview loadUrl block to load the item selected in spinner,
9. Save and run your app. It will display the menu icon in status bar, and load Url of item sele…

Textview customization in Sketchware

The properties of textview in Sketchware app can be modified in order to create desirable text output. Here is a description of the properties which can be modified.

ID: This is name of the textview, and can be modified for ease of identification if we have many textviews.layout_width/layout height: They determine the width and height of the textview widget and can be set to match parent (where they occupy the space available), wrap content (where they change size to accommodate the contents), or to custom dp.padding: Determines the size of the area around  the contents inside the border of textview.margin: Determines the size of the white space outside the border.gravity: Determines the orientation of texts inside Textview widget.layout_gravity: Determines the orientation of textview widget inside the container layout widget.weight: Weight is set to 0 by default. It can be increased to push other widgets to border and occupy remaining height.text: Here the text to be displayed in Tex…

List of Calendar Format symbols valid in Sketchware

Image
The calendar Format block in Sketchware provides a space where we can write the format in which we want the date or time to be displayed. We can use various symbols to construct our own custom date format.

Here is a list of valid symbols along with their use which can be used in Sketchware for formatting the date/calendar.
In all examples the date 12 Jul 2017 17:19:56 has been used.
d: date of month without 0 prefix, e.g. 12.dd: date of month in two digits, e.g. 12.M: month in year, e.g. 7.MM: month in year in two digits, e.g. 07.MMM: month name in year displayed as three letter abbreviation, e.g. Jul.MMMM: month in year displayed as full month name, e.g. July.MMMMM: first letter of month name, e.g. J.y : year, e.g. 2017.yy: last two digits of year, e.g. 17.yyyy: year, e.g. 2017.h: hour in day in 12-hour format, e.g. 5.hh: hour in day in two digits, e.g. 05.H: hour in day in 24-hour format, e.g. 17.HH: hour in day 24-hour format in two digits.m: minutes in hour.mm: minutes in hour in …