Posts

Showing posts from January, 2018

Firebase auth in Sketchware for Login Activity

Image
To create a login activity using Firebase Auth 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 Email/password and Anonymous.

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. On the MainActivity page add a File Shared preferences component user:user and an Intent i. Also add a Timer t and a Firebase Auth testlogin.



6. Create a new page login.xml with Activity called LoginActivity.

7. In onCreate event of MainActivity use blocks as shown in image below.

It identifies main page with File user key page. It also checks if user is logged in to FirebaseAuth.
If user is logged in then other blocks are executed.
If user is not logged in,…

A simple navigation drawer in Sketchware

Image
In the latest version of Sketchware (v3.0.0), appcompat-v7 and design have been added, and we can now add a navigation drawer to our project. This navigation drawer uses a CustomView drawer_main.xml.

In order to create a Navigation drawer, follow the steps given below.

1. In your Sketchware android project, go to Library manager and switch on AppCompat and Design.
2. In View manager, go to MainActivity.java and select Navigation Drawer Activity.

3. Now go to the CustomView drawer_main and add a LinearV linear1. Set it's width as MATCH_PARENT.

4. Add items in the linear1 of drawer_main and customize it to change it's look.


5. Create a new Intent component i.

6. Now in the EVENT area, under section drawer, add the events you want to execute (like textview2 onClick, textview3 onClick, etc.).

7. Add codes to be executed in each of these events.

8. Save and run the project.


Codes to improve firebase chatting app in sketchware

Image
Here are a few codes which can be used in the chat application created using Firebase in Sketchware.

1. Remove divider​ height of ListView
To remove the divider height of ListView displaying messages, put following code in onCreate, in an add source directly block.
listview1.setDivider(null);
listview1.setDividerHeight(0);

2. Display end of ListView on refresh
To make the ListView scroll to display the last element of list when updated, put following code in onCreate, in an add source directly block.
listview1.setTranscriptMode(ListView.TRANSCRIPT_MODE_ALWAYS_SCROLL);
listview1.setStackFromBottom(true);

3. Set width of ListView items to 3/4 of screen width
Firstly, in CustomView, insert a LinearH linear1, and inside that insert a LinearV linear2. Put all contents to be displayed in linear2.

Now, in event onBindCustomView, add a number variable width. Set width to getDisplayWidthPixels * 0.75, and set it as width of linear2 using following code.
LinearLayout.LayoutParams lp = new LinearLay…

How to DELETE data from FIREBASE database from Sketchware app?

Image
If you have an app which displays data from firebase database in a custom ListView, and you want to delete data from it, then follow this method.

This method of deleting data is for apps which push data to firebase database on button click by using blocks as shown in image below, retrieves data from firebase database, on Firebase DB onChildAdded event, by using blocks as shown in image below,
In order to delete data from this kind of app follow the steps given below.
1. Add a new String list str.
2. In the CustomView, add an ImageView imageview2 and set it's image to delete icon. On clicking this ImageView the item will get deleted.



3. In Firebase DB onChildAdded event, inside Firebase DB... get children to List Map... then block, add the block
Add [childKey] to List String [str],
as shown in image below.
This will create a list of keys or children at the DatabaseReference 'Chat'.

4. In the event onBindCustomView add the block
When [imageview2] clicked,
Inside this use bloc…

Loading​ image from gallery to ImageView in Sketchware

Image
To load an image from gallery to an ImageView in Sketchware app, follow the steps given below.

1. In VIEW area of Sketchware project add a Button button1, and an ImageView imageview1.
2. Set an image as default image of imageview1.

3. Create a new FilePicker picker component for picking images.

4. Now create a new String List list.

5. In the event on button1 Click , use the block
FilePicker picker pick files.
This will open the gallery when button1 is clicked, and allow users to pick any image.

6. In EVENT area add a new event FilePicker onFilesPicked under Component section.

7. In the event FilePicker onFilesPicked use the blocks:
ImageView imageview1 set image from file path ....
and
get at 0 of List String : filePath
as shown in image below, to set the selected image as image of imageview1.


8. Save and Run the project. Now when the user clicks button1, he can browse through gallery and select an image. The selected image will be displayed in imageview1.

Watch the videos below.
i. Pic…