How to navigate to another fragment using Navcontroller after clicking on cardview?

Question

I have various Cardviews and I want to go to specific fragments of each after I click on them. I am using Navigation graph and i want to use NavController for going to another fragment. I am trying to use Navigation but I am simply missing something. Below is my code. FlashcardsAdapter.kt

class FlashcardsAdapter(private val imageList: List<FlashCardInfo>) :RecyclerView.Adapter<FlashcardsAdapter.ViewHolder>(){

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageViewFlashcards = itemView.findViewById<ImageView>(com.example.visuallithuanian.R.id.imageViewFlashcards)
        val textViewFlashcards = itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardName)
        val textViewFlashcardsLithuanian = itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardLithuanian)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(com.example.visuallithuanian.R.layout.item_flashcards, parent, false)
        return ViewHolder(view)

    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val current_item = imageList[position]

        holder.imageViewFlashcards.setImageResource(current_item.imageId)
        holder.textViewFlashcards.text = current_item.name
        holder.textViewFlashcardsLithuanian.text = current_item.translation

        val imageFlashcards = holder.itemView.findViewById<ImageView>(com.example.visuallithuanian.R.id.imageViewFlashcards)
        val textViewFlashCards = holder.itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardName)
        val cardviewFlashcard = holder.itemView.findViewById<CardView>(com.example.visuallithuanian.R.id.cardFlashCards)
        val textLithuanian = holder.itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardLithuanian)
    }

    override fun getItemCount(): Int {
        return imageList.size
    }
}

Flashcards.kt

class FlashCards : Fragment() {

    lateinit var bottomNav:BottomNavigationView

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        // Inflate the layout for this fragment
        val view=inflater.inflate(R.layout.fragment_flash_cards, container, false)

        //Taking the bOTTOMNavigation view instance from Activity into Fragment
        bottomNav = (activity as? FirstScreen)?.findViewById(R.id.bottomNavigationView)!!
        bottomNav.visibility = View.VISIBLE

        val back_icon = view.findViewById<ImageView>(R.id.back_icon)
        val recyclerViewCards1 = view.findViewById<RecyclerView>(R.id.recyclerViewFlashcards)

        recyclerViewCards1.layoutManager = LinearLayoutManager(context)

        val navController = Navigation.findNavController(requireActivity(),
            R.id.nav_host_fragment
        )

        val flashCardList = generateFlashCards()
        val adapter = FlashcardsAdapter(flashCardList)
        recyclerViewCards1.adapter = adapter


        // setting up listener
        back_icon.setOnClickListener {
            activity?.onBackPressed()
        }

        return view
    }

    private fun generateFlashCards():List<FlashCardInfo> {
        return listOf(
            FlashCardInfo(R.drawable.talking,"Daily Conversation","Kasdienis pokalbis"),
            FlashCardInfo(R.drawable.doctorvisit,"Questions and Pronouns","Klausimai ir įvardžiai"),
            FlashCardInfo(R.drawable.food,"Food","Maistas"),
            FlashCardInfo(R.drawable.relatives,"Relatives","Giminaičiai"),
            FlashCardInfo(R.drawable.clothing,"Clothing","Drabužiai"),
            FlashCardInfo(R.drawable.village,"Towns and Villages","Miestai ir kaimai"),
            FlashCardInfo(R.drawable.nature,"Nature","Gamta"),
            FlashCardInfo(R.drawable.verbs,"Popular Verbs","Populiariausi veiksmažodžiai"),
        )

    }

Here all the elements in list are cardview elemnts and for each I have a fragment. Below is my xml layout files.

fragments_flash_cards.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="@drawable/flash_tablebar"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:src="@drawable/ic_arrow_back" />

        <RelativeLayout
            android:layout_marginLeft="20dp"
            android:id="@+id/relativeFlashcard"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_toRightOf="@id/back_icon"
            >
        <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
            android:textStyle="bold"
            android:layout_marginLeft="30dp"
        android:text="Flashcards"
        android:textSize="40sp"
        android:textColor="#FFF" />
            <TextView
                android:id="@+id/subtext_flash"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_below="@id/title_text"
                android:layout_marginLeft="30dp"
                android:text="Pick a set to practice"
                android:textSize="20sp"
                android:textColor="#FFF" />
        </RelativeLayout>



    </androidx.appcompat.widget.Toolbar>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewFlashcards"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_below="@id/toolbar"
        android:layout_alignParentBottom="true"
        android:scrollbars="vertical" />


</RelativeLayout>

item_flashcards.xml

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.cardview.widget.CardView
            android:layout_width="270dp"
            android:layout_height="150dp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:id="@+id/cardFlashCards"
            app:cardCornerRadius="25dp"
            app:cardElevation="4dp"
            >
            <LinearLayout
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="@drawable/flashcard_color"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageViewFlashcards"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center"
                    android:scaleType="fitXY"
                    android:background="@drawable/circular_flashcardview" />

                <TextView
                    android:id="@+id/textflashCardName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Text1"
                    android:textColor="@color/white"
                    android:layout_marginTop="10dp"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="18sp" />
                <TextView
                    android:id="@+id/textflashCardLithuanian"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Text2"
                    android:textColor="@color/white"
                    android:layout_marginBottom="10dp"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </FrameLayout>

</androidx.core.widget.NestedScrollView>

Try referring to this: https://youtu.be/bawjkQoIYt8 – Shaurya Goyal Mar 15 '23 at 16:20 — Shaurya Goyal, Mar 15 '23 at 16:20

score 0 · Answer 1 · answered Mar 19 '23 at 08:11

What you need is a CLickListener which is set on all items via the Adapter when binding the ViewHolders. When clicking an item, the FlashFragment is notified and can then handle the navigation to the next Fragment.

class FlashcardsAdapter(
      private val imageList: List<FlashCardInfo>,
      private val onFlashCardClicked: (FlashCardInfo) -> Unit
) : ... {

      override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val current_item = imageList[position]

        holder.imageViewFlashcards.setImageResource(current_item.imageId)
        holder.textViewFlashcards.text = current_item.name
        holder.textViewFlashcardsLithuanian.text = current_item.translation

        ...

        val cardviewFlashcard = ...
        cardviewFlashcard.setOnClickListener { onFlashCardClicked(current_item) }
    }

}



class FlashCards : Fragment() {

  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
     ...

     val adapter = FlashcardsAdapter(flashCardList){
         // navigate to Fragment based on FlashCardInfo
     }
  }
}

You can simplify your Adapter by using ListAdapter. It provides base handling for a list of data inside RecyclerView.

How to navigate to another fragment using Navcontroller after clicking on cardview?

1 Answers1