I have created a horizontal scrolling for recylerview elements to scroll left to right and vice versa like this
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?
If you see design of your item_image.xml, there is space on both side of your CardView
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