Image in reclyerView becoming smaller with change of layoutManager

Question

okay so I have a gallery application that has the option to change the layoutManager to either linear or grid or staggered (I am handling these with radioButtons). They are working but for some reason when I change from grid to linear, the first couple of photos are smaller for some reason. but They become fine after a reload.

My adapter class is :


fun setImageList(imageList: List<Hit>) {
        this.imageList = imageList
        notifyDataSetChanged()
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {

        return ViewHolder(
            DataBindingUtil.inflate(
                LayoutInflater.from(context),
                R.layout.item_images, parent, false
            )
        )
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val hit = imageList[position]
        ((holder) as ViewHolder).setBinding(hit)

                Glide.with(this)
                .load(hit.webformatURL)
                .transition(DrawableTransitionOptions.withCrossFade())
                .override(-1, -1)
                .into(this)
        
    }

    override fun getItemCount(): Int {
        return imageList.size
    }

    class ViewHolder(var binding: ItemImagesBinding) : RecyclerView.ViewHolder(
        binding.root
    )

my mainActivity class :

binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        imagesModelList = emptyList()
        imagesAdapter = ImagesAdapter(this, imagesModelList, this)
        binding.recyclerView.adapter = imagesAdapter


        imagesViewModel = ViewModelProvider(this).get(ImagesViewModel::class.java)

        imagesViewModel.getImagesListObserver()?.observe(this, {
                imagesModelList = it
                imagesAdapter.setImageList(it)
            }

        })
        imagesViewModel.makeApiCall(binding.searchView.query.toString())

    }

Changing layoutManager like this :

 fun grid(v: View) {
        binding.recyclerView.layoutManager =
            GridLayoutManager(this, 3)
    }

    fun linear(v: View) {

        binding.recyclerView.layoutManager =
            LinearLayoutManager(applicationContext)

    }

    fun staggered(v: View) {
        binding.recyclerView.layoutManager =
            StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL)
    }

Narendra_Nath · Accepted Answer · 2021-08-18T05:33:55.400

2

Use the following lines of code instead of the one you have.

                 Glide.with(this)
                .load(hit.webformatURL)
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .transition(DrawableTransitionOptions.withCrossFade())
                .override(-1, -1)
                .into(this)

The images getting smaller is probably due to the pre-caching which the glide library does by default .

Caching Strategy for Glide

edited Aug 18 '21 at 05:33

answered Aug 17 '21 at 13:02

Narendra_Nath

4,578
3
13
31

Okay got it! Thank you! But now there is loading time between each switch. Is there anyway to fix that while fixing this problem too? – Ammar Ahsan Aug 17 '21 at 14:43
try DiskCacheStrategy.DATA instead of DiskCacheStrategy.NONE – Narendra_Nath Aug 17 '21 at 14:53

Image in reclyerView becoming smaller with change of layoutManager

1 Answers1