Add more than one object to RecyclerView Adapter

Question

In my fragment FilteredResultsFragment.java I have a recycler view with an ImageView which displays an image that is retrieved from the Firebase Realtime database . This code here is from my FilteredResultaFragment.java

public class FilteredResultsFragment extends android.support.v4.app.Fragment {
ImageAdapter imageAdapter;
List<String> listOfImages = new ArrayList<>();
List<String> listOfNames = new ArrayList<>();
private RecyclerView recyclerView;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    View viewFilteredResults = inflater.inflate(R.layout.fragment_filtered_results, container, false);
    recyclerView = viewFilteredResults.findViewById(R.id.recyclerViewFiltered);
    recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
    imageAdapter = new ImageAdapter(listOfImages);
    imageAdapter = new ImageAdapter(listOfNames);
    recyclerView.setAdapter(imageAdapter);
    return viewFilteredResults;
}

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        if (getArguments() != null) {
            listOfImages.addAll(getArguments().getStringArrayList("listOfImages"));
            imageAdapter.notifyDataSetChanged();
        }
    }
}

As you can see, I've created an Adapter for my Recycler View . Its name is ImageAdapter.java and there is where I display the image into my ImageView . Everything works fine, as you can see:

The problem is, I want to display a TextView too with a value. How can I achieve that? Here is my ImageAdapter-java

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {
List<String> listaPaisesFiltrados;
List<String> listaNomesFiltrados;

ImageAdapter(List<String> listaPaisesFiltrados) {
    this.listaPaisesFiltrados = listaPaisesFiltrados;

}

@NonNull
@Override
public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View itemView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.list_item_view, parent, false);


    return new ImageViewHolder(itemView);
}

@Override
public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
    String imageUrl = listaPaisesFiltrados.get(holder.getAdapterPosition());
    Log.d("ADAPTER", "imageUrl : " + imageUrl + " position : " + holder.getAdapterPosition());

    Glide.with(holder.imageView.getContext()).load(imageUrl).centerCrop().into(holder.imageView);
}

@Override
public int getItemCount() {
    Log.d("ADAPTER", "SIZE : " + listaPaisesFiltrados.size());
    return listaPaisesFiltrados.size();
}


public class ImageViewHolder extends RecyclerView.ViewHolder {
    ImageView imageView;

        public ImageViewHolder(View itemView) {

            super(itemView);
            imageView = itemView.findViewById(R.id.imgPaisFiltrado);

        }
    }

}

By the way, the values that I want to display in the TextView are already retrieved and I send them to the ImageAdapter throuh my FilteredResults.java this way imageAdapter = new ImageAdapter(listOfNames);

Answer 1

All you need to do to accomplish that is to create a new layout with an imageview and a textview.

For example if you made it and called it city_thumbnail_view Then in your onCreateViewHolder you would do.

View itemView = LayoutInflater.from(parent.getContext())
        .inflate(R.layout.city_thumnail_view, parent, false);

Then in your ViewHolder you would just add the textview with its id name

public class ImageViewHolder extends RecyclerView.ViewHolder {
    ImageView imageView;
    TextView textView;

    public ImageViewHolder(View itemView) {

        super(itemView);
        imageView = itemView.findViewById(R.id.imgPaisFiltrado);
        textView = itemView.findViewById(R.id.cityName);
    }
}

Then in your onBindViewHolder instead of just having a List of Strings you would need to create an object that holds the cityName and the imageUrl.

@Override
public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
    myCityNameObject city = listaPaisesFiltrados.get(holder.getAdapterPosition());

    textView.setText(city.cityName);    
    Glide.with(holder.imageView.getContext()).load(imageUrl).centerCrop().into(holder.imageView);
}

Here is an example of what the object could look like.

public class City
{
    // Instance Variables
    String cityName;
    String cityImageUrl;

    // Constructor Declaration of Class
    public City(String cityName, String cityImageUrl)
    {
        this.cityname = cityName;
        this.cityImageUrl = cityImageUrl;
    }

    // Get City
    public String getCityName()
    {
        return cityName;
    }

    // Set City
    public String setCityName(String name)
    {
        cityName = name;
    }

    // Get City Image Url
    public int getCityImageUrl()
    {
        return cityImageUrl;
    }

    // Set City Image Url
    public String setCityImageUrl(String url)
    {
    cityImageUrl = url;
    }
}

Here is what your Adapter should look like after the changes

public class ImageAdapter extends RecyclerView.Adapter { 
    List<City> listaPaisesFiltrados; 

    ImageAdapter(List<City> listaPaisesFiltrados) {
    this.listaPaisesFiltrados = listaPaisesFiltrados;

    }

    @NonNull
    @Override
    public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int             viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.city_thumnail_view, parent, false);


        return new ImageViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
    City city = listaPaisesFiltrados.get(position);

    holder.cityNameTextView.setText(city.getCityName());    
    Glide.with(holder.imageView.getContext()).load(imageUrl).centerCrop().into(holder.imageView);
    }

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


    public class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView cityNameTextView;

            public ImageViewHolder(View itemView) {

            super(itemView);
            imageView = itemView.findViewById(R.id.imgPaisFiltrado);
            cityNameTextView = itemView.findViewById(R.id.cityNameText);
        }
    }
}