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

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity

In Sketchware: How to create a calculator for any simple formula?