Androidx ViewPager in Sketchware

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

1. In VIEW area of main.xml add a LinearV linear1 with width and height as match_parent. Set it's padding to 0. ViewPager will be created programmatically and added to linear1.

2. Switch On AppCompat and design.

3. Add four CustomViews page0.xml, page1.xml, page2.xml, and page3.xml. These will act as the pages of the ViewPager.

In page0.xml add a TextView textview1.

In page1.xml add a TextView textview1.

In page2.xml add a Button button1.

In page3.xml add a TextView textview1.

4. 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.page0, R.layout.page1, R.layout.page2, R.layout.page3
};

// Define PagerAdapter for ViewPager
private class MyPagerAdapter extends androidx.viewpager.widget.PagerAdapter {

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

// Get Title of pages
@Override
public CharSequence getPageTitle(int position) {
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3", "Tab-4"};
return pageTitle[position];
}

// Create the Views (Object form) to be displayed at each position.
public Object instantiateItem(ViewGroup collection, int position) {
// Get Views from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((androidx.viewpager.widget.ViewPager)collection).addView(view, 0);
// For the page at position 2 (page2.xml), define Button and setOnClickListener for it.
if (position == 2) {
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
// Toast 'Button 1 Clicked' when the button is clicked.
showMessage("Button 1 Clicked.");
}
});
}
// Return the View Object corresponding to position selected
return view;
}

// Remove page for the given position
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((androidx.viewpager.widget.ViewPager) arg0).removeView((View) arg2);
}

// Determine whether a page View is associated with a specific key object as returned by instantiateItem(ViewGroup, int).
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
}
{

5. In onCreate event, use an add source directly block and put following codes.
// Create a ViewPager, set adapter for it, and set it's current item to position 0 (page0.xml).
androidx.viewpager.widget.ViewPager viewPager1 = new androidx.viewpager.widget.ViewPager(this);
viewPager1.setAdapter(new MyPagerAdapter());
viewPager1.setCurrentItem(0);

// Define a new TabLayout, set it up with the ViewPager, and add it to the AppBarLayout which surrounds the ToolBar. The AppBarLayout thus will contain ToolBar and TabLayout.
com.google.android.material.tabs.TabLayout tabLayout = new com.google.android.material.tabs.TabLayout(this);
tabLayout.setTabMode(com.google.android.material.tabs.TabLayout.MODE_SCROLLABLE);

tabLayout.setupWithViewPager(viewPager1);
((com.google.android.material.appbar.AppBarLayout)_toolbar.getParent()).addView(tabLayout);
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);

6. Save and run the project.