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 
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
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
- 2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs...-react native
- Paging 3 initial loading not shown
- "Update dataspace" message on Android Studio console
- how to fix unresolved reference lifecycleScope?
- Android ScrollView not scrolling by no means
- Emulator appearing offline on M1 Mac after the last update of arm64-v8a
- R8 says type is defined multiple times: in build\.transforms and in build\tmp\kotlin-classes
- How to set contentPadding like LazyColumn for Column with verticalScroll in Jetpack Compose?
- Security alert: App contains embedded private keys or keystore files
- getSupportActionBar().setTitle() vs toolbar.setTitle()
- Edge lighting notification in kotlin
- How do I "shake" an Android device within the Android emulator to bring up the dev menu to debug my React Native app
- Failed to find Platform SDK with path: platforms;android-35
- Gradle Failure A problem occurred evaluating project ':app' after update android Studio
- How to create Splash Screen for React native project
- Efficient Ways To Display Messages In RecyclerView
- how to draw a square with stroke and neon glow with Jetpack Compose Canvas?
- Webview in android able to run php
- Jetpack Compose Text hyperlink some section of the text
- Navigator.pop won't close the simpledialog in flutter
- How to change the color of a button?
- An App that counts the number of spoken words by using Speech Recognition
- Best practice for conditionally positioning a view based on available height with vertical scroll in Compose
- Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15
- 'gradlew' is not recognized as an internal or external command error in Android Studio terminal
- WorkManager not repeating the PeriodicWorkRequest
- TopAppBar with scrollBehavior glitching with HorizontalPager
- Multi-module Jetpack Compose UI Previews
- This version of the application is not configured for billing through Google Play
- Deep links doesnt work when coming from the same website