Image Slider using ViewPager in Sketchware

 To add a front screen with sliding images using ViewPager in Sketchware, follow the instructions given below.



1. Create a new project in Sketchware.

2. Switch on AppCompat and design.

3. In main.xml add a  linear1 and linear2. Set padding of both these linears to 0. Set gravity of linear2 to center_horizontal. We will add ViewPager to linear1, and TabLayout to linear2.

4. Add four images: store, home, gift, and fast_food.

5. Create a CustomView custom2.xml. In this View, add an ImageView with scale type fit_center.

6. Create a more block extra. Add following codes in it.
}
androidx.viewpager.widget.ViewPager viewPager1;
int[] image_list = { R.drawable.store, R.drawable.home, R.drawable.gift, R.drawable.fast_food };


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

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

public Object instantiateItem(ViewGroup collection, int position) {
View view = getLayoutInflater().inflate(R.layout.custom2, null);
((androidx.viewpager.widget.ViewPager)collection).addView(view, 0);
final ImageView imageview1 = view.findViewById(R.id.imageview1);
imageview1.setImageResource(image_list[position]);
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);
}
}
{


7. Add following codes in onCreate.

viewPager1 = new androidx.viewpager.widget.ViewPager(this);

viewPager1.setAdapter(new MyPagerAdapter());

viewPager1.setCurrentItem(0);

linear1.addView(viewPager1);


com.google.android.material.tabs.TabLayout tabLayout = new com.google.android.material.tabs.TabLayout(this);

tabLayout.setTabMode(com.google.android.material.tabs.TabLayout.MODE_FIXED);

tabLayout.setupWithViewPager(viewPager1);

linear2.addView(tabLayout);

tabLayout.setSelectedTabIndicator(null);

tabLayout.getTabAt(0).setText("●");

tabLayout.getTabAt(1).setText("●");

tabLayout.getTabAt(2).setText("●");

tabLayout.getTabAt(3).setText("●");


8. Run the project.

Comments

Popular posts from this blog

A Flash Light App in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware

Easiest way to create an App for your website

Create a PDF reader android App in Sketchware