RecyclerView example in Sketchware

 This post describes a sample project which uses RecyclerView to display a list of images and texts in Sketchware.


1. Create a new project in Sketchware.

2. In main.xml add a Linear linear2 for displaying the RecyclerView.


3. Create a CustomView custom_item.xml. In this add a Linear linear1, an ImageView c_imageview1, and a TextView c_textview1.


4. Add images using image manager in Sketchware.


5. Switch On AppCompat and Design.

6. Create a More block extra. In this block put code given below. This code creates a class MyImage, which can be constructed with a String and an int variable. The String variable will be used for setting title and int variable for setting image resource id.

}

public class MyImage {

private String mTitle;

private int mImage;

public MyImage(String title, int imageId) {

mTitle = title;

mImage = imageId;

}

public String getTitle(){

return mTitle;

}

public int getImage(){

return mImage;

}

}

{

7. Create another More block adapter, and put following codes in it.

// This code defines a class CategorylistAdapter which can be used as an adapter for RecyclerView.

}

public class CategorylistAdapter extends androidx.recyclerview.widget.RecyclerView.Adapter<CategorylistAdapter.MyViewHolder>{

Context context;

ArrayList<MyImage> maplist;

// Constructor for the adapter.

public CategorylistAdapter(ArrayList<MyImage> list, Context context){

this.maplist = list;

this.context = context;

}

// onCreateViewHolder method. Uses LayoutInflater to create View from the CustomView. The View will act as a ViewHolder.

@androidx.annotation.NonNull

@Override

public CategorylistAdapter.MyViewHolder onCreateViewHolder(@androidx.annotation.NonNull ViewGroup viewGroup, int i) {

View view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.custom_item, viewGroup, false);

return new CategorylistAdapter.MyViewHolder(view);

}

// onBindViewHolder method. Here we set the text of TextView text and image of ImageView img, by getting items at respective positions of the list. Here we can also set OnClickListeners for the Views.

@Override

public void onBindViewHolder(@androidx.annotation.NonNull final CategorylistAdapter.MyViewHolder myViewHolder, final int i) {

((LinearLayout)myViewHolder.linear1.getParent()).setLayoutParams(myViewHolder.linear1.getLayoutParams());

myViewHolder.text.setText(maplist.get(i).getTitle());

myViewHolder.img.setImageResource(maplist.get(i).getImage());

myViewHolder.linear1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v){

showMessage(maplist.get(i).getTitle());

}

});

}

// getItemCount() method. It gets the number of items in the list.

@Override

public int getItemCount() {

return maplist.size();

}

// Define MyViewHolder class. Here we define the Linear linear1, ImageView img and TextView text using the ids in Custom view.

class MyViewHolder extends androidx.recyclerview.widget.RecyclerView.ViewHolder{

public LinearLayout linear1;

public TextView text;

public ImageView img;

public MyViewHolder(@androidx.annotation.NonNull View itemView) {

super(itemView);

linear1= itemView.findViewById(R.id.linear1);

text= itemView.findViewById(R.id.c_textview1);

img= itemView.findViewById(R.id.c_imageview1);

}

}

}

{

8. In onCreate use following codes.

// Create an ArrayList for MyImage with name mylist and add items to it.

ArrayList<MyImage> mylist = new ArrayList<MyImage>();

mylist.add(new MyImage("image 1", R.drawable.ic_image_1));

mylist.add(new MyImage("image 2", R.drawable.ic_image_2));

mylist.add(new MyImage("image 3", R.drawable.ic_image_3));

mylist.add(new MyImage("image 4", R.drawable.ic_image_4));

mylist.add(new MyImage("image 5", R.drawable.ic_image_5));

mylist.add(new MyImage("image 6", R.drawable.ic_image_6));

mylist.add(new MyImage("image 7", R.drawable.ic_image_7));

mylist.add(new MyImage("image 8", R.drawable.ic_image_8));

mylist.add(new MyImage("image 9", R.drawable.ic_image_9));

mylist.add(new MyImage("image 10", R.drawable.ic_image_10));

mylist.add(new MyImage("image 11", R.drawable.ic_image_11));

mylist.add(new MyImage("image 12", R.drawable.ic_image_12));

// Create a RecyclerView

androidx.recyclerview.widget.RecyclerView recyclerView = new androidx.recyclerview.widget.RecyclerView(this);

// Create a CategorylistAdapter adapter1 for displaying mylist.

CategorylistAdapter adapter1=new CategorylistAdapter(mylist, getApplicationContext());

// Set LayoutManager for RecyclerView. It can be set to display the RecyclerView as HORIZONTAL or VERTICAL.

recyclerView.setLayoutManager(new androidx.recyclerview.widget.LinearLayoutManager(getApplicationContext(), androidx.recyclerview.widget.LinearLayoutManager.HORIZONTAL, false));

// Set adapter1 as adapter of RecyclerView.

recyclerView.setAdapter(adapter1);

// Add RecyclerView to linear2.

linear2.addView(recyclerView);


9. Save and run the project.

Display List Map in RecyclerView



Comments

  1. Log in is not working on sketchware ... It always says An error has occurred. SSL handshake time out

    ReplyDelete
  2. Can we use this code in sketchware 3.9.11?

    ReplyDelete
  3. Can you create a tutorial for how to create a ListView that can be rearranged using drag and drop? That would be very helpful.

    ReplyDelete
  4. Nice blog . I have also been making tutorials related to Sketchware. In my Sketchware Interface video I have explaines each and every part of the Sketchware app itself. Do check my channel to learn more about sketchware.
    My channel link - https://youtube.com/channel/UCOUL_rPb3vQZoQ_ENC9lB3w

    Thanks Sanjeev sir. I have learnt about sketchware by watching your videos . So Thanks a lot.

    ReplyDelete
  5. Very good. How Can i get content of folder with this code?

    ReplyDelete
  6. Sweet! Worked on the first shot. Thank you so much. Your blog had helped me a ton.

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware