JSON Data is not retrieved serially to RecyclerView

Question

When First open my app, it showing 1-5 or 7 is serially. then, i scroll my Recyclerview it shows the item randomly. this is the main json link : http://services.hanselandpetal.com/feeds/flowers.json

see image for more details

when first open

when i scroll

MainActivity.class

public class MainActivity extends AppCompatActivity {

String BASE_URL=  "http://services.hanselandpetal.com/";
List<Example> examples=new ArrayList<>();
AdapterClass adapterClass;

RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    recyclerView=findViewById(R.id.recylerView_ID);
    recyclerView.setHasFixedSize(true);

    LinearLayoutManager linearLayoutManager=new     LinearLayoutManager(getApplicationContext());
    linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(linearLayoutManager);


    Retrofit retrofit=new Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build();

    ApiCall apiCall=retrofit.create(ApiCall.class);

    final Call<List<Example>> exampleCall=apiCall.getData();

    exampleCall.enqueue(new Callback<List<Example>>() {
        @Override
        public void onResponse(Call<List<Example>> call, Response<List<Example>> response) {

            if (response.code()==200){
            examples=response.body();
             adapterClass=new AdapterClass(MainActivity.this,examples);

            recyclerView.setAdapter(adapterClass);}
        }

        @Override
        public void onFailure(Call<List<Example>> call, Throwable t) {

        }
    });

   }
}

AdapterClass.class

public class AdapterClass extends RecyclerView.Adapter<AdapterClass.viewModel> {
TextView name;
TextView catagory;
TextView count;
ImageView imageView;

List<Example>examples;
Context context;
public AdapterClass(Context context, List<Example> examples) {

    this.context=context;
    this.examples = examples;
    Toast.makeText(context, ""+examples.size(), Toast.LENGTH_SHORT).show();
}
@NonNull
@Override
public viewModel onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    LayoutInflater layoutInflater=LayoutInflater.from(context);
    View view=layoutInflater.inflate(R.layout.item_view,null);

    return new viewModel(view);
}

@Override
public void onBindViewHolder(@NonNull viewModel viewModel, int i) {

    name.setText(examples.get(i).getName());
    catagory.setText(examples.get(i).getCategory());
    count.setText(String.valueOf(examples.get(i).getProductId()));
    String image_url = "http://services.hanselandpetal.com/photos/"+examples.get(i).getPhoto();
    Picasso.get().load(image_url).resize(50,50).centerCrop().into(imageView);
}

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

public class viewModel extends RecyclerView.ViewHolder  {

    public viewModel(@NonNull View itemView) {

        super(itemView);
        name=itemView.findViewById(R.id.name_TV);
        catagory=itemView.findViewById(R.id.catagory_TV);
        count=itemView.findViewById(R.id.serial_number_TV);
        imageView=itemView.findViewById(R.id.imageView_ID);

    }
}
 }

How do i solve this problem ? thanks.

Answer 1

Use this

@NonNull
@Override
public viewModel onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    LayoutInflater layoutInflater=LayoutInflater.from(context);
    View view=layoutInflater.inflate(R.layout.item_view,viewGroup,false);

    return new viewModel(view);
}

instead of this

@NonNull
@Override
public viewModel onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    LayoutInflater layoutInflater=LayoutInflater.from(context);
    View view=layoutInflater.inflate(R.layout.item_view,null);

    return new viewModel(view);
}

For more information read docs

inflate

public View inflate (XmlPullParser parser, 
                ViewGroup root, 
                boolean attachToRoot)

• Inflate a new view hierarchy from the specified XML node. Throws InflateException if there is an error.

Parameters

parser

• XmlPullParser: XML dom node containing the description of the view hierarchy.

root

• ViewGroup: Optional view to be the parent of the generated hierarchy (if attachToRoot is true), or else simply an object that provides a set of LayoutParams values for root of the returned hierarchy (if attachToRoot is false.)

  This value may be null.

attachToRoot

• boolean: Whether the inflated hierarchy should be attached to the root parameter? If false, root is only used to create the correct subclass of LayoutParams for the root view in the XML.

Also change your onBindViewHolder

@Override
public void onBindViewHolder(@NonNull viewModel viewModel, int i) {

    viewModel.name.setText(examples.get(i).getName());
    viewModel.catagory.setText(examples.get(i).getCategory());
    viewModel.count.setText(String.valueOf(examples.get(i).getProductId()));
    String image_url = "http://services.hanselandpetal.com/photos/"+examples.get(i).getPhoto();
    Picasso.get().load(image_url).resize(50,50).centerCrop().into(viewModel.imageView);
}

Answer 2

To use view holder pattern you should define your controls inside viewholder class and access it via its object passed to onBindViewHoler()

your view holder class should be like

public class viewModel extends RecyclerView.ViewHolder  {

    TextView name;
    TextView catagory;
    TextView count;
    ImageView imageView;

    public viewModel(@NonNull View itemView) {

        super(itemView);
        name=itemView.findViewById(R.id.name_TV);
        catagory=itemView.findViewById(R.id.catagory_TV);
        count=itemView.findViewById(R.id.serial_number_TV);
        imageView=itemView.findViewById(R.id.imageView_ID);

    }
}

now in onBindViewHolder() use

@Override
public void onBindViewHolder(@NonNull viewModel vh, int i) {

    vh.name.setText(examples.get(vh.getAdapterPosition()).getName());
    vh.catagory.setText(examples.get(vh.getAdapterPosition()).getCategory());
    vh.count.setText(String.valueOf(examples.get(vh.getAdapterPosition()).getProductId()));
    String image_url = "http://services.hanselandpetal.com/photos/"+examples.get(vh.getAdapterPosition()).getPhoto();
    Picasso.get().load(image_url).resize(50,50).centerCrop().into(vh.imageView);
}

Answer 3

Set your recyclerview inside a NestedScrollView and in recyclerview add attributes nestedScrollingEnabled = false;