SlidingPaneLayout in Sketchware

Here is a simple example of SlidingPaneLayout in Sketchware. Follow the steps below.

1. Create a new project. Switch on AppCompat and Design.

2. In main.xml add a LinearV linear1, and set padding to 0.

3. Create a Custom View right_pane.xml. Here add two TextViews textview1 and textview2.

4. Add a ListMap maplist, a Map map, and four More Blocks extra, createList, fragmentOne, fragmentTwo.

5. In More Block extra, declare static variables pane, one, two, title_list, and description_list. Also define a static void method setTexts(String, String).


public static androidx.slidingpanelayout.widget.SlidingPaneLayout pane;

public static FragmentOne one;
public static FragmentTwo two;

public static ArrayList<String> title_list = new ArrayList<>();

public static ArrayList<String> description_list = new ArrayList<>();

public static void setTexts(String a, String b){
two.updateTexts(a, b);


The method updateTexts(String, String) used here is a method defined in FragmentTwo cla…

Create app to save all passwords, protected using voice key

1. Create a new app in Sketchware.

2. Apart from main.xml, add three new pages, list.xml, add.xml, password.xml.

3. In main.xml/MainActivity:
i. add two TextViews: textview1 and textview2.

ii. Add following components: Intent i, SpeechToText spttxt, and SharedPreferences sp:sp.

iii. In onCreate event, if some password is saved in SharedPreferences, make textview2 GONE, and set textview1 to empty.
iv. In textview1 onClick event, if saved password is '-none' use Intent to move to ListActivity, else set SpeechToText start listening.

v. In the event SpeechToText: onSpeechResponse, if result equals saved password, or if result equals 'ON' and no password is saved, use Intent to move to ListActivity, else FinishActivity.
vi. In the event SpeechToText: onSpeechError, FinishActivity.

4. In Image Manager add images ic_add_white and ic_settings_white.

5. Create a new CustomView items.xml. Here add textview1 for site, textview2 for username, textview3 for password, and textview4

Find and Highlight text in ListView

Follow the steps given below to find and highlight text, entered in EditText, in a custom  ListView  in Sketchware. This method makes the use of class Spannable.

1. In VIEW area of your sketchware project, add an EditText and a ListView (edittext1 and listview1).

2. Add a new CustomView custom.xml. In this CustomView add two TextViews (textview1 and textview2).

3. Now in properties of ListView, select the new CustomView added as it's customView.
4. In LOGIC area of your app, add a new List Map: maplist1., and a new Map: map1. Also add a Number variable index and three String variables Name, Number and term.

5. In onCreate event in your project, Create a new Map, add items to the Map using keys Name and Number (change or increase keys per your need), and add the Map to the List Map: maplist1. In this way add as many items as desired. In the end use Block setListCustomViewData to display the List Map in ListView. (See image below).

6. Add a new event​ ListView: onBindCustomView and…

DatePickerDialog with spinner mode themes

It doesn't work on Nougat, Android 7.0+
To create a DatePickerDialog in Sketchware android project follow the steps given below.

1. In VIEW area of your sketchware android project, insert a LinearH and inside it insert a TextView textview1, and a Button button1.

2. Add a More Block 'extra'.

3. To define the block extra, insert an add source directly block and put following code in it:
public void showDatePickerDialog(View v) {
DialogFragment newFragment = new DatePickerFragment();, "datePicker");
public class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {
public Dialog onCreateDialog(Bundle savedInstanceState) {
final Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH);
return new DatePickerDialog(getActivity(),, this, year, month, day);
public void onDateSet…

Scrollable TabLayout in Sketchware

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) tabLayout = new;
// Make TabLayout 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

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 {

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

// Get Title of pages