ViewPager in Sketchware
Note:
In latest Version of Sketchware the codes on this post shows error android.support.v4.view.ViewPager cannot be resolved. Because it uses androidx libraries instead of support_v4.
In new versions of Sketchware, follow this:
https://www.sketchwarehelp.com/2020/02/androidx-viewpager-in-sketchware.html?m=1
--------
To create a simple ViewPager with three pages in Sketchware, follow the codes below.
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
public CharSequence getPageTitle(int position) {
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"};
return pageTitle[position];
}
// Get the Views to be displayed at each position
public Object instantiateItem(View collection, int position) {
// Get View from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((android.support.v4.view.ViewPager)collection).addView(view, 0);
if (position == 0) {
// For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it.
final Switch tab1switch1 = view.findViewById(R.id.switch2);
tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton _param1, boolean _param2){
final boolean _isChecked = _param2;
if (_isChecked){
tab1switch1.setText("Switch ON");
} else {
tab1switch1.setText("Switch OFF");
}
}
});
}
else if (position == 1) {
// For the page at position 1 (page3.xml), define TextView and setOnClickListener for it.
final TextView tab2textview1 = view.findViewById(R.id.textview1);
tab2textview1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("TextView 1 Clicked.");
}
});
}
else if (position == 2) {
// For the page at position 2 (page5.xml), define Button and setOnClickListener for it.
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("Button 1 Clicked.");
}
});
}
// Return the View corresponding to position selected
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
6. 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 (page1.xml).
android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.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.
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
tabLayout.setupWithViewPager(viewPager1);
((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout);
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);
7. Save and run the project.
For Custom Tabs in TabLayout
* Create a CustomView tab.xml with a TextView textview1 and an ImageView imageview1.
* Add images using Image manager: ic_airplane, ic_accessibility, ic_3d.
* Use following code in onCreate:
// Create a ViewPager, set adapter for it, and set it's current item to position 0 (page1.xml)
android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.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.
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
tabLayout.setupWithViewPager(viewPager1);
((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout);
for (int i =0; i<tabLayout.getTabCount(); i++){
View inflatedView = getLayoutInflater().inflate(R.layout.tab, null);
ImageView img1 = inflatedView.findViewById(R.id.imageview1);
TextView txt1 = inflatedView.findViewById(R.id.textview1);
img1.setImageResource(images[i]);
txt1.setText(pageTitle[i]);
tabLayout.getTabAt(i).setCustomView(inflatedView);
}
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);
* Use following code in the More Block extra.
}
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"};
int[] images = { R.drawable.ic_airplane, R.drawable.ic_accessibility, R.drawable.ic_3d};
// 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
public CharSequence getPageTitle(int position) {
return pageTitle[position];
}
// Get the Views to be displayed at each position
public Object instantiateItem(View collection, int position) {
// Get View from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((android.support.v4.view.ViewPager)collection).addView(view, 0);
if (position == 0) {
// For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it.
final Switch tab1switch1 = view.findViewById(R.id.switch2);
tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton _param1, boolean _param2){
final boolean _isChecked = _param2;
if (_isChecked){
tab1switch1.setText("Switch ON");
} else {
tab1switch1.setText("Switch OFF");
}
}
});
}
else if (position == 1) {
// For the page at position 1 (page3.xml), define TextView and setOnClickListener for it.
final TextView tab2textview1 = view.findViewById(R.id.textview1);
tab2textview1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("TextView 1 Clicked.");
}
});
}
else if (position == 2) {
// For the page at position 2 (page5.xml), define Button and setOnClickListener for it.
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("Button 1 Clicked.");
}
});
}
// Return the View corresponding to position selected
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
In latest Version of Sketchware the codes on this post shows error android.support.v4.view.ViewPager cannot be resolved. Because it uses androidx libraries instead of support_v4.
In new versions of Sketchware, follow this:
https://www.sketchwarehelp.com/2020/02/androidx-viewpager-in-sketchware.html?m=1
--------
To create a simple ViewPager with three pages in Sketchware, follow the codes below.
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.
}
// 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
public CharSequence getPageTitle(int position) {
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"};
return pageTitle[position];
}
// Get the Views to be displayed at each position
public Object instantiateItem(View collection, int position) {
// Get View from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((android.support.v4.view.ViewPager)collection).addView(view, 0);
if (position == 0) {
// For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it.
final Switch tab1switch1 = view.findViewById(R.id.switch2);
tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton _param1, boolean _param2){
final boolean _isChecked = _param2;
if (_isChecked){
tab1switch1.setText("Switch ON");
} else {
tab1switch1.setText("Switch OFF");
}
}
});
}
else if (position == 1) {
// For the page at position 1 (page3.xml), define TextView and setOnClickListener for it.
final TextView tab2textview1 = view.findViewById(R.id.textview1);
tab2textview1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("TextView 1 Clicked.");
}
});
}
else if (position == 2) {
// For the page at position 2 (page5.xml), define Button and setOnClickListener for it.
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("Button 1 Clicked.");
}
});
}
// Return the View corresponding to position selected
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
6. 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 (page1.xml).
android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.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.
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
tabLayout.setupWithViewPager(viewPager1);
((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout);
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);
7. Save and run the project.
For Custom Tabs in TabLayout
* Create a CustomView tab.xml with a TextView textview1 and an ImageView imageview1.
* Add images using Image manager: ic_airplane, ic_accessibility, ic_3d.
* Use following code in onCreate:
// Create a ViewPager, set adapter for it, and set it's current item to position 0 (page1.xml)
android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.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.
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
tabLayout.setupWithViewPager(viewPager1);
((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout);
for (int i =0; i<tabLayout.getTabCount(); i++){
View inflatedView = getLayoutInflater().inflate(R.layout.tab, null);
ImageView img1 = inflatedView.findViewById(R.id.imageview1);
TextView txt1 = inflatedView.findViewById(R.id.textview1);
img1.setImageResource(images[i]);
txt1.setText(pageTitle[i]);
tabLayout.getTabAt(i).setCustomView(inflatedView);
}
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);
* Use following code in the More Block extra.
}
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"};
int[] images = { R.drawable.ic_airplane, R.drawable.ic_accessibility, R.drawable.ic_3d};
// 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
public CharSequence getPageTitle(int position) {
return pageTitle[position];
}
// Get the Views to be displayed at each position
public Object instantiateItem(View collection, int position) {
// Get View from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((android.support.v4.view.ViewPager)collection).addView(view, 0);
if (position == 0) {
// For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it.
final Switch tab1switch1 = view.findViewById(R.id.switch2);
tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton _param1, boolean _param2){
final boolean _isChecked = _param2;
if (_isChecked){
tab1switch1.setText("Switch ON");
} else {
tab1switch1.setText("Switch OFF");
}
}
});
}
else if (position == 1) {
// For the page at position 1 (page3.xml), define TextView and setOnClickListener for it.
final TextView tab2textview1 = view.findViewById(R.id.textview1);
tab2textview1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("TextView 1 Clicked.");
}
});
}
else if (position == 2) {
// For the page at position 2 (page5.xml), define Button and setOnClickListener for it.
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("Button 1 Clicked.");
}
});
}
// Return the View corresponding to position selected
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
