ViewPager2 with ListView example in Sketchware pro

1. Create a new project in Sketchware. (Same codes for Android studio here https://apktutor.in/2025/10/02/viewpager2-example-with-fragment-containing-a-listview/ )

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

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


4. Switch On AppCompat and design.

5. Add three Custom Views fragment1, fragment2, and fragment3.

In fragment1.xml add a TextView.



In fragment2.xml add a MaterialButton materialbutton1.



In fragment3.xml add a ListView listview1.


6. Add a Custom View for ListView items list_item_fruits.xml with two TextViews textview1 and textview2.


7. In Java/Kotlin manager, add a new Java file Fragment1.java. Add following codes in it.


package com.my.newproject18;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

8. Add a new Java file Fragment2.java. Add following codes in it. On Button click event it will Toast a message.



package com.my.newproject18;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.widget.Toast;
import com.google.android.material.button.MaterialButton;

public class Fragment2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.fragment2, container, false);
        MaterialButton button1 = view.findViewById(R.id.materialbutton1);
        
        button1.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            Toast.makeText(requireContext(), "Button clicked", Toast.LENGTH_SHORT).show();
        }
        });
        
        return view;
    }
}

9. 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);
    }
}

10. Add a new Java file Fragment3.java. Add following codes in it.



package com.my.newproject18;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.widget.LinearLayout;
import android.widget.TextView;

import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;

public class Fragment3 extends Fragment {
    private ListView listview1;
    private ArrayList<HashMap<String, Object>> fruitList;
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment3, container, false);
        
        listview1 = view.findViewById(R.id.listview1);
        
        // Initialize data
        initializeData();
        
        // Setup adapter
        listview1.setAdapter(new Listview1Adapter(fruitList));
        ((BaseAdapter)listview1.getAdapter()).notifyDataSetChanged();
        
        // Setup click listener
        setupClickListener();
        
        return view;
    }
    
    private void initializeData() {
        fruitList = new ArrayList<>();
        
        // Create sample data
        HashMap<String, Object> fruit1 = new HashMap<>();
        fruit1.put("name", "Apple šŸŽ");
        fruit1.put("color", "Red");
        
        HashMap<String, Object> fruit2 = new HashMap<>();
        fruit2.put("name", "Banana šŸŒ");
        fruit2.put("color", "Yellow");
        
        HashMap<String, Object> fruit3 = new HashMap<>();
        fruit3.put("name", "Grapes šŸ‡");
        fruit3.put("color", "Purple");
        
        HashMap<String, Object> fruit4 = new HashMap<>();
        fruit4.put("name", "Mango šŸ„­");
        fruit4.put("color", "Yellow");
        
        fruitList.add(fruit1);
        fruitList.add(fruit2);
        fruitList.add(fruit3);
        fruitList.add(fruit4);
    }
    
    public class Listview1Adapter extends BaseAdapter {
		
		ArrayList<HashMap<String, Object>> _data;
		
		public Listview1Adapter(ArrayList<HashMap<String, Object>> _arr) {
			_data = _arr;
		}
		
		@Override
		public int getCount() {
			return _data.size();
		}
		
		@Override
		public HashMap<String, Object> getItem(int _index) {
			return _data.get(_index);
		}
		
		@Override
		public long getItemId(int _index) {
			return _index;
		}
		
		@Override
		public View getView(final int _position, View _v, ViewGroup _container) {
			LayoutInflater _inflater = getLayoutInflater();
			View _view = _v;
			if (_view == null) {
				_view = _inflater.inflate(R.layout.list_item_fruits, null);
			}
			
			final LinearLayout linear1 = _view.findViewById(R.id.linear1);
			final TextView textview1 = _view.findViewById(R.id.textview1);
			final TextView textview2 = _view.findViewById(R.id.textview2);
			
			textview1.setText(_data.get((int)_position).get("name").toString());
			textview2.setText(_data.get((int)_position).get("color").toString());
			
			return _view;
		}
	}
    
    private void setupClickListener() {
        listview1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                
                String fruitName = (String) fruitList.get(position).get("name");
                Toast.makeText(getActivity(), fruitName, Toast.LENGTH_SHORT).show();
            }
        });

    }
    
}

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


final ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);

viewPagerAdapter.addFragment(new Fragment1(), "TextView");
viewPagerAdapter.addFragment(new Fragment2(), "Button"); viewPagerAdapter.addFragment(new Fragment3(), "ListView");

viewpager1.setAdapter(viewPagerAdapter);

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

12. 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;

13. Save and run the project.



Comments

  1. PigigaNovember 28, 2025 at 10:55 PM

    LeftBusiness is one of the few business platforms that manages to connect traditional corporate thinking with the dynamism of startups. Every article feels insightful, relevant, and perfectly aligned with the needs of today’s professionals looking for smarter business direction.

    ReplyDelete
  2. PigigaNovember 28, 2025 at 11:04 PM

    I love how TechWeTalk blends information with simplicity. Whether it’s cybersecurity tips, startup news, or software breakdowns, everything is explained in a way that’s engaging and easy to understand. A must-visit for tech enthusiasts!

    ReplyDelete
  3. MalikDecember 7, 2025 at 11:30 PM

    HDhub4u has become my favorite platform for discovering underrated movies. The reviews always highlight interesting points that help me understand the movie’s uniqueness. I love how the writers maintain a friendly tone while still offering detailed insights. It’s a great mix of simplicity, professionalism, and genuine passion for cinema.

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Image
To create a simple car racing game in sketchware follow the steps given below. 1. Create a new project in Sketchware. 2. In VIEW area of main.xml add a TextView textview3 for displaying score of previous game, a TextView textview4 for displaying high score, and a Button button1 for starting game. 3. In MainActivity , add a Shared Preferences component sp:sp . 4. Add onStart event and put blocks to set the text of textview3 and textview4 . 5. Create a new page page2.xml . 6. On button1 click use intent to move to page2 . 7. On page2.xml add a LinearV linear1 with padding 0 and width and height MATCH_PARENT. 8. In Page2Activity , add a Shared Preferences component sp:sp . 9. Create a number variable highscore . 10. In onCreate event of Page2Activity , use blocks to set the value of number variable highscore , and use codes to create a new GameView and add it to linear1 , as shown in image below. The code used in the add source directly bloc...
Read more

How to enable upload from webview in Sketchware?

Image
Now that Sketchware has a block to add java code directly in the project, it is possible to enable file upload in webview. To enable file upload in webview in sketchware app, follow the steps given below. 1. Insert a webview in VIEW area in the sketchware project. Note the ID of webview, usually it is webview1 . 2. In LOGIC area of project, in onCreate event, add the block add source directly and copy the following code in it: webview1.setWebChromeClient(new WebChromeClient() { // For 3.0+ Devices protected void openFileChooser(ValueCallback uploadMsg, String acceptType) { mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE); } // For Lollipop 5.0+ Devices public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChoose...
Read more

Simple Audio recorder app in Sketchware

Image
1.  Switch on AppCompat and Design. 2. In main.xml,  add two Buttons startBtn and stopBtn , and add two TextViews textview_message and textview_file . 3. Add a SpeechToText component (To add record audio permissions). 4. Add a String variable outputFile and add a custom variable of type MediaRecorder with name mediaRecorder . 5. In onCreate , add write string__to file path__ block  (To add read and write external storage permissions). Then put following codes to define outputFile. stopBtn.setEnabled(false); File downloadsDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS); String fileName = "recording_" + System.currentTimeMillis() + ".3gp"; File file = new File(downloadsDir, fileName); outputFile = file.getAbsolutePath(); 6. Create a More block startRecording and put following codes in it. try { mediaRecorder = new MediaRecorder(); mediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC); ...
Read more

Retrieve contact list in Sketchware

Image
 To read contact list in Sketchware pro, follow the steps given below. 1. In the Sketchware project, in main.xml, add a ListView. Also add a custom view for ListView items. For the ListView, select the custom view. 2. Switch on AppCompat and design. 3. In permission manager, select android.permission.READ_CONTACTS . 4. In Activity, add Import event. Put following codes in the import event: import android.Manifest; import android.content.pm.PackageManager; import android.database.Cursor; import android.provider.ContactsContract; import androidx.core.app.ActivityCompat; import androidx.core.content.ContextCompat; 5. Create a more block getAllContacts of type List Map. In this more block, put following codes: ArrayList<HashMap<String, Object>> contactList = new ArrayList<>(); ContentResolver contentResolver = MainActivity.this.getContentResolver(); Cursor cursor = contentResolver.query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, ...
Read more

Custom dialog box in Sketchware using CustomView

Image
The CustomView can be used to create a custom dialog box in Sketchware, by using simple codes. Follow the steps below to create a custom dialog pop-up. 1. In VIEW area of your project add a new CustomView . In the image above I have added a new CustomView 'cust.xml'. 2. Design the CustomView the way you want your custom dialog box to look like. In the image above, I have added an ImageView, two TextViews, and two Buttons (namely 'button1' and 'button2'). 3. Choose the event on which you want to show the dialog. It can be onBackPressed or onButtonClick, etc. 4. On the event when dialog is to be shown, use add source directly block to create and show the dialog box. In the image above I have added the code to onBackPressed event. The code used is explained below. a) First use the code to create a dialog. final AlertDialog dialog2 = new AlertDialog.Builder( MainActivity .this).create(); Note that here 'MainActivity' is the nam...
Read more