No matter what I do the pictures are not showing up.
Even if I set the items to match parent, I still have the same problem, I've been dealing with it since the morning, if I find it, I will relax very well :D
This is my adapter for viewpager 2 :
class ViewPagerAdapter ( private val context : Context , private val album_id : Int , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<ViewPagerAdapter.PagerHolder>() {
inner class PagerHolder (view : View ) : RecyclerView.ViewHolder ( view ) {
var image_view : ImageView
init {
image_view = view.findViewById ( R.id.pager_imageview )
}
}
override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : PagerHolder {
val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.viewpager_item , parent , false )
return PagerHolder ( v )
}
override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
val list = photo_list.filter { it.albumId == album_id }
for ( i in list [ position ].url ) {
Glide.with ( context ).load ( i.toString() ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
}
}
override fun getItemCount ( ) : Int {
return photo_list.size
}
}
This is my xml code for my viewpager items :
<androidx.cardview.widget.CardView 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"
app:cardCornerRadius="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pager_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
This is my recyclerview defined codes:
class AlbumRecyclerAdapter ( private val context : Context , private val album_list : ArrayList<Albums> , private val photo_list : ArrayList<Photos> ) : RecyclerView.Adapter<AlbumRecyclerAdapter.Adapterholder>() {
inner class Adapterholder(view : View) : RecyclerView.ViewHolder(view) {
var album_title : TextView
var view_pager2 : ViewPager2
init {
album_title = view.findViewById(R.id.album_title)
view_pager2 = view.findViewById ( R.id.view_pager2 )
}
}
override fun onCreateViewHolder(parent : ViewGroup, viewType : Int) : Adapterholder {
val v = LayoutInflater.from ( parent.context ).inflate ( R.layout.album_recycler_list , parent , false )
return Adapterholder(v)
}
override fun onBindViewHolder ( holder : AlbumRecyclerAdapter.Adapterholder , position : Int) {
val pager_adapter = ViewPagerAdapter ( context , album_list [ position ].id , photo_list )
holder.view_pager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL
holder.view_pager2.adapter = pager_adapter
holder.view_pager2.clipToPadding = false
holder.view_pager2.clipChildren = false
holder.view_pager2.offscreenPageLimit = 3
holder.view_pager2.getChildAt ( 0 ).overScrollMode = RecyclerView.OVER_SCROLL_NEVER
holder.album_title.text = album_list [ position ].title
}
override fun getItemCount ( ) : Int {
return album_list.size
}
}
Finally , this is my xml code for the recyclerview :
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop ="10dp"
android:layout_marginLeft ="5dp"
android:layout_marginRight="5dp"
app:cardCornerRadius="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/album_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Album Title"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I'm Java Developer so I cannot code with Kotlin but I'll show you how to show images on ViewPager.
First, remove for ( i in list [ position ].url ) from onBindViewHolder. And load direct from photo_list.get(position).getImage as below
override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
val list = photo_list.filter { it.albumId == album_id }
Glide.with ( context ).load ( photo_list.get(position).getImage // your imageModel ).diskCacheStrategy ( DiskCacheStrategy.ALL ).into ( holder.image_view )
}
Make sure to change JAVA to Kotlin in my code. If you any problem is causing, Let me know
Instead of passing the whole photo_list and then filtering it in ViewPager, pass only the filtered list to it. Because in getItemCount you are returning the size of the whole photo_list but in onBindViewHolder you're accessing the filtered list, this could lead to crashes as filtered list would be smaller than the original one.
In AlbumRecyclerAdapter's onBindViewHolder pass the filtered list to ViewPager adapter.
val pager_adapter = ViewPagerAdapter (
context ,
album_list [ position ].id ,
ArrayList(photo_list.filter { it.albumId == album_list[position].id }
)
In ViewPagerAdapter's onBindViewHolder(), why are you iterating over a url and I assume your url is a String and when you iterate over it, it loops through all the individual characters of the string, that is why you are not seeing any image in the first place.
override fun onBindViewHolder (holder : ViewPagerAdapter.PagerHolder, position : Int ) {
val photo = photo_list[position]
Glide.with ( context )
.load ( photo.url )
.diskCacheStrategy ( DiskCacheStrategy.ALL )
.into ( holder.image_view )
}
Related
I need to create this kind of grid recycler view:
Where first item is biggest than others. Grid might have only 6 items and sizes might be this one:
The first one will have width = 320 and height = 220.
Others will have width = 100 and height = 150.
My recyclerView item XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/home_items_space">
<ImageView
android:id="#+id/lookImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
My recyclerView XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="#dimen/looks_grid_height"
android:paddingHorizontal="12dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/looksGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2"
tools:itemCount="6" />
</androidx.constraintlayout.widget.ConstraintLayout>
My Adapter code:
class LooksAdapter :
ListAdapter<HomeLook, LooksAdapter.LooksViewHolder>(DiffCallback()) {
companion object {
private val FIRST_ITEM_INDEX = 0
}
var listener: ((HomeLook) -> Unit)? = null
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LooksViewHolder {
return LooksViewHolder(
ItemHomeLooksBinding.inflate(LayoutInflater.from(parent.context), parent, false)
)
}
override fun onBindViewHolder(holder: LooksViewHolder, position: Int) {
holder.bind(getItem(position), position)
}
class LooksViewHolder(private val binding: ItemHomeLooksBinding) :
RecyclerView.ViewHolder(binding.root) {
fun bind(look: HomeLook, index: Int) {
if (index == FIRST_ITEM_INDEX) {
binding.root.updateLayoutParams {
width = binding.root.width / 2
height = 310
}
} else {
binding.root.updateLayoutParams {
width = 100
height = 150
}
}
binding.lookImage.load(look.lookImage) {
fallback(R.drawable.ic_camera_placeholder)
error(R.drawable.ic_camera_placeholder)
}
}
}
My ViewHolder code:
class LooksHomeViewHolder(
val binding: LooksGridViewBinding
) : RecyclerView.ViewHolder(binding.root) {
companion object {
fun from(parent: ViewGroup): LooksHomeViewHolder {
return LooksHomeViewHolder(
LooksGridViewBinding.inflate(LayoutInflater.from(parent.context), parent, false),
)
}
}
private val adapter = LooksAdapter().apply {
stateRestorationPolicy = RecyclerView.Adapter.StateRestorationPolicy.PREVENT_WHEN_EMPTY
}
init {
binding.looksGrid.adapter = adapter
binding.looksGrid.itemAnimator = DefaultItemAnimator().apply {
supportsChangeAnimations = false
}
}
fun bind(
lookBookEntry: HomeEntity.LookBookEntry,
listener: (HomeLook) -> Unit,
addPhotoListener: () -> Unit
) {
adapter.submitList(lookBookEntry.looks)
adapter.listener = listener
binding.addLookButton.setOnClickListener { addPhotoListener.invoke() }
binding.noLooksPlaceholder.isVisible = lookBookEntry.looks.isEmpty()
}
}
I tried to use StaggerManager and change imageView and root size. But it isn't help.
Basically you need to use StaggeredLayoutManager to achieve this output . You can check below mentioned links
example :-
https://www.geeksforgeeks.org/recyclerview-as-staggered-grid-in-android-with-example/
documentation :-
https://developer.android.com/reference/androidx/recyclerview/widget/StaggeredGridLayoutManager
What I want to do:
My idea is simple:
I have RecyclerView in RelativeLayout
When data loaded I set first item's text to TextView for pinned message
On scroll I take first visible item and set this item's text to header (TextView)
So I have:
RelativeLayout + RecyclerView + TextView for pinned message + TextView for header
I update header on scroll, it looks like sticky header for list.
It is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/pin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ebebeb"
android:gravity="center"
android:padding="24dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/pin"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/list"
android:layout_alignEnd="#id/list"
android:background="#33ff0000"
android:gravity="center"
android:padding="24dp"/>
</RelativeLayout>
And it is my Activity:
class CustomAdapter() :
RecyclerView.Adapter<CustomAdapter.ViewHolder>() {
var data: List<UUID> = listOf()
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val textView: TextView
init {
textView = view.findViewById(R.id.text)
}
}
override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(viewGroup.context)
.inflate(R.layout.list_item, viewGroup, false)
return ViewHolder(view)
}
override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
viewHolder.textView.text = data[position].toString()
}
override fun getItemCount() = data.size
}
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val adapter = CustomAdapter()
val header = findViewById<TextView>(R.id.header)
findViewById<RecyclerView>(R.id.list).apply {
this.adapter = adapter
layoutManager = LinearLayoutManager(this#MainActivity, LinearLayoutManager.VERTICAL, false)
addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
val position = recyclerView.topChildPosition() ?: return
if (position >= 0) {
header.text = adapter.data[position].toString().substring(0, 10)
Log.w("MainActivity", header.text.toString())
} else {
header.text = null
}
}
})
}
/**
* SIMULATE DATA LOADING
*/
Handler(Looper.getMainLooper()).postDelayed({
adapter.data = List(100) {
UUID.randomUUID()
}
findViewById<TextView>(R.id.pin).text = adapter.data[0].toString()
adapter.notifyDataSetChanged()
}, 1000L)
}
private fun RecyclerView.topChildPosition(): Int? {
layoutManager.let { layoutManager ->
if (layoutManager != null && layoutManager is LinearLayoutManager) {
return if (!layoutManager.reverseLayout) layoutManager.findFirstVisibleItemPosition()
else layoutManager.findLastVisibleItemPosition()
} else {
val topChild: View = getChildAt(0) ?: return null
return getChildAdapterPosition(topChild)
}
}
}
}
And what I have:
RelativeLayout measured views, header has text = null, so header's width = padding only
Data loaded (see "SIMULATE DATA LOADING" in the activity code), I call notifyDataSetChanged and I set text to header. Header (TextView) calls requestLayout() on set text, but RelativeLayout doesn't measured new width (actually, RelativeLayout calls header's onMeasure with widthMode == MeasureSpec.EXACTLY and pass old width)
When I scroll RecyclerView header remeasured successfully.
I can reproduce it on Android 26-33
What I can do with this.
I can change layout:
from this:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/list"
android:layout_alignEnd="#id/list"
android:background="#33ff0000"
android:gravity="center"
android:padding="24dp"/>
to this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="#id/list"
android:layout_alignEnd="#id/list">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#33ff0000"
android:gravity="center"
android:padding="24dp"/>
</FrameLayout>
But actually I can't, because really my TextView in custom view extends from TextView and it is part of library. I don't know how it will be used in layouts.
I can call requestLayout() after data loading like this:
adapter.notifyDataSetChanged()
header.doOnNextLayout { header.post { header.requestLayout() } }
But it is ugly.
So, finally my questions:
Do you know how to fix it without layout changing?
Do you know bug or some documented RelativeLayout behavior
Thanks for any help!
As part of my RecyclerView, I was expecting a row of letters to appear underneath it but for some reason the row is not appearing despite setting the properties to show it on screen.
Kotlin activity
class MainActivity : AppCompatActivity() {
private lateinit var adapterFruit: AdapterFruit
private lateinit var adapterAlphabet: AdapterAlphabet
private val arrayItemsFruit = ArrayList<ItemFruit>()
private val arrayItemsBtns = ArrayList<ItemAlphabet>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val mToolbar = findViewById<Toolbar>(R.id.myToolbar)
val mRecyclerViewV = findViewById<RecyclerView>(R.id.mRecyclerViewWithToolbarV)
val mRecyclerViewH = findViewById<RecyclerView>(R.id.mRecyclerViewWithToolbarH)
// ...Do other stuff here
setSupportActionBar(mToolbar)
val mTitle = findViewById<TextView>(R.id.myToolbar_title)
mTitle.text = getString(R.string.fruit)
// Alphabet array
arrayItemsBtns.add(ItemAlphabet("A"))
arrayItemsBtns.add(ItemAlphabet("B"))
arrayItemsBtns.add(ItemAlphabet("C"))
arrayItemsBtns.add(ItemAlphabet("D"))
arrayItemsBtns.add(ItemAlphabet("F"))
arrayItemsBtns.add(ItemAlphabet("G"))
arrayItemsBtns.add(ItemAlphabet("K"))
arrayItemsBtns.add(ItemAlphabet("L"))
arrayItemsBtns.add(ItemAlphabet("M"))
arrayItemsBtns.add(ItemAlphabet("O"))
arrayItemsBtns.add(ItemAlphabet("P"))
arrayItemsBtns.add(ItemAlphabet("Q"))
arrayItemsBtns.add(ItemAlphabet("R"))
arrayItemsBtns.add(ItemAlphabet("S"))
arrayItemsBtns.add(ItemAlphabet("T"))
arrayItemsBtns.add(ItemAlphabet("W"))
// Fruit array items
arrayItemsFruit.add(
ItemFruit(
getString(R.string.apple)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.blackberry)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.cherry)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.date)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.fig)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.grapefruit)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.kiwi)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.lemon)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.mango)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.pineapple)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.quince)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.raspberry)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.strawberry)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.tomato)
)
)
arrayItemsFruit.add(
ItemFruit(
getString(R.string.watermelon)
)
)
// Set Vertical RecyclerView
val isScreenSmall = resources.getBoolean(R.bool.isScreenSmall)
if (isScreenSmall) {
// Use special item decoration for small devices
mRecyclerViewV.layoutManager =
LinearLayoutManager(this)
val mListener = AdapterView.OnItemClickListener { _, _, _, _ -> }
adapterFruit = AdapterFruit(arrayItemsFruit, mListener)
mRecyclerViewV.addItemDecoration(
androidx.recyclerview.widget.DividerItemDecoration(
this,
LinearLayout.VERTICAL
)
)
mRecyclerViewV.adapter = adapterFruit
}
else {
// Use special item decoration for large devices
val numberOfColumns = 2
mRecyclerViewV.layoutManager =
androidx.recyclerview.widget.GridLayoutManager(this, numberOfColumns)
val mListener = AdapterView.OnItemClickListener { _, _, _, _ -> }
adapterFruit = AdapterFruit(arrayItemsFruit, mListener)
mRecyclerViewV.adapter = adapterFruit
}
// Set Horizontal RecyclerView
mRecyclerViewH.layoutManager = LinearLayoutManager(this,
RecyclerView.HORIZONTAL,
false)
val mListener = AdapterView.OnItemClickListener { _, _, _, _ -> }
adapterAlphabet = AdapterAlphabet(arrayItemsBtns, mListener)
mRecyclerViewH.adapter = adapterAlphabet
}
}
Main layout
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_activityToolbarAndRecyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/my_toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/mRecyclerViewWithToolbarV"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myToolbar"
app:layout_constraintBottom_toTopOf="#+id/mRecyclerViewWithToolbarH"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/mRecyclerViewWithToolbarH"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mRecyclerViewWithToolbarV"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Button layout
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:gravity="start|center_vertical"
android:padding="20dp"
android:layout_margin="20dp"
android:textAllCaps="false"
android:textColor="?android:attr/textColorPrimary"
android:textSize="22sp"
app:strokeColor="?android:attr/textColorPrimary"
style="#style/Widget.MaterialComponents.Button.OutlinedButton" />
ItemAlphabet
data class ItemAlphabet(
val alphabetLetter: String
)
Alphabet index adapter
class AdapterAlphabet(
var listAlphabet: MutableList<ItemAlphabet>,
private val clickListener: AdapterView.OnItemClickListener
) : RecyclerView.Adapter<AdapterAlphabet.CompanyViewHolder>() {
class CompanyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var btnAlphabet: MaterialButton = itemView.findViewById(R.id.myBtn)
fun bind(alphabet: ItemAlphabet)
{
// Binding the data with the view holder views
btnAlphabet.text = alphabet.alphabetLetter
// Click events for list items (based on position)
itemView.setOnClickListener {v ->
// val intent: Intent = when (alphabet.alphabetLetter) {
// v.resources.getString(R.string.apple) -> {
//
// }
// else -> {
//// Intent
// }
// }
// itemView.context.startActivity(intent)
}
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AdapterAlphabet.CompanyViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.rv_item_btn,parent,false)
return AdapterAlphabet.CompanyViewHolder(view)
}
override fun getItemCount(): Int {
return listAlphabet.size
}
override fun onBindViewHolder(holder: CompanyViewHolder, position: Int) {
// Getting the product of the specified position
val product = listAlphabet[position]
// Binding to click listener
holder.bind(product)
}
}
Tablet result
Update
Ali Ahsan's suggestion
Based on your screenshot in the updated question, I suggest the following layout structure:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_activityToolbarAndRecyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/my_toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/mRecyclerViewWithToolbarV"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myToolbar"
app:layout_constraintBottom_toTopOf="#+id/mRecyclerViewWithToolbarH"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/mRecyclerViewWithToolbarH"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Neither the toolbar nor the bottom RecyclerView specifies constraints against the middle RecyclerView. The effect should be to pin the toolbar to the top of the screen and the bottom RecyclerView to the bottom of the screen.
(Note that it's okay to use wrap_content for the height of the bottom RV, because the "scrolling"/"recycling" axis is horizontal.)
Then, you can have the middle RecyclerView constrain all four of its edges to the parent, the toolbar, and the bottom RecyclerView. This will cause the middle RV to "stretch" to fill all remaining space on the screen.
I have implemented a simple adapter but it is causing RecyclerView not to recycler views and calls onCreateViewHolder() for every list item when scrolled. This causes jank
whenever I scroll the list. Few points listed below are not related to excessive calls of onCreateViewHolder(), but I tried them to improve scroll performance and avoid jank. Things I have tried so far:
recyclerView.setHasFixedSize(true)
recyclerView.recycledViewPool.setMaxRecycledViews(1, 10) with recyclerView.setItemViewCacheSize(10)
recyclerView.setDrawingCacheEnabled(true) with recyclerView.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH)
setting RecyclerView height to "match_parent"
Was previously using Kotlin's synthetic, now moved to Android's ViewBinding
Rewrite complex nested layouts to Constraint Layout
override onFailedToRecycleView() to see if it is called, but it was never called
Here is my adapter:
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.example.suppstore.R
import com.example.suppstore.common.Models.Brand
import com.example.suppstore.databinding.LiBrandBinding
import com.google.firebase.perf.metrics.AddTrace
class BrandsAdapter(list: ArrayList<Brand>, var listener: BrandClickListener?) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
private val VIEW_TYPE_LOADING = 0
private val VIEW_TYPE_NORMAL = 1
private var brandsList: ArrayList<Brand> = list
#AddTrace(name = "Brands - onCreateViewHolder", enabled = true)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return if (viewType == VIEW_TYPE_NORMAL) {
ViewHolder(
LiBrandBinding.inflate(
LayoutInflater.from(parent.context),
parent, false
)
)
} else {
LoaderHolder(
LayoutInflater.from(parent.context)
.inflate(R.layout.li_loader, parent, false)
)
}
}
#AddTrace(name = "Brands - onBindViewHolder", enabled = true)
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
if (holder is ViewHolder)
holder.setData(brandsList[position], listener!!)
}
class ViewHolder(itemView: LiBrandBinding) : RecyclerView.ViewHolder(itemView.root) {
private val binding: LiBrandBinding = itemView
#AddTrace(name = "Brands - ViewHolder-setData", enabled = true)
fun setData(brand: Brand, listener: BrandClickListener) {
binding.cardItem.setOnClickListener { listener.onItemClick(brand) }
binding.tvBrandName.text = brand.name
binding.tvCount.text = brand.count.toString() + " Products"
}
}
class LoaderHolder(itemView: View) : RecyclerView.ViewHolder(itemView.rootView) {
}
#AddTrace(name = "Brands - addLoader", enabled = true)
fun addLoader() {
brandsList.add(Brand())
notifyItemInserted(brandsList.size - 1)
}
#AddTrace(name = "Brands - setData", enabled = true)
fun setData(newList: ArrayList<Brand>) {
this.brandsList = newList
notifyDataSetChanged()
}
#AddTrace(name = "Brands - removeLoader", enabled = true)
fun removeLoader() {
if (brandsList.size == 0)
return
val pos = brandsList.size - 1
brandsList.removeAt(pos)
notifyItemRemoved(pos)
}
override fun getItemViewType(position: Int): Int {
return if (brandsList.get(position).count == -1) {
VIEW_TYPE_LOADING
} else
VIEW_TYPE_NORMAL
}
interface BrandClickListener {
fun onItemClick(brand: Brand)
}
override fun getItemCount(): Int {
return brandsList.size
}
}
Here is the list item (li_brand):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardItem"
android:layout_width="match_parent"
android:layout_height="85dp"
android:background="#color/app_black">
<TextView
android:id="#+id/tvBrandName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:textColor="#color/app_yellow"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tvCount"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tvCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="2dp"
android:textColor="#color/app_grey"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvBrandName" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="15dp"
android:src="#drawable/ic_baseline_arrow_forward_ios_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#color/app_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here are related functions in Fragment
class BrandsFragment : Fragment() {
private val adapter = BrandsAdapter(ArrayList(), brandClickListener())
fun brandClickListener(): BrandsAdapter.BrandClickListener {
return object : BrandsAdapter.BrandClickListener {
override fun onItemClick(brand: Brand) {
activityViewModel?.setSelectedBrand(brand)
}
}
}
fun setupRecyclerView() {
val llManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
binding.recyclerView.layoutManager = llManager
binding.recyclerView.setHasFixedSize(true)
binding.recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
if (dy > 0) { //check for scroll down
val visibleItemCount = llManager.childCount
val totalItemCount = llManager.itemCount
val firstVisibleItemPos = llManager.findFirstVisibleItemPosition()
if (loadWhenScrolled
&& visibleItemCount + firstVisibleItemPos >= totalItemCount
&& firstVisibleItemPos >= 0
) {
//ensures that last item was visible, so fetch next page
loadWhenScrolled = false
viewModel.nextPage()
}
}
}
})
binding.recyclerView.adapter = adapter
}
}
And here is the fragment xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/app_black"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".Brands.BrandsFragment">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/bottom_line_yellow"
android:theme="#style/SearchViewTheme"
app:closeIcon="#drawable/ic_baseline_close_24"
app:iconifiedByDefault="false"
app:queryBackground="#android:color/transparent"
app:queryHint="Atleast 3 characters to search"
app:searchIcon="#drawable/ic_baseline_search_24" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Have you tried RecyclerView Diffutil class? Hope it will resolve smooth scrolling issue and overwhelm recreation of items.
https://developer.android.com/reference/androidx/recyclerview/widget/DiffUtil
"DiffUtil is a utility class that calculates the difference between two lists and outputs a list of update operations that converts the first list into the second one."
I was trying to make a custom RecyclerView with Adapter which takes a HashMap as parameter, I succeeded but now only 1 item is showing in recyclerView list and I have no idea why.
Here my code snippet:
Custom RecyclerAdapter:
class ProductsRecyclerAdapter(private val dataSet: HashMap<Int, ProductEntry>) : RecyclerView.Adapter<ProductsRecyclerAdapter.ViewHolder>() {
class ViewHolder(val linearLay: LinearLayout) : RecyclerView.ViewHolder(linearLay)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) : ProductsRecyclerAdapter.ViewHolder {
val linearLay = LayoutInflater.from(parent.context).inflate(R.layout.test_text_view, parent, false) as LinearLayout
return ViewHolder(linearLay)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.linearLay.textView.text = dataSet[position]?.pName
holder.linearLay.textView2.text = dataSet[position]?.pExpiry
}
override fun getItemCount(): Int {
return dataSet.size
}
}
Initialization:
// Setup RecyclerView
val prod1 = ProductEntry("Milk", "04/06/1996")
val prod2 = ProductEntry("Bread", "04/01/2012")
val testArray : HashMap<Int, ProductEntry> = hashMapOf(1 to prod1, 2 to prod2)
viewManager = LinearLayoutManager(this)
viewAdapter = ProductsRecyclerAdapter(testArray)
recyclerView = findViewById<RecyclerView>(R.id.productsRecyclerView).apply {
setHasFixedSize(true)
layoutManager = viewManager
adapter = viewAdapter
}
And finally, custom XML for row:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_weight="1"
android:text="TextView" />
Despite everything seems to be OK, I get only 1 row showing "milk".
Thanks for all help!
position in override fun onBindViewHolder(holder: ViewHolder, position: Int) starts at index 0.
So in your case, it will be [0, 1] and your map keys are [1, 2]. Only key "1" will be displayed correctly.
try:
val testArray : HashMap<Int, ProductEntry> = hashMapOf(0 to prod1, 1 to prod2)
But no need to use a map here! Just use a simple list of ProductEntry.