Thursday, 3 June 2021

Android Shimmer Effect not showing in RecyclerView

I'm trying to include the shimmer effect in recycler view before images are loaded from firebase but it only shows dots in the recycler view instead of images, before including the shimmer effect, images are loading properly

No Errors or warning in Log

Here is a screenshot of what I'm getting //Dots Are Very Small please look carefully you can see it in 2 lines in the center

Java Files

Search_Fragment.java // Search Fragment

     public class Search_Fragment extends Fragment {
    private final DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("uploads");
    public List<Upload> mUploads;
    PostAdapter_Search postsAdapter;
    ShimmerFrameLayout shimmerFrameLayout;
    RecyclerView postRecyclerView;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        requireActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        postRecyclerView = view.findViewById(R.id.postRecyclerView);
        shimmerFrameLayout = view.findViewById(R.id.shimmerEffect);
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
        getData();
        shimmerFrameLayout.startShimmer();
        mUploads = new ArrayList<>();
        postsAdapter = new PostAdapter_Search(getContext(), mUploads);
        postRecyclerView.setAdapter(postsAdapter);
        return view;
    }

    private void getData() {
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                if (snapshot.exists()) {
                    postRecyclerView.setVisibility(View.VISIBLE);
                    shimmerFrameLayout.stopShimmer();
                    shimmerFrameLayout.setVisibility(View.GONE);
                    mUploads.clear();
                    for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                        Upload upload = dataSnapshot.getValue(Upload.class);
                        upload.setmKey(dataSnapshot.getKey());
                        mUploads.add(upload);


                    }

                }

                //notify the adapter
                postsAdapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
            }
        });
    }
}

PostAdapter_Search.java // adapter class

    public class PostAdapter_Search extends RecyclerView.Adapter<PostAdapter_Search.PostViewHolder> {
    public static List<Upload> mUploads;
    public Context mcontext;
    //    ShimmerFrameLayout shimmerFrameLayout;


    public PostAdapter_Search(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container_search, parent, false);
        return new PostViewHolder(view);

    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Shimmer shimmer = new Shimmer.ColorHighlightBuilder()
                .setBaseColor(Color.parseColor("#F3F3F3"))
                .setBaseAlpha(1)
                .setHighlightColor(Color.parseColor("#E7E7E7"))
                .setHighlightAlpha(1)
                .setDropoff(50)
                .build();
        ShimmerDrawable shimmerDrawable = new ShimmerDrawable();
        shimmerDrawable.setShimmer(shimmer);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .placeholder(shimmerDrawable)
                .into(holder.imageView);


    }

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

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;

        public PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePostSearch);
        }


        public void setOnItemClickListener(PostAdapter.OnItemClickListener listener) {

        }
    }
}

XML Files

post_item_container_search.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imagePostSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginTop="11dp"
android:layout_marginEnd="6dp"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

post_item_containe_shimmer.xml

 <com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />


from Android Shimmer Effect not showing in RecyclerView

No comments:

Post a Comment