androidkotlinandroid-recyclerviewandroid-cardview

How can I reduce space between the recyclerview cardviews that are generated dynamcially?


I have created a horizontal scrolling for recylerview elements to scroll left to right and vice versa like this enter image description here

The number cardviews in the recyclerview will increase dynamically. As you can see in the screen, the distaance between two cardviews is huge. How can I make it less?

Following is fragments_flashcard.xml code which is as follows

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="wrap_content"
            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_marginStart="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_marginStart="30dp"
                android:text="@string/swipe_left_for_more_cards"
                android:textSize="20sp"
                android:textColor="#FFF" />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>
    <LinearLayout
        android:gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:id="@+id/linearH1"
        android:orientation="horizontal"
        android:layout_marginStart="10dp"
        android:layout_width="match_parent"
        android:layout_below="@id/toolbar"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textEasy"
            android:gravity="start"
            android:textStyle="bold"
            android:textSize="20sp"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/easy_cards"/>

        <ImageView
            android:layout_marginTop="11dp"
            android:layout_marginStart="10dp"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:src="@drawable/arrow" />

    </LinearLayout>
    <LinearLayout
        android:layout_below="@id/linearH1"
        android:layout_width="match_parent"
        android:id="@+id/linear1"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewFlashcardsEasy"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginTop="10dp"
            android:scrollbars="none">
        </androidx.recyclerview.widget.RecyclerView>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="5dp"
        android:id="@+id/linearH2"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginStart="10dp"
        android:layout_width="match_parent"
        android:layout_below="@id/linear1"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textMedium"
            android:gravity="start"
            android:textStyle="bold"
            android:textSize="20sp"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/medium_cards"/>

        <ImageView
            android:layout_marginTop="11dp"
            android:layout_marginStart="10dp"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:src="@drawable/arrow" />

    </LinearLayout>
    <LinearLayout
        android:layout_below="@id/linearH2"
        android:id="@+id/linear2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewFlashcardsMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginTop="10dp"
            android:scrollbars="none">
        </androidx.recyclerview.widget.RecyclerView>
    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="5dp"
        android:id="@+id/linearH3"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginStart="10dp"
        android:layout_width="match_parent"
        android:layout_below="@id/linear2"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textHard"
            android:gravity="start"
            android:textStyle="bold"
            android:textSize="20sp"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hard_cards"/>

        <ImageView
            android:layout_marginTop="11dp"
            android:layout_marginStart="10dp"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:src="@drawable/arrow" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear3"
        android:layout_below="@id/linearH3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewFlashcardsHard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginTop="10dp"
            android:scrollbars="none">
        </androidx.recyclerview.widget.RecyclerView>
    </LinearLayout>
</RelativeLayout>

Below is the item_image.xml created for cardview and it's elements

<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="220dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_gravity="center_horizontal"
            android:id="@+id/cardFlashCards"
            app:cardCornerRadius="25dp"
            app:cardElevation="4dp"
            >
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:orientation="vertical">
                <TextView
                    android:id="@+id/textLevel"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:text="Text1"
                    android:layout_marginStart="5dp"
                    android:textColor="@color/white"
                    android:layout_marginTop="10dp"
                    android:textStyle="bold"
                    android:textSize="18sp" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                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="20dp"
                    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" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </FrameLayout>
</androidx.core.widget.NestedScrollView>

Below is the code for fragment class

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.cardview.widget.CardView
import androidx.navigation.Navigation
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.R
import com.example.visuallithuanian.adapter.FlashcardsAdapter
import com.example.visuallithuanian.data.FlashCardInfo
import com.example.visuallithuanian.ui.activities.FirstScreen
import com.google.android.material.bottomnavigation.BottomNavigationView
import dagger.hilt.android.AndroidEntryPoint


@AndroidEntryPoint
class FlashCards : Fragment() {

    lateinit var bottomNav:BottomNavigationView

    @SuppressLint("MissingInflatedId")
    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 recyclerViewCardsEasy = view.findViewById<RecyclerView>(R.id.recyclerViewFlashcardsEasy)
        val recyclerViewCardsMedium = view.findViewById<RecyclerView>(R.id.recyclerViewFlashcardsMedium)
        val recyclerViewCardsHard = view.findViewById<RecyclerView>(R.id.recyclerViewFlashcardsHard)


        recyclerViewCardsHard.layoutManager = LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL, false)
        recyclerViewCardsMedium.layoutManager = LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL, false)
        recyclerViewCardsEasy.layoutManager = LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL, false)

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

        val flashCardList = generateFlashCards()
        val adapter = FlashcardsAdapter(flashCardList,navController)
        recyclerViewCardsHard.adapter = adapter

        val easyFlashCardsList = generateEasyFlashCards()
        val adapter1 = FlashcardsAdapter(easyFlashCardsList,navController)
        recyclerViewCardsEasy.adapter = adapter1

        val mediumFlashCardsList = generateMediumFlashCards()
        val adapter2 = FlashcardsAdapter(mediumFlashCardsList,navController)
        recyclerViewCardsMedium.adapter = adapter2



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

        return view
    }

    private fun generateMediumFlashCards(): List<FlashCardInfo> {
        return listOf(
            FlashCardInfo(R.drawable.clothing,"Clothing","Medium"),
            FlashCardInfo(R.drawable.village,"Towns and Villages","Medium"),
            FlashCardInfo(R.drawable.nature,"Nature","Medium"),



        )

    }

    private fun generateEasyFlashCards(): List<FlashCardInfo> {

        return listOf(
            FlashCardInfo(R.drawable.talking,"Daily Conversation","Easy"),
            FlashCardInfo(R.drawable.food,"Food","Easy"),
            FlashCardInfo(R.drawable.relatives,"Relatives","Easy"),
            FlashCardInfo(R.drawable.keyphrases,"Key Phrases","")

        )

    }

    private fun generateFlashCards():List<FlashCardInfo> {
        return listOf(

            FlashCardInfo(R.drawable.doctorvisit,"Questions and Pronouns","Hard"),
            FlashCardInfo(R.drawable.verbs,"Popular Verbs","Hard"),
        )

    }


}

Following is the code for Adapter class

package com.example.visuallithuanian.adapter

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.navigation.NavController
import androidx.navigation.findNavController
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.data.FlashCardInfo
import com.example.visuallithuanian.ui.activities.fragments.FlashCardsDirections


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

    inner 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.textLevel)

        val cardviewFlashcard = itemView.findViewById<CardView>(com.example.visuallithuanian.R.id.cardFlashCards)

    }

    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

        holder.cardviewFlashcard.setOnClickListener {
            val action = when(position){
                    1 ->FlashCardsDirections.actionFlashCardsToQuestionsFragment()

                else -> return@setOnClickListener
            }
            action.let {
                navController.navigate(it)
            }

        }


    }


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

So, how can I reduce the space between the horizontal scrolling cardviews?


Solution

  • If you see design of your item_image.xml, there is space on both side of your CardView

    enter image description here

    what you can try is to remove this space, so you can keep width of your NestedScrollView equal to width of CardView, i.e.220dp