Fragment implementation with a picture

Question

Hi, there was a problem I can not transfer the image to the fragment. I have an adapter RecyclerView ProductAdapter , there is a Fragment in which the list is actually created (title and picture), there is a class Product and there is a fragment that will display the clicked picture. I cannot understand how and where to pull a certain picture. I think that the adapter but the picture itself is specified in the fragment.

This is the adapter code itself.

 public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.ProductViewHolder> { private Context mCtx; private List<Product> productList; public ProductAdapter(Context mCtx, List<Product> productList) { this.mCtx = mCtx; this.productList = productList; } private Fragment fragment; @Override public ProductViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { LayoutInflater inflater = LayoutInflater.from(mCtx); View view = inflater.inflate(R.layout.list_layout, null); return new ProductViewHolder(view); } @Override public void onBindViewHolder(ProductViewHolder holder, int position) { Product product = productList.get(position); holder.textViewTitle.setText(product.getTitle()); holder.imageView.setImageDrawable(mCtx.getResources().getDrawable(product.getImage())); } @Override public int getItemCount() { return productList.size(); } public class ProductViewHolder extends RecyclerView.ViewHolder { ImageView imageView; TextView textViewTitle, textViewShortDesc, textViewRating, textViewPrice; Button buttonImage; public ImageView getImageView() { return imageView; } public void setImageView(ImageView imageView) { this.imageView = imageView; } public ProductViewHolder(final View itemView) { super(itemView); textViewTitle = itemView.findViewById(R.id.textViewTitle); imageView = itemView.findViewById(R.id.imageView); buttonImage = itemView.findViewById(R.id.buttonImage); buttonImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { FragmentBigPicture fragmentBigPicture = new FragmentBigPicture(); FragmentManager fragmentManager = ((Activity) mCtx).getFragmentManager(); fragmentManager.beginTransaction().replace(R.id.container, fragment) .commit(); } }); } } }

this is class code

 public class Product { //private int id; private String title; /* private String shortdesc; private double rating; private double price;*/ private int image; public String getTitle() { return title; } public Product(int image) { this.image = image; } public Product(String title, int image) { this.title = title; this.image = image; } public int getImage() { return image; }}

This is the fragment code (do not pay attention to the implementation of the creation of the list, it will be implemented using the "parsing" of the site)

 public class FragmentImport extends Fragment { // TODO: Rename parameter arguments, choose names that match // the fragment initialization parameters, eg ARG_ITEM_NUMBER private static final String ARG_PARAM1 = "param1"; private static final String ARG_PARAM2 = "param2"; // TODO: Rename and change types of parameters private String mParam1; private String mParam2; List<Product> productList; //the recyclerview RecyclerView recyclerView; private OnFragmentInteractionListener mListener; public FragmentImport() { // Required empty public constructor } /** * Use this factory method to create a new instance of * this fragment using the provided parameters. * * @param param1 Parameter 1. * @param param2 Parameter 2. * @return A new instance of fragment FragmentImport. */ // TODO: Rename and change types and number of parameters public static FragmentImport newInstance(String param1, String param2) { FragmentImport fragment = new FragmentImport(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, param1); args.putString(ARG_PARAM2, param2); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); mParam2 = getArguments().getString(ARG_PARAM2); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_import, container, false); recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(new LinearLayoutManager(getActivity())); productList = new ArrayList<>(); productList.add( new Product("Apple MacBook Air Core i5 5th Gen - (8 GB/128 GB SSD/Mac OS Sierra)", R.drawable.macbook)); productList.add( new Product( "Dell Inspiron 7000 Core i5 7th Gen - (8 GB/1 TB HDD/Windows 10 Home)", R.drawable.dellinspiron)); productList.add( new Product( "Microsoft Surface Pro 4 Core m3 6th Gen - (4 GB/128 GB SSD/Windows 10)", R.drawable.surface)); ProductAdapter adapter = new ProductAdapter(getActivity(), productList); recyclerView.setAdapter(adapter); return view; } @Override public void onDetach() { super.onDetach(); mListener = null; }} /** * This interface must be implemented by activities that contain this * fragment to allow an interaction in this fragment to be communicated * to the activity and potentially other fragments contained in that * activity. * <p> * See the Android Training lesson <a href= * "http://developer.android.com/training/basics/fragments/communicating.html" * >Communicating with Other Fragments</a> for more information. */ interface OnFragmentInteractionListener { // TODO: Update argument type and name void onFragmentInteraction(Uri uri); }

This is the fragment code that will pull the image.

 public class FragmentBigPicture extends Fragment { // TODO: Rename parameter arguments, choose names that match // the fragment initialization parameters, eg ARG_ITEM_NUMBER private static final String ARG_PARAM1 = "param1"; private static final String ARG_PARAM2 = "param2"; // TODO: Rename and change types of parameters private String mParam1; private String mParam2; ImageView imageView2; private OnFragmentInteractionListener mListener; public FragmentBigPicture() { // Required empty public constructor } /** * Use this factory method to create a new instance of * this fragment using the provided parameters. * * @param param1 Parameter 1. * @param param2 Parameter 2. * @return A new instance of fragment FragmentBigPicture. */ // TODO: Rename and change types and number of parameters public static FragmentBigPicture newInstance(String param1, String param2) { FragmentBigPicture fragment = new FragmentBigPicture(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, param1); args.putString(ARG_PARAM2, param2); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); mParam2 = getArguments().getString(ARG_PARAM2); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_big_picture, container, false); imageView2 = (ImageView) view.findViewById(R.id.imageView2); FragmentImport fImport = new FragmentImport(); return view; } // TODO: Rename method, update argument and hook method into UI event public void onButtonPressed(Uri uri) { if (mListener != null) { mListener.onFragmentInteraction(uri); } } @Override public void onDetach() { super.onDetach(); mListener = null; } /** * This interface must be implemented by activities that contain this * fragment to allow an interaction in this fragment to be communicated * to the activity and potentially other fragments contained in that * activity. * <p> * See the Android Training lesson <a href= * "http://developer.android.com/training/basics/fragments/communicating.html" * >Communicating with Other Fragments</a> for more information. */ public interface OnFragmentInteractionListener { // TODO: Update argument type and name void onFragmentInteraction(Uri uri); }}

I really hope that you can help me, for a few days I thought how to solve it.

In the place where you create the instance instance, you can call getAdapterPosition() and ...

Answer 1 · 2018-01-21T23:33:21

Hello!

The best way, as it seems to me, is to transfer from the adapter int a variable of the picture that the user clicked on to the fragment, where the RecyclerView is located, and from this fragment start the fragment with the image.

Example: The user clicked on the picture -> from the ProductAdapter adapter is passed the int variable of the image (the int image field from the Product class) to the FragmentImport -> fragment. The FragmentImport launches the fragment with this picture FragmentBigPicture .

Decision:

Add an interface for adapter interaction with the fragment ( FragmentImport ) to the adapter class ( ProductAdapter ). Adapter code:

 public class ProductAdapter extends RecyclerView.Adapter { //Данные для адаптера private List productList; //Ссылка на интерфейс, который взаимодействует с фрагментом private OnListFragmentInteractionListener listener; //Конструктор, который принимает данные и реализацию интерфейса для взаимодействия фрагмента и адаптера public ProductAdapter(List items, OnListFragmentInteractionListener listener) { productList = items; this.listener = listener; } @Override public ProductViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { LayoutInflater inflater = LayoutInflater.from(mCtx); View view = inflater.inflate(R.layout.list_layout, null); return new ProductViewHolder(view); } @Override public void onBindViewHolder(ProductViewHolder holder, int position) { Product product = productList.get(position); holder.textViewTitle.setText(product.getTitle()); holder.imageView.setImageDrawable(mCtx.getResources().getDrawable(product.getImage())); } @Override public int getItemCount() { return productList.size(); } public class ProductViewHolder extends RecyclerView.ViewHolder { ImageView imageView; TextView textViewTitle, textViewShortDesc, textViewRating, textViewPrice; Button buttonImage; public ImageView getImageView() { return imageView; } public void setImageView(ImageView imageView) { this.imageView = imageView; } public ProductViewHolder(final View itemView) { super(itemView); textViewTitle = itemView.findViewById(R.id.textViewTitle); imageView = itemView.findViewById(R.id.imageView); buttonImage = itemView.findViewById(R.id.buttonImage); buttonImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // При нажатии на картинку, вызывается метод интерфейса, в // который передается идентификатор нажатой картинки if (listener != null) listener .onClickItemPicture( productList.get(getAdapterPosition()).getImage()); } }); } } //Интерфейс для взаимодействия адаптера и фрагмента interface OnListFragmentInteractionListener { //Метод, который необходимо реализовать void onClickItemPicture(int picNumber); } }

Change the fragment that displays the FragmentBigPicture image. It is necessary so that it takes the ID of the image that it will display. Pass the identifier through arguments, the method newInstance (int picNum) . FragmentBigPicture fragment code:

 public class FragmentBigPicture extends Fragment { private static final String ARG_IMAGE_SRC = "image_resource_id"; private ImageView imageView2; public FragmentBigPicture() { // Required empty public constructor } public static FragmentBigPicture newInstance(int image) { Bundle args = new Bundle(); //Кладем идентификатор картинки в аргументы args.putInt(ARG_IMAGE_SRC, image); FragmentBigPicture fragment = new FragmentBigPicture(); //Прикрепляем аргументы к фрагменту fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_big_picture, container, false); imageView2 = (ImageView) view.findViewById(R.id.imageView2); //Получаем картинку из аргументов, если аргументы пусты возвращаем //картинку-заглушку int currentImg = getArguments() != null ? getArguments().getInt(ARG_IMAGE_SRC) : R.drawable.stub; //Ставим полученную картинку imageView2.setImageDrawable(ContextCompat.getDrawable(getContext(), currentImg)); return view; }}

In the FragmentImport fragment, respectively, we change the adapter initialization and implement the method for calling the FragmentBigPicture fragment.

 public class FragmentImport extends Fragment { private RecyclerView recyclerView; private List productList; public FragmentImport() { } // TODO: Customize parameter initialization @SuppressWarnings("unused") public static FragmentImport newInstance(int columnCount) { FragmentImport fragment = new FragmentImport(); Bundle args = new Bundle(); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_import, container, false); recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(new LinearLayoutManager(getActivity())); productList = new ArrayList(); productList.add( new Product("Apple MacBook Air Core i5 5th Gen - (8 GB/128 GB SSD/Mac OS Sierra)", R.drawable.macbook)); productList.add( new Product( "Dell Inspiron 7000 Core i5 7th Gen - (8 GB/1 TB HDD/Windows 10 Home)", R.drawable.dellinspiron)); productList.add( new Product( "Microsoft Surface Pro 4 Core m3 6th Gen - (4 GB/128 GB SSD/Windows 10)", R.drawable.surface)); ProductAdapter adapter = new ProductAdapter(productList, //Реализация интерфейса адаптера, которая будет //вызывать при нажатии на картинку new ProductAdapter.OnListFragmentInteractionListener() { @Override public void onClickItemPicture(int picNumber) { //Наш реализованный метод, который вызывает //фрагмент FragmentBigPicture //Создаем фрагмент и //передаем в него идентификатор картинки FragmentBigPicture fragmentBigPicture = newFragmentBigPicture.newInstance(picNumber); FragmentManager fragmentManager = getActivity().getSupportFragmentManager(); fragmentManager .beginTransaction().replace(R.id.container, fragment) .commit(); } }); recyclerView.setAdapter(adapter); return view; } }

Good luck with the implementation!

PS: It is not advisable to store links to the fragment in Adapter

Hi, I'm sorry that I didn’t unsubscribe for so long, I just managed to write code and then a couple of errors in the ProductAdapter write Cannot resolve method 'getImage ()' and in FragmentImport: Cannot resolve symbol 'mCtx' and Cannot resolve symbol 'newIstance'.
@Iluha_vr I fixed the error, in theory everything should work

Fragment implementation with a picture

1 answer 1

More articles: