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);

}


Comments

  1. How to change toolbar to linear
    Help me please
    I need set linear
    And set button in linear and on CLICK to buttom go to page1 or page3 or page5
    Change Tablayout to linear

    ReplyDelete
  2. How to create bottom navigation bar?

    ReplyDelete
  3. hello how do i change the pageTitle color to white and bold instead of black?

    ReplyDelete
  4. Contact no please I am from ap I have question in firebase
    Give contact number or please add me in WhatsApp my number:9848988180 please replay me bro please

    ReplyDelete
  5. apply admin privs please for my social media site , including ban privs

    ReplyDelete
  6. Hello sir,
    I wanna ask you how to make number variable from string variable.

    ReplyDelete
  7. Can sketchware use excel es database?

    ReplyDelete
  8. how to use tab layouts code its have error on run project

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. It is very nice post and images are very attractive. good work.
    application

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Please guide the direction as a lucky spin application

    ReplyDelete
  14. This is a very interesting article to read. Thank you for giving very good information. Nice post.
    bigo live is Nice app. connect friends and relatives.

    Download the application
    BIGO LIVE APK
    BIGO LIVE LOGIN
    MESSENGER APP
    BIGO MOD APK
    DOWNLOAD FREE BIGO LIVE APK
    EARN MONEY ONLINE
    LIVE BROADCASTINGS

    ReplyDelete

  15. This is a very interesting article to read. Thanks for sharing the information. Great post.

    Download the application:

    Make Money Online...2019 100% Working

    Click Here Now Free bigo live


    Video Streaming Online...2019 100% Working

    Click Here Now Free bigo live apk


    Best Messaging App...2019 100% Working

    Click Here Now Free video calling


    Online Video Chat...2019 100% Working

    Click Here Now FreeLive Chat


    Watch Series Stream...2019 100% Working

    Click Here Now Free bigo live app

    ReplyDelete
  16. Sorry, I did not understand anything of this possible explanation?

    ReplyDelete
  17. Not working
    The extra block doesn't have use after that!?

    After creating the extra block and putting all codes like you said, you didn't tell us were to put that extra block
    Even when not using it, the compilation still not working
    Please for your help, I really need to do it
    Thank you

    ReplyDelete

  18. I really appreciate this post. I have been looking all over for this!. You have made my day! Thank you again.
    Meet random people

    ReplyDelete
  19. publish your app on google playstore for $5 every month 07035768635(whatsapp only)

    ReplyDelete
  20. My device/sketchware does not support android.support.v4.view.ViewPager

    Any sollution?

    ReplyDelete
    Replies
    1. I too getting the same.
      Please Inform me if any solution found

      Delete
    2. Check this
      https://www.sketchwarehelp.com/2020/02/androidx-viewpager-in-sketchware.html?m=1

      Delete

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