Posts

Scrollable TabLayout in Sketchware

Image
The example provided below shows how to create a simple scrollable TabLayout and add a TabLayout.OnTabSelectedListener to it in Sketchware.

1. In VIEW area of main.xml add a Linear Vertical linear1 with width and height as match_parent. Inside it add a Linear Horizontal linear2.

2. Switch On AppCompat and design.

3. In onCreate event, use an add source directly block and put following codes.
// Create a TabLayout (tabLayout)
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
// Make TabLayout scrollable
tabLayout.setTabMode(android.support.design.widget.TabLayout.MODE_SCROLLABLE);
// Add Tabs to the TabLayout
tabLayout.addTab(tabLayout.newTab().setText("Sunday")); tabLayout.addTab(tabLayout.newTab().setText("Monday")); tabLayout.addTab(tabLayout.newTab().setText("Tuesday"));
tabLayout.addTab(tabLayout.newTab().setText("Wednesday")); tabLayout.addTab(tabLayout.newTab().setText("Thursday")…

ViewPager in Sketchware

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

1. In VIEW area of main.xml add a Linear vertical linear1 with width and height as match_parent. ViewPager will be created programmatically and added to linear1.

2. Switch On AppCompat and design.

3. Set white color as colorAccent.

4. Add three CustomView pages page1.xml, page3.xml, and page5.xml. These will act as the pages of the ViewPager.

In page1.xml add a Switch switch2.

In page3.xml add a TextView textview1.

In page5.xml add a Button button1.


5. 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.page1, R.layout.page3, R.layout.page5
};

// Define Adapter for ViewPager
private class MyPagerAdapter extends android.support.v4.view.PagerAdapter {

// Get total number of pages
public int getCount() {
return pageId.length;
}

// Get Title of pages
@Override
publi…

PieChart from Json Array in Sketchware

Image
In Sketchware, to create an app in which data with numerical values can be added and viewed as a pie chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add a Button button2 and a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.
4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, and an Intent component i.

6. Add a String variable jsondata, and a ListMap maplist.

7. In onCreate event use blocks to set jsondata to your Json data containing 'text' and 'number' as keys. Convert it to List Map maplist and display it in ListView.

The Json String used here is:
[
{
"text" : "Afghan Afghani",
"number" : "0.9532"
},
{
"text" : "Armenian Dram",
"number" : "0.1487"
},
{
"text" : "Bangladeshi Taka",
"number" : "0.8572"…

Pie Chart View in Sketchware

Image
In Sketchware, to create an app in which data with numerical values can be added and viewed as a pie chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add two Buttons button1 and button2, and a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.
4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, a Dialog component dialog_add, and an Intent component i.

6. Add a Map variable map, three String variables jsondatalabel and value, and a ListMap maplist.

7. In onCreate event use blocks to get data from shared preferences to maplist and display it in ListView.
8. In onBindCustomView event, display the data from maplist in the TextViews in CustomView items.xml.

9. Create a CustomView dialog_view.xml containing LinearLayout linear2 and linear3 for adding EditText fields created programmatically.

10. In the event button1 onClick (Add B…

Bar chart from json array in Sketchware

Image
In Sketchware, to create an app in which data with numerical values can be added and viewed as a Bar chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add a Button button1 and a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.
4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, and an Intent component i.

6. Add a String variable jsondata, and a ListMap maplist.

7. In onCreate event use blocks to set jsondata to your Json data containing 'text' and 'number' as keys. Convert it to List Map maplist and display it in ListView.

The Json String used here is:
[
{
"text" : "Afghan Afghani",
"number" : "0.9532"
},
{
"text" : "Armenian Dram",
"number" : "0.1487"
},
{
"text" : "Bangladeshi Taka",
"number" : "0.8572"…

BarChart in Sketchware android project

Image
In Sketchware, to create an app in which data with numerical values can be added and viewed as a Bar chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add two Buttons button1 and button2, and a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.
4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, a Dialog component dialog_add, and an Intent component i.

6. Add a Map variable map, three String variables jsondata, label and value, and a ListMap maplist.

7. In onCreate event use blocks to get data from shared preferences to maplist and display it in ListView.
8. In onBindCustomView event, display the data from maplist in the TextViews in CustomView items.xml.

9. Create a CustomView dialog_view.xml containing LinearLayout linear2 and linear3 for adding EditText fields created programmatically.

10. In the event button1 onClick (Add B…

Simple car racing android game in Sketchware

Image
To create a simple car racing game in sketchware follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area of main.xml add a TextView textview3 for displaying score of previous game, a TextView textview4 for displaying high score, and a Button button1 for starting game.

3. In MainActivity, add a Shared Preferences component sp:sp.

4. Add onStart event and put blocks to set the text of textview3 and textview4.

5. Create a new page page2.xml.

6. On button1 click use intent to move to page2.

7. On page2.xml add a LinearV linear1 with padding 0 and width and height MATCH_PARENT.

8. In Page2Activity, add a Shared Preferences component sp:sp.

9. Create a number variable highscore.

10. In onCreate event of Page2Activity, use blocks to set the value of number variable highscore, and use codes to create a new GameView and add it to linear1, as shown in image below.

The code used in the add source directly block is:
GameView bcv = new GameView(this);
linear1.addView(bc…