如何在 android 中加载图像时将调色板加载为 cardView 背景？

Question

I am trying to show colors in the card background before images load, same as Pinterest . The color palette is getting implemented but background remains white and colors show up only for a split second before image loads.

I am using Glide library to load images in cardView . Please help me show the colors as soon as any activity is opened.

I am using Android Palette Library to get colors from ImageView.

Here is my RecyclerView Adapter

public class CoffeeAdapter extends RecyclerView.Adapter<CoffeeAdapter.ViewHolder> implements Filterable{

    private static final String TAG = "RecyclerAdapter";

    private ArrayList<CoffeeItem> coffeeItems;
    ArrayList<CoffeeItem> coffeeItemsAll;
    private Context mContext;
    private FavDB favDB;
    private DownloadDB downloadDB;

    public CoffeeAdapter(ArrayList<CoffeeItem> coffeeItems, Context mContext) {
        this.coffeeItems = coffeeItems;
        this.coffeeItemsAll = new ArrayList<CoffeeItem>(coffeeItems);
        this.mContext = mContext;
        notifyDataSetChanged();

    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        favDB = new FavDB(mContext);
        downloadDB = new DownloadDB(mContext);
        //create table on first
        SharedPreferences prefs = mContext.getSharedPreferences("prefs", mContext.MODE_PRIVATE);
        boolean firstStart = prefs.getBoolean("firstStart", true);
        if (firstStart) {
            createTableOnFirstStart();
            createTableOnFirstStart1();
        }

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,
                parent,false);
        return new ViewHolder(view);
    }


    @Override
    public void onBindViewHolder(@NonNull final CoffeeAdapter.ViewHolder holder, int position) {
        final CoffeeItem coffeeItem = coffeeItems.get(position);
        readCursorData(coffeeItem, holder);
        readCursorData1(coffeeItem, holder);

       // Glide.with(mContext).load(coffeeItems.get(position).getUrl()).into(holder.imageView);

        Glide.with(mContext)
                .asBitmap()
                .load(coffeeItems.get(position).getUrl())
                .thumbnail(0.05f)
                .apply(new RequestOptions().override(600,1200))
                .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                .listener(new RequestListener<Bitmap>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {

                        Palette.from(resource)
                                .generate(new Palette.PaletteAsyncListener() {
                                    @Override
                                    public void onGenerated(@Nullable Palette palette) {
                                        Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();
                                        Palette.Swatch dominantSwatch = palette.getDominantSwatch();
                                        Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();
                                        if (darkVibrantSwatch != null) {

                                            holder.cardView.setCardBackgroundColor(darkVibrantSwatch.getRgb());

                                        }else if (dominantSwatch != null) {

                                            holder.cardView.setCardBackgroundColor(dominantSwatch.getRgb());

                                        }else {

                                            holder.cardView.setCardBackgroundColor(lightVibrantSwatch.getRgb());

                                        }

                                    }
                                });

                        return false;
                    }
                })
                .into(holder.imageView);



        //Picasso.get().load(coffeeItems.get(position).getUrl()).resize(1080,1920).onlyScaleDown().into(holder.imageView);
        //holder.imageView.setImageResource(coffeeItem.getImageResourse());
        holder.titleTextView.setText(coffeeItem.getTitle());

        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(mContext,ViewActivity.class);
                intent.putExtra("image",coffeeItem.getUrl());
                intent.putExtra("title",coffeeItem.getTitle());
                intent.putExtra("tag",coffeeItem.getTag());
                intent.putExtra("resolution", coffeeItem.getResolution());
                intent.putExtra("size",coffeeItem.getSize());
                intent.putExtra("desc",coffeeItem.getDescription());
                intent.putExtra("keyId",coffeeItem.getKey_id());
                intent.putExtra("favStatus",coffeeItem.getFavStatus());
                intent.putExtra("downloadStatus",coffeeItem.getDownloadStatus());

                mContext.startActivity(intent);
            }
        });
    }

Screenshots

Here is my App Screen

This is what i want to achieve (Pinterest App Screenshot)

Answer 1

Move the pallet color-related code outside of the onResourceReady() and keep rest things same as it is

public class CoffeeAdapter extends RecyclerView.Adapter<CoffeeAdapter.ViewHolder> implements Filterable{

    private static final String TAG = "RecyclerAdapter";

    private ArrayList<CoffeeItem> coffeeItems;
    ArrayList<CoffeeItem> coffeeItemsAll;
    private Context mContext;
    private FavDB favDB;
    private DownloadDB downloadDB;

    public CoffeeAdapter(ArrayList<CoffeeItem> coffeeItems, Context mContext) {
        this.coffeeItems = coffeeItems;
        this.coffeeItemsAll = new ArrayList<CoffeeItem>(coffeeItems);
        this.mContext = mContext;
        notifyDataSetChanged();

    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        favDB = new FavDB(mContext);
        downloadDB = new DownloadDB(mContext);
        //create table on first
        SharedPreferences prefs = mContext.getSharedPreferences("prefs", mContext.MODE_PRIVATE);
        boolean firstStart = prefs.getBoolean("firstStart", true);
        if (firstStart) {
            createTableOnFirstStart();
            createTableOnFirstStart1();
        }

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,
                parent,false);
        return new ViewHolder(view);
    }


    @Override
    public void onBindViewHolder(@NonNull final CoffeeAdapter.ViewHolder holder, int position) {
        final CoffeeItem coffeeItem = coffeeItems.get(position);
        readCursorData(coffeeItem, holder);
        readCursorData1(coffeeItem, holder);


       Palette.from(resource)
       .generate(new Palette.PaletteAsyncListener() {
         @Override
         public void onGenerated(@Nullable Palette palette) {
         Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();
         Palette.Swatch dominantSwatch = palette.getDominantSwatch();
         Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();
         if (darkVibrantSwatch != null) {
             holder.cardView.setCardBackgroundColor(darkVibrantSwatch.getRgb());
         } else if (dominantSwatch != null) {

             holder.cardView.setCardBackgroundColor(dominantSwatch.getRgb());

         } else {

             holder.cardView.setCardBackgroundColor(lightVibrantSwatch.getRgb());

            }

          }
       });

       // Glide.with(mContext).load(coffeeItems.get(position).getUrl()).into(holder.imageView);

        Glide.with(mContext)
                .asBitmap()
                .load(coffeeItems.get(position).getUrl())
                .thumbnail(0.05f)
                .apply(new RequestOptions().override(600,1200))
                .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
                .listener(new RequestListener<Bitmap>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
                        return false;
                    }
                })
                .into(holder.imageView);



        //Picasso.get().load(coffeeItems.get(position).getUrl()).resize(1080,1920).onlyScaleDown().into(holder.imageView);
        //holder.imageView.setImageResource(coffeeItem.getImageResourse());
        holder.titleTextView.setText(coffeeItem.getTitle());

        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(mContext,ViewActivity.class);
                intent.putExtra("image",coffeeItem.getUrl());
                intent.putExtra("title",coffeeItem.getTitle());
                intent.putExtra("tag",coffeeItem.getTag());
                intent.putExtra("resolution", coffeeItem.getResolution());
                intent.putExtra("size",coffeeItem.getSize());
                intent.putExtra("desc",coffeeItem.getDescription());
                intent.putExtra("keyId",coffeeItem.getKey_id());
                intent.putExtra("favStatus",coffeeItem.getFavStatus());
                intent.putExtra("downloadStatus",coffeeItem.getDownloadStatus());

                mContext.startActivity(intent);
            }
        });
    }