ViewPager2 with Fragments in Sketchware

1. Create a new project in Sketchware.

2. In main.xml add a TabLayout tablayout1 and a ViewPager viewpager1.

3. Convert ViewPager to androidx.viewpager2.widget.ViewPager2.

4. Switch On AppCompat and design and Material3 Manager.

5. Add three new views of type Fragment: animals_fragment, fishes_fragment, and insects_fragment. Their corresponding java files will be AnimalsFragmentActivity.java, FishesFragmentActivity.java, and InsectsFragmentActivity.java (See images below).

6. Configure your fragments as you like.

7. Add a new Java file ViewPagerAdapter.java. Add following codes in it.

package com.my.newproject18;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStateAdapter {

    private final List<Fragment> fragments = new ArrayList<>();
    private final List<String> fragmentTitles = new ArrayList<>();

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    public void addFragment(Fragment fragment, String title) {
        fragments.add(fragment);
        fragmentTitles.add(title);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    public String getPageTitle(int position) {
        return fragmentTitles.get(position);
    }
}

8. In onCreate event of MainActivity.java, add following codes in an add source directly block.

final ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);

viewPagerAdapter.addFragment(new AnimalsFragmentActivity(), "Animals");
viewPagerAdapter.addFragment(new FishesFragmentActivity(), "Fishes");
viewPagerAdapter.addFragment(new InsectsFragmentActivity(), "Insects");

binding.viewpager1.setAdapter(viewPagerAdapter);

new TabLayoutMediator(
        binding.tablayout1,
        binding.viewpager1,
        new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(viewPagerAdapter.getPageTitle(position));
            }
        }
).attach();

9. Add new event Import and put following codes in an add source directly block.

import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayoutMediator;

10. Save and run the project.