ViewPager in Sketchware

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

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. Thank you so much for the inclusion nice article and very informative.
    BIGO LIVE is a cross-platform application, which has the ability to work on all sort of modern platforms.Here you have much freedom to share anything as like as you share on your smartphone.
    Click Here:
    Bigo Live Connector
    Live Streaming
    Bigo Live MAC PC
    BIGO LIVE FOR iOS
    Watch Live Video Broadcasting
    Android App
    MultiPlatform Application

    ReplyDelete
  16. Thank you so much for the inclusion nice article and very informative.
    BIGO LIVE is a cross-platform application, which has the ability to work on all sort of modern platforms.Here you have much freedom to share anything as like as you share on your smartphone.
    Click Here:
    Bigo Live Connector
    Live Streaming
    Bigo Live MAC PC
    BIGO LIVE FOR iOS
    Watch Live Video Broadcasting
    Android App
    MultiPlatform Application

    ReplyDelete
  17. Nice article. Thanks for sharing valuable information.
    Bigo Live is also one of the most popular video broadcasting app
    Download the application
    BIGO LIVE APK
    BIGO LIVE LOGIN
    MESSENGER APP
    BIGO MOD APK
    Bigo Live Stream Games
    Bigo Live for Windows Phone
    Excellent Platform

    ReplyDelete
  18. Nice Blog Post.Thanks for sharing this post.
    Bigo Live is the most popular video broadcasting app on the mobile platform
    Download the application
    bigo live live
    bigo live app
    bigo apk
    bigo online
    Bigo Live online
    bigo live store
    chat application

    ReplyDelete

  19. 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
  20. Sorry, I did not understand anything of this possible explanation?

    ReplyDelete
  21. 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

  22. 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
  23. crazykrush is dating apps for iphone like tinder and this is new trending app. it is available on all mobile platform

    ReplyDelete

Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Create Music Player app in Sketchware

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

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity