Lag with ViewPager for blurred and rounded image

Question

  private class CustomPagerAdapter extends PagerAdapter {
        private Context mContext;
        private LayoutInflater mLayoutInflater;
        private ImageView displayArt;
        private ImageView songImage;
        private TextView playerName;

        private CustomPagerAdapter(Context context) {
            mContext = context;
            mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        @Override
        public int getCount() {
            return songList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View itemView = mLayoutInflater.inflate(R.layout.adapter_audio_player, container, false);
            FieldIntialization(itemView);
            updatePlayerView(position);
            container.addView(itemView);
            return itemView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((RelativeLayout) object);
        }

        private void FieldIntialization(View view) {
            displayArt = (ImageView) view.findViewById(R.id.songImage);
            songImage = (ImageView) view.findViewById(R.id.songDisplayArt);
            playerName = (TextView) view.findViewById(R.id.songName);
        }

        @Override
        public int getItemPosition(Object object) {
            return PagerAdapter.POSITION_NONE;
        }

        private void updatePlayerView(int songIndex) {
            playerName.setText(songList.get(songIndex).getPlayerTitle());
            displayArt.setScaleType(ImageView.ScaleType.FIT_XY);

            final String contentURI = "content://media/external/audio/media/" + songList.get(songIndex).getPlayerId() + "/albumart";

            Glide.with(getApplicationContext()).load(contentURI).dontAnimate().
                    error(R.drawable.music_player_background)
                    .bitmapTransform(new BlurTransformation(getApplicationContext()))
                    .into(displayArt);


            songImage.setScaleType(ImageView.ScaleType.FIT_XY);
            Bitmap originalBitmap = null;
            try {
                originalBitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), Constants.getDefaultAlbumUri(
                        String.valueOf(songList.get(songIndex).getPlayerAlbumId())
                ));
            } catch (IOException e) {
                e.printStackTrace();
            }
            if ((originalBitmap == null || originalBitmap.equals(""))) {
                Bitmap largeIcon = BitmapFactory.decodeResource(getResources(), R.drawable.no_photo);
                RoundedBitmapDrawable roundDrawable = RoundedBitmapDrawableFactory.create(getResources(), largeIcon);
                roundDrawable.setCircular(true);
                songImage.setImageDrawable(roundDrawable);

            } else {
                RoundedBitmapDrawable roundDrawable = RoundedBitmapDrawableFactory.create(getResources(), originalBitmap);
                roundDrawable.setCircular(true);
                songImage.setImageDrawable(roundDrawable);
            }


        }
    }

I have to display blurred image as background with rounded image.i have done like above.Its lagging when i swipe the viewpager.I used glide to display images.pls anyone give me a soln.Thanks in advance

Answer 1

blurring is a CPU intensive process. As viewpager creates the views for adjacent ones, it is taking too much time to process and creating the lag. Specially in older deivces and less RAM you will face more issues.

For rounded images, if you need to use circular image use CircleImageView, else for rounded corners only, you can use this