Communication between ViewPager's host Fragment and ViewPager's Fragment item

Question

I have a Fragment(InsiraDocumentosFragment) that has a viewpager and in that fragment I initialize an adapter(InsiraDocumentoAdapter) to initialize the viewpager. The adapter(InsiraDocumentoAdapter) initializes generic fragments (DocumentoFragment) that I update dynamically, I can now update the image that is shown inside it, but I need to get the click on that image to either change it or to remove it, but this needs to be done in the Fragment that contains the viewpager, because is in this fragment(InsiraDocumentosFragment) that I have the viewmodel that communicates with the database. How can I watch from InsiraDocumentosFragment the click on the imageview of DocumentFragment ?

Here are my code samples.

class InsiraDocumentosFragment : Fragment() {
    private lateinit var _view: View
    private lateinit var _imgBack: ImageView
    private lateinit var _viewpager: ViewPager
    private lateinit var _imgCamera: ImageView
    private lateinit var _footerTitle: TextView
    private lateinit var _titles: List
    private lateinit var _files: MutableList
    private lateinit var _viewModel: DocumentoViewModel
    private lateinit var _viewModelProposta: PropostaViewModel
    private lateinit var _viewModelArquivo: ArquivoViewModel

    private lateinit var _adapter: InsiraDocumentoAdapter

    private lateinit var _proposta: PropostaEntity

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_insira_documento, container, false)

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _view = view
        _imgBack = _view.findViewById(R.id.imgBack)
        _viewpager = _view.findViewById(R.id.viewpager)

        _imgCamera = _view.findViewById(R.id.cameraDocumento)
        _footerTitle = _view.findViewById(R.id.footerTitle)
        _files = mutableListOf(null, null, null)
        _titles = listOf(getString(R.string.identidade), getString(R.string.comprovante_renda), getString(R.string.foto))
        _adapter = InsiraDocumentoAdapter(_titles, _files, childFragmentManager)
        _viewpager.adapter = _adapter

        _viewModel = ViewModelProvider(
            this,
                    DocumentoViewModel.DocumentoViewModelFactory(DocumentoRepositorio(AppDatabase.getDatabase(_view.context).documentoDao()))
        ).get(DocumentoViewModel::class.java)
        _viewModelProposta = ViewModelProvider(
                this,
                PropostaViewModel.PropostaViewModelFactory(PropostaRepositorio(AppDatabase.getDatabase(_view.context).propostaDao()))
        ).get(PropostaViewModel::class.java)

        _viewModelArquivo = ViewModelProvider(
                this,
                ArquivoViewModel.ArquivoViewModelFactory(ArquivoRepositorio(AppDatabase.getDatabase(_view.context).arquivoDao()))
        ).get(ArquivoViewModel::class.java)

        addViewPagerListener()
        onClickImgBack()
        onClickImgCamera()
        onClickFooterTitle()

        val propostaStr = arguments?.getString(PROPOSTA)
        if (!propostaStr.isNullOrBlank()) {
            _proposta = jsonToObjProposta(propostaStr)
        }
    }

    private fun addViewPagerListener() {
        _viewpager.addOnPageChangeListener(object : OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {}
            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
            override fun onPageSelected(position: Int) {
                if (position == _viewpager.adapter!!.count - 1) {
                    _footerTitle.text = getString(R.string.concluir)
                } else {
                    _footerTitle.text = getString(R.string.proximo)
                }
                updateViewPagerLayout(position)
            }
        })
    }

    private fun updateViewPagerLayout(currentPage: Int) {
        when (currentPage) {
            0 -> {
                habilitaIndicadorPagina(_view.findViewById(R.id.primeiraPagina), _view.findViewById(R.id.imgPrimeiraPagina), R.drawable.primeira_pagina_selecionada)
                desabilitaIndicadorPagina(_view.findViewById(R.id.segundaPagina), _view.findViewById(R.id.imgSegundaPagina), R.drawable.segunda_pagina_nao_selecionada)
                desabilitaIndicadorPagina(_view.findViewById(R.id.terceiraPagina), _view.findViewById(R.id.imgTerceiraPagina), R.drawable.terceira_pagina_nao_selecionada)
            }
            1 -> {
                desabilitaIndicadorPagina(_view.findViewById(R.id.primeiraPagina), _view.findViewById(R.id.imgPrimeiraPagina), R.drawable.primeira_pagina_nao_selecionada)
                habilitaIndicadorPagina(_view.findViewById(R.id.segundaPagina), _view.findViewById(R.id.imgSegundaPagina), R.drawable.segunda_pagina_selecionada)
                desabilitaIndicadorPagina(_view.findViewById(R.id.terceiraPagina), _view.findViewById(R.id.imgTerceiraPagina), R.drawable.terceira_pagina_nao_selecionada)
            }
            2 -> {
                desabilitaIndicadorPagina(_view.findViewById(R.id.primeiraPagina), _view.findViewById(R.id.imgPrimeiraPagina), R.drawable.primeira_pagina_nao_selecionada)
                desabilitaIndicadorPagina(_view.findViewById(R.id.segundaPagina), _view.findViewById(R.id.imgSegundaPagina), R.drawable.segunda_pagina_nao_selecionada)
                habilitaIndicadorPagina(_view.findViewById(R.id.terceiraPagina), _view.findViewById(R.id.imgTerceiraPagina), R.drawable.terceira_pagina_selecionada)
            }
        }
    }

    private fun desabilitaIndicadorPagina(layout: ConstraintLayout, image: ImageView, imageDrawable: Int) {
        layout.setBackgroundResource(R.drawable.not_selected_indicator)
        image.setBackgroundResource(imageDrawable)
    }

    private fun habilitaIndicadorPagina(layout: ConstraintLayout, image: ImageView, imageDrawable: Int, ) {
        layout.setBackgroundResource(R.drawable.indicador_selecionado)
        image.setBackgroundResource(imageDrawable)
    }

    private fun onClickFooterTitle() {
        _footerTitle.setOnClickListener {
            if (_viewpager.currentItem == _viewpager.adapter!!.count - 1) {
                var success = true
                for (i in 0..2) {
                    if (_files[i] == null || _files[i]?.path.isNullOrEmpty()) {
                        Toast.makeText(_view.context, R.string.favor_preencher_todas_as_fotos, Toast.LENGTH_LONG).show()
                        _viewpager.currentItem = i
                        success = false
                        break
                    }
                }
                if (success) {
                    _viewModelProposta.addProposta(_proposta.numeroProposta, _proposta.valorPropasta, _proposta.clienteId).observe(viewLifecycleOwner, { idProposta ->
                        _proposta.id = idProposta
                        _viewModel.addDocumento("Nome do Documento", _proposta.id).observe(viewLifecycleOwner, { idDocumento ->
                            val arquivos = mutableListOf()
                            for (i in 0..2) {
                                arquivos.add(ArquivoEntity(0, _files[i]!!.path, _titles[i], idDocumento))
                            }
                            _viewModelArquivo.addArquivos(arquivos).observe(viewLifecycleOwner, {
                                _view.findNavController().popBackStack(R.id.clienteFragment, false)
                            })
                        })
                    })
                }
            } else {
                _viewpager.currentItem = _viewpager.currentItem + 1
            }
        }
    }

    private fun onClickImgBack() {
        _imgBack.setOnClickListener {
            _view.findNavController().navigateUp()
        }
    }

    private fun onClickImgCamera() {
        _imgCamera.setOnClickListener {
            val intent = Intent(_view.context, ScannerActivity::class.java)
            startActivityForResult(intent, REQUEST_CODE)
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == REQUEST_CODE && resultCode == Activity.RESULT_OK) {
            val mediaList = ScannerActivity.getOutputDirectory(_view.context).listFiles()?.toMutableList() ?: mutableListOf()
            if (mediaList.size > 0) {
                val documentoFile = mediaList[mediaList.size - 1]
                _files.removeAt(_viewpager.currentItem)
                _files.add(_viewpager.currentItem, documentoFile)
                _adapter.notifyDataSetChanged()
            }
        }
    }

    private fun jsonToObjProposta(json: String): PropostaEntity {
        val gson = Gson()
        val arrayTutorialType = object : TypeToken() {}.type

        return gson.fromJson(json, arrayTutorialType)
    }

    override fun onResume() {
        super.onResume()
        _view = requireView()
    }

    companion object {
        const val REQUEST_CODE = 1
        const val IMAGE = "IMAGE"
        const val ID_PROPOSTA = "ID_PROPOSTA"
        const val PROPOSTA = "PROPOSTA"
    }
}

class InsiraDocumentoAdapter(private val titles: List, private var files: List, manager: FragmentManager): FragmentStatePagerAdapter(manager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getCount() = 3
    override fun getItem(position: Int): Fragment {
        return DocumentoFragment.newInstance(titles[position], files[position])
    }
    override fun getItemPosition(`object`: Any): Int {
        return POSITION_NONE
    }
}

class DocumentoFragment : Fragment() {
    private lateinit var _view: View
    private lateinit var _documento: ImageView
    private lateinit var _documentoShape: ImageView
    private lateinit var _txtTitle: TextView
    private var _file: File? = null

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_documento, container, false)

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _view = view
    }

    private fun setUpView() {
        _documento = _view.findViewById(R.id.documento)
        _documentoShape = _view.findViewById(R.id.documentoShape)
        _txtTitle = _view.findViewById(R.id.txtTitle)
        _txtTitle.text = arguments?.getString(TITLE)
        if (!arguments?.getString(FILE).isNullOrEmpty()) {
            _file = File(arguments?.getString(FILE))
        }
        onImgClick()
        insereImagem()
    }

    private fun onImgClick() {
        _documento.setOnClickListener {
            if (_documentoShape.visibility == View.GONE && _file != null) {
                val intent = Intent(_view.context, FullScreenActivity::class.java)
                intent.putExtra(InsiraDocumentosFragment.IMAGE, _file?.path)
                intent.putExtra(TITLE, _txtTitle.text)
                startActivity(intent)
            }
        }
    }

    private fun insereImagem() {
        if (_file != null) {
            Picasso.get().load(_file!!).into(_view.findViewById(R.id.documento))
            _view.findViewById(R.id.documentoShape)?.visibility = View.GONE
        } else {
            _view.findViewById(R.id.documentoShape)?.visibility = View.VISIBLE
        }
    }

    override fun onResume() {
        super.onResume()
        setUpView()
    }

    companion object {
        fun newInstance(title: String, file: File?): DocumentoFragment {
            val fragmentFirst = DocumentoFragment()
            val args = bundleOf(
                TITLE to title,
                FILE to file?.path
            )
            fragmentFirst.arguments = args
            return fragmentFirst
        }

        const val TITLE = "TITLE"
        const val FILE = "FILE"
    }
}

user_9851608 · Answer

I need to get the click on that image to either change it or to remove it, but this needs to be done in the Fragment that contains the viewpager, because is in this fragment(InsiraDocumentosFragment) that I have the viewmodel that communicates with the database.

You have a couple of options to do that:

First one:

Make the ViewModel shared between both fragments (InsiraDocumentosFragment & DocumentoFragment) by instantiating it in both fragments with the activity as the owner using requireActivity() that hosts both fragments:

val viewModel =
        ViewModelProvider(requireActivity()).get(MyViewModel::class.java)

And then no need to access the parent fragment for changing the image; because now you've an instance of the ViewModel in the DocumentoFragment.

Second one:

Access the InsiraDocumentosFragment from the DocumentoFragment using requireParentFragment(), but first create a method in parent that you want to call from the page fragment to do your needed job.

Assuming the method that you created in InsiraDocumentosFragment is someMethodInParent()

In DocumentoFragment:

val parentFragment = requireParentFragment() as InsiraDocumentosFragment
parentFragment.someMethodInParent()

Communication between ViewPager's host Fragment and ViewPager's Fragment item

1 Answers