Displaying User Images to CardView from Firebase using Picasso Not Working - java

I am trying to display images from my Firebase storage and realtime database to a CardView in my Android application. I have saved the images to the Firebase Storage and as a Url node under the specific user (dog). The CardView displays the dogs registered under each owner and each dog has its own profile picture essentially.. which I would like to display on the UI.
I am using Picasso as it was used within the tutorial I found, and seemed to be working, however it is trying to find 'context' within my DogUserAdapter, which is returning null. I wasn't previously using Context context as I am utilising a callback function instead on this particular CardView. What else can I use here to display the image from the database?
DogUserAdapter
public class DogUserAdapter extends FirebaseRecyclerAdapter<Dog, DogUserAdapter.DogViewHolder> {
private DogCallback dogCallback;
private Context context;
public DogUserAdapter(#NonNull FirebaseRecyclerOptions<Dog> options, #NonNull final DogCallback dogCallback) {
super(options);
this.dogCallback = dogCallback;
this.context = context;
}
#Override
protected void onBindViewHolder(#NonNull DogViewHolder holder, int position, #NonNull Dog model) {
holder.dogName.setText(model.getName());
Picasso.with(context)
.load(model.getImageUrl())
.into(holder.dogImage);
holder.cardView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
dogCallback.onCardViewClick(model);
}
});
}
#NonNull
#Override
public DogViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dog, parent, false);
return new DogUserAdapter.DogViewHolder(view);
}
public class DogViewHolder extends RecyclerView.ViewHolder {
TextView dogName;
ImageView dogImage;
CardView cardView;
public DogViewHolder(#NonNull View itemView) {
super(itemView);
dogName = itemView.findViewById(R.id.dogName);
dogImage = itemView.findViewById(R.id.dogImage);
cardView = itemView.findViewById(R.id.card_view_dog);
}
}
public interface DogCallback{
void onCardViewClick(final Dog dog);
}
}
CardView
Firebase Hierarchy

Patrick is right. You do not need context for picasso
Picasso.get().load(url).into(imageView);

Related

Why my images is not showing from firebase firestore?

I am working on an application where i am uploading multiple images with 4 edittexts to the firebase then I am trying to retrieve the data to the recyclerview now my editext's data is retrieving but the data of images is not showing in reyclerview.
my adapter code
#Override
public void onBindViewHolder(#NonNull Viewholder holder, int position)
{
holder.name.setText(datalist.get(position).getName());
holder.email.setText(datalist.get(position).getEmail());
holder.desc.setText(datalist.get(position).getDesc());
holder.book.setText(datalist.get(position).getBook());
Glide.with(context).load(datalist.get(position).getImage())
.into(holder.imageView);
}
#Override
public int getItemCount() {
return datalist.size();
}
public class Viewholder extends RecyclerView.ViewHolder{
TextView name, email, desc, book;
ImageView imageView;
public Viewholder(#NonNull View itemView) {
super(itemView);
name = itemView.findViewById(R.id.text_name);
email = itemView.findViewById(R.id.text_email);
desc = itemView.findViewById(R.id.text_desc);
book = itemView.findViewById(R.id.text_book);
imageView = itemView.findViewById(R.id.imageView3);
}
}
In the comment session you mentioned, getImage() is an array then, How it will load the image you need to pass a particular image in the array?
Let's suppose, If you want to load the first image in an array use the below code -
if(!wishlist_models.get(position).getImage().isEmpty()) {
Glide.with(context)
.load(wishlist_models.get(position).getImage()get(0))
.into(holder.wishlist_image);
}

Firestore - RecycleView - Image holder

I don't know how to write a holder for an image. I already have 2 texts set, but I don't know what the holder for the image should look like. Can you help me tell what the writeup for the image should look like in order for it to appear correctly?
holder.artistImage.setImageResource(model.getArtistImage());
My code:
public class ArtistsAdapter extends FirestoreRecyclerAdapter<ArtistsModel, ArtistsAdapter.holder> {
/**
* Create a new RecyclerView adapter that listens to a Firestore Query. See {#link
* FirestoreRecyclerOptions} for configuration options.
*
* #param options
*/
public ArtistsAdapter(#NonNull FirestoreRecyclerOptions<ArtistsModel> options) {
super(options);
}
#Override
protected void onBindViewHolder(#NonNull holder holder, int position, #NonNull ArtistsModel model) {
holder.artistName.setText(model.getArtistName());
holder.artistClass.setText(model.getArtistClass());
}
#NonNull
#Override
public holder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.artistrow, parent, false);
return new holder(view);
}
class holder extends RecyclerView.ViewHolder{
TextView artistName, artistClass;
ImageView artistImage;
public holder(#NonNull View itemView) {
super(itemView);
View view = itemView;
artistName = view.findViewById(R.id.tvartist_name);
artistClass = view.findViewById(R.id.tvartist_class);
artistImage = view.findViewById(R.id.ivartist_photo);
}
}
You can use a library like Glide or Picasso to load the image from a given URL. Both libraries have lots of extra options for things like making the image round, adding a placeholder image while it loads, or adding an error image to show if it can't load.
With Glide:
You can pass in a context to the adapter constructor, or get it from the holder root view to use with Glide
#Override
protected void onBindViewHolder(#NonNull holder holder, int position, #NonNull ArtistsModel model) {
holder.artistName.setText(model.getArtistName());
holder.artistClass.setText(model.getArtistClass());
Glide.with(holder.itemView)
.load(model.getArtistImage())
.into(holder.artistImage);
}
With Picasso:
#Override
protected void onBindViewHolder(#NonNull holder holder, int position, #NonNull ArtistsModel model) {
holder.artistName.setText(model.getArtistName());
holder.artistClass.setText(model.getArtistClass());
Picasso.get()
.load(model.getArtistImage())
.into(holder.artistImage);
}

How to change an image in RecyclerView locally using drawable

I'm trying to change the image in a RecyclerView with a local drawable image. So in the project the RecyclerView is getting data from a local database, when a boolean column gets true, it should change into a tick. My item view looks like this.
And when the column is true, that clock symbol changes to tick. Here is the code which I tried:
My Adapter code:
public class HawbListAdapter extends RecyclerView.Adapter<HawbListAdapter.MyViewHolder> {
private Context context;
private ArrayList<HawbLists> hawbLists;
private DatabaseHelper mDatabaseHelper;
public HawbListAdapter(Context context, ArrayList<HawbLists> hawbLists) {
this.context = context;
this.hawbLists = hawbLists;
}
#NonNull
#Override
public MyViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.hawb_list, parent, false);
return new MyViewHolder(v);
}
#Override
public void onBindViewHolder(#NonNull MyViewHolder holder, int position) {
holder.Hcode.setText(hawbLists.get(position).getHawbCode());
holder.name.setText(hawbLists.get(position).getName());
if (hawbLists.get(position).isTick()) {
holder.timeImage.setImageResource(R.drawable.ic_right);
}
//Picasso.get().load(hawbLists.get(position).isTick()).into(holder.timeImage);
//holder.timeImage.setImageResource(R.drawable.ic_right);
}
#Override
public int getItemCount() {
return hawbLists.size();
}
public static class MyViewHolder extends RecyclerView.ViewHolder {
private TextView Hcode;
private TextView name;
private ImageView timeImage;
public MyViewHolder(#NonNull View itemView) {
super(itemView);
Hcode = itemView.findViewById(R.id.hawbCode12345);
name = itemView.findViewById(R.id.name_hawb_list);
timeImage = itemView.findViewById(R.id.timeImage);
}
}
}
even when I'm using this
if (hawbLists.get(position).isTick()) {
holder.timeImage.setImageResource(R.drawable.ic_right);
}
and one of the items is true, it is still showing the same clock (wait) symbol, but If I use this:
if (!hawbLists.get(position).isTick()) {
holder.timeImage.setImageResource(R.drawable.ic_right);
}
then all of them regardless of true or false turn into tick mark. Unable to figure out where I'm doing it wrong.
Try this:
if (hawbLists.get(position).isTick()){
holder.timeImage.setImageResource(R.drawable.ic_right);
} else {
holder.timeImage.setImageResource(R.drawable.ic_not_ticked);
}
Do you know about the concept of recycling? Look at your list in the device and see how many rows you have! Now add up one (as swap view) and it's all the views you have. It means no matter how many entries you have (hawbLists.size()), all of them are created/recycled when you scroll. So you have to consider all the possible cases of your item children. Because otherwise a recycled view won't change the view state and likely will show irrelevant behavior.

How do I place my image adapter (it is an infinite cycler view) in a fragment?

I'm setting up an image adapter in my fragments. I recently learn the usefulness of Fragments and Therefore I am trying to switch from the traditional activities to a central activity with multiple fragments. But I cant get to display my images' infinite cycler view.
I have tried reading answers from previous questions here on Stack overflow (ImageAdapter cannot be applied to fragment class and ImageAdapter cannot be applied to a Fragment Class) but I didnt really understand anything perhaps because I am a beginner in android studio with no educational background in coding. I have also tried youtube and everywhere.
I havent found tutorials to do this, I understand that fragments is relatively new in android studio
This is the fragment I am trying to switch to
public TrendingFragment() {
// Required empty public constructor
}
private static final String TAG = "Trending";
HorizontalInfiniteCycleViewPager viewPager;
List<TrendingHolder> TrendingList = new ArrayList<>();
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragme
View view = inflater.inflate(R.layout.fragment_trending, container, false);
initData();
viewPager = view.findViewById(R.id.view_pager);
viewPager.setAdapter(new TrendingAdapter(getActivity()));
return view;
}
private void initData() {
//Adding the Images on board
TrendingList.add(new TrendingHolder(R.drawable.ad_test));
TrendingList.add(new TrendingHolder(R.drawable.burger_test));
TrendingList.add(new TrendingHolder(R.drawable.italian_test));
TrendingList.add(new TrendingHolder(R.drawable.pizza_test));
}
}
This is my adapter class
public class TrendingAdapter extends PagerAdapter {
Context context;
List<TrendingHolder> TrendingList;
private static final String TAG = "TrendingAdapter";
public TrendingAdapter(Context context, List<TrendingHolder> trendingList) {
this.context = context;
this.TrendingList = trendingList;
}
#Override
public int getCount() {
return TrendingList.size();
}
#Override
public boolean isViewFromObject(View view, #NonNull Object o){
return view.equals(o);
}
#Override
public void destroyItem(#NonNull ViewGroup container, int position, #NonNull Object object) {
container.removeView((View)object);
}
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
//Inflate View
View view = LayoutInflater.from(context).inflate(R.layout.card_item, container, false);
//View
ImageView trending_image = (ImageView)view.findViewById(R.id.trending_holder);
//Set Data
trending_image.setImageResource(TrendingList.get(position).getImage());
//set On Event Click
view.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//shop activity comes here
Log.d(TAG, "onClick: added to Cart");
}
});
container.addView(view);
return view;
}
}
This is my model for the images
public class TrendingHolder {
private int image;
public TrendingHolder(){
}
public TrendingHolder(int image) {
this.image = image;
}
public int getImage() {
return image;
}
public void setImage(int image) {
this.image = image;
}
}
I am getting this error TrendingAdapter( ) 
in TrendingAdapter cannot be applied
to
(androidx.fragment.app.FragmentActivity) in my Trending Fragment
It seems like missing constructor parameter. The constructor of TrendingAdapter accepts 2 parameters public TrendingAdapter(Context context, List<TrendingHolder> trendingList). But you pass 1 parameter viewPager.setAdapter(new TrendingAdapter(getActivity()));.

android studio FirebaseRecyclerAdapter

This is the code and this is the error message and i don't know what i do
so what can you do for it
so what is the error means i don't know.
That all i know and i dont know what should i do for this kind of problem so if it possible to fix it or someone know how can i run it correctly so go a head.
The error shown in image: https://i.stack.imgur.com/QJl7o.png
And this is the menuviewholder:
public class MenuViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public TextView txtMenuName;
public ImageView imageView;
private ItemClickListener itemClickListener;
public MenuViewHolder(View itemView){
super(itemView);
txtMenuName = (TextView)itemView.findViewById(R.id.menu_name);
imageView = (ImageView)itemView.findViewById(R.id.menu_image);
itemView.setOnClickListener(this);
}
public void setItemClickListener(ItemClickListener itemClickListener) {
this.itemClickListener = itemClickListener;
}
#Override
public void onClick(View view)
{
itemClickListener.onClick(view,getAdapterPosition(),false);
}
}
https://i.stack.imgur.com/f6hEF.png
Here is the load part of it and the firbaserec:
Load menu
recycler_menu =(RecyclerView)findViewById(R.id.recycler_menu);
recycler_menu.setHasFixedSize(true);
layoutManager = new LinearLayoutManager(this);
recycler_menu.setLayoutManager(layoutManager);
loadMenu();
}
private void loadMenu()
{
FirebaseRecyclerAdapter<Category, MenuViewHolder>
adapter =new FirebaseRecyclerAdapter <Category, MenuViewHolder>(Category.class,menu_item,MenuViewHolder.class,categorys) {
#Override
protected void onBindViewHolder(#NonNull MenuViewHolder holder, int position, #NonNull Category model) {
holder.txtMenuName.setText(model.getName());
Picasso.get().load(model.getImage()).into(holder.imageView);
final Category clickItem = model;
holder.setItemClickListener(new ItemClickListener() {
#Override
public void onClick(View viw, int position, boolean isLongClick) {
Toast.makeText(Home.this, ""+clickItem.getName(), Toast.LENGTH_SHORT).show();
}
});
}
#NonNull
#Override
public MenuViewHolder onCreateViewHolder(#NonNull ViewGroup viewGroup, int i) {
return null;
}
};
recycler_menu.setAdapter(adapter);
}
The problem is that the latest version (3.x) of FirebaseUI implements a different method of initializing a FirebaseRecyclerAdapter than previous versions.
Read this for more clarification about this FirebaseUI docs.
From the docs, you can understand everything, but in brief:
First, configure the adapter by building FirebaseRecyclerOptions. I have used the same example from the docs.
FirebaseRecyclerOptions<Chat> options =
new FirebaseRecyclerOptions.Builder<Chat>()
.setQuery(query, Chat.class)
.build();
Next create the FirebaseRecyclerAdapter object. You should already have a ViewHolder subclass for displaying each item. You should be able to do it now.

Categories