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