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

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

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

Creating a Drawing View in Sketchware

Image
 To create a DrawingView with undo button, follow the instructions given below. 1. Create a new project in Sketchware. 2. In main.xml , add a LinearLayout linear1 with height wrap_content, weight 1, and padding 0. Add a LinearHorizontal below it, containing following ImageViews: imageview_stroke_width , imageview_stroke_color , imageview_background , imageview_undo,  and  imageview_clear. 3. Create a more block canvas and put following codes in it. Here we create a new View class called DrawingView and a new class called PathPaint. } DrawingView dv; private Paint mPaint; private Canvas mCanvas; private ArrayList<PathPaint> all_paths = new ArrayList<>(); public class DrawingView extends View { private Bitmap mBitmap; private Paint mBitmapPaint; Context context; private Paint circlePaint; private Path circlePath; private Path mPath; public DrawingView(Context c) { super(c); context=c; mPath = new Path(); mBitmapPaint = new Paint(Paint.DITHER_FLAG); circlePath...
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

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