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 class.

6. In More Block createList, add items to maplist using keys 'title' and 'value'.

7. In onCreate, first use block createList, then use following codes:

// Define SlidingPaneLayout, set it's I'd, and add it to linear1.
pane = new androidx.slidingpanelayout.widget.SlidingPaneLayout(MainActivity.this);

// Define FragmentOne and FragmentTwo, and commit FragmentTransaction.
one = new FragmentOne();
two = new FragmentTwo(); ft = getSupportFragmentManager().beginTransaction();
ft.add(123, one, "fragmentone");
ft.add(123, two, "fragmenttwo");

// Add data from maplist to title_list and description_list:
for (int i = 0; i < maplist.size(); i++){


8. In More Block FragmentOne, put following codes:

public static class FragmentOne extends {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Create ListView, set it's adapter, and set OnClickListener for it.
ListView listview1 =new ListView(getActivity());
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, title_list);

listview1.setLayoutParams(new ListView.LayoutParams(500, ListView.LayoutParams.MATCH_PARENT));
listview1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
MainActivity.setTexts(title_list.get(position) , description_list.get(position));
return listview1;



9. In More Block FragmentTwo, put following codes:

public static class FragmentTwo extends {
TextView textview1;
TextView textview2;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.right_pane, container, false);
textview1 = view.findViewById(;
textview2 = view.findViewById(;
textview2.setText("Slide Right -->");
return view;

public void updateTexts(String title, String description) {



10. Save and run the project.


  1. Hi, how to make multiple onclicklistener more simple?
    I have 3 button, to make the button clickable i have to use below code;

    Button btn1=(Button) x.findViewById ( ;
    Button btn2=(Button) x.findViewById ( ;
    Button btn3=(Button) x.findViewById ( ;

    btn1.setOnClickListener(new View.OnClickListener () {
    @Override public void onClick (View view) {
    //effect from the click

    And I have to use the same code for btn2 & btn3.

    Is there other way to make the code more simple for the 3 button clickable and working in sketchware?


Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware