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.xmlpage1.xmlpage2.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.

Comments

  1. 😁 Thank you so much!
    Your website is really helpful.

    ReplyDelete
  2. Bro please 🙏 make an app for *shooting game*

    ReplyDelete
    Replies
    1. Are yoy mad this is not Unity engine to make an shooting game.😶🤣😂

      Delete
  3. How to add stroke/border to textview, on some backgrounds my text is not visible so i want to add stroke to the text,

    Can you make a discord server for easy interaction and communication?

    ReplyDelete
  4. I have an application package name. Is there any way to get the lib path, data path of this application to textview? package name example: com.example.name 😶

    ReplyDelete
  5. I amput setText in page3.xml with long text.
    why cant read?
    please need solution

    ReplyDelete
  6. Not work for me why ?
    Notif : cannot be resolved to a type

    Please help

    ReplyDelete
  7. not working i have 14 problems

    ReplyDelete
  8. thank you so much brother..
    i want tell you my problem..
    i make 2 page...first is a main activity page...and second is a custom view that it is viewpager with tab layout...
    In the main activity i put a button to set screen to custom view with tab layout...but when i run the app, something error..but if i delete the button, it's working...but i can't see my view page with tab layout...
    Please tell me the solution..
    Thank you very much...

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

    ReplyDelete

  10. I need your help in this example image

    2.bp.blogspot.com/-LJcMCSxlAj4/Xs-dN0xgt3I/AAAAAAAAAPs/PIqLjpVUiPwgINyBVffJvLYaf16NV973gCLcBGAsYHQ/s320/1590663155-picsay.jpg

    ReplyDelete
    Replies
    1. Add the tabLayout to a linear horizontal.
      linear2.addView(tabLayout);

      Delete
    2. linear2.addView(tabLayout); error

      Delete
  11. Ayudame por favor quiero todos las paginas con textview1 y no con boton...pero no se si elimino algo demas pero no se compila la aplicacion

    ReplyDelete
    Replies
    1. Try this


      }

      String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3", "Tab-4"};

      private class MyPagerAdapter extends androidx.viewpager.widget.PagerAdapter {

      public int getCount() {
      return pageTitle.length;
      }


      @Override
      public CharSequence getPageTitle(int position) {
      return pageTitle[position];
      }

      public Object instantiateItem(ViewGroup collection, int position) {
      View view = getLayoutInflater().inflate(R.layout.custom_view, null);
      ((androidx.viewpager.widget.ViewPager)collection).addView(view, 0);

      final TextView text1 = view.findViewById(R.id.textview1);

      if (position == 0){
      text1.setText("text 1");
      }
      if (position == 1){
      text1.setText("text 2");
      }
      if (position == 2){
      text1.setText("text three");
      }
      if (position == 3){
      text1.setText("text four");
      }

      return view;
      }

      @Override
      public void destroyItem(View arg0, int arg1, Object arg2) {
      ((androidx.viewpager.widget.ViewPager) arg0).removeView((View) arg2);
      }

      @Override
      public boolean isViewFromObject(View arg0, Object arg1) {
      return arg0 == ((View) arg1);
      }
      }
      {

      Delete
    2. Replace custom_view with your custom view name.

      Delete
    3. Tienes algun video tutorial para poder guiarme con mas precicion ??

      Delete
    4. Me salen 17 errores no se como solucionarlo solo con text view

      Delete
  12. I want to add listview view in the view pager but on one of your videos you said sketchware doesn't support listview in custom listview, any idea how to fix ???


    Thanks in advance

    ReplyDelete
  13. Thank you so much my brother good job

    ReplyDelete
  14. Can anyone send me ss of asd block.
    #AKYC WORLD
    Support our community.
    https://t.me/AKYCWORLD

    ReplyDelete

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