Recyclerview multiple viewtype causes first row item expanded unexpectedly - android-recyclerview

I want to make something like this
so I am using a recyclerview which has two viewtype ( for the first item I am using one kind of viewholder and rest of item I am using another viewholder).
But on my device, it is showing like this
For the first viewholder I am using this layout file
<LinearLayout 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">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/attach_circle_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/attach_photo"
app:civ_border_color="#607D8A"
app:civ_border_width="1dp"
android:layout_marginLeft="14dp"
android:layout_marginBottom="14dp"/>
and for others, I am using this layout file
<android.support.v7.widget.CardView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="14dp"
android:layout_marginBottom="14dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="10dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/gallary_iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/white_bg_iv"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/pic_photo_number_bg"
app:layout_constraintBottom_toBottomOf="#+id/gallary_iv"
app:layout_constraintEnd_toEndOf="#+id/gallary_iv"
app:layout_constraintStart_toStartOf="#+id/gallary_iv"
app:layout_constraintTop_toTopOf="#+id/gallary_iv" />
<TextView
android:id="#+id/pic_count_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="16sp"
android:textColor="#506876"
app:layout_constraintTop_toTopOf="#+id/white_bg_iv"
app:layout_constraintBottom_toBottomOf="#+id/white_bg_iv"
app:layout_constraintStart_toStartOf="#+id/white_bg_iv"
app:layout_constraintEnd_toEndOf="#id/white_bg_iv"/>
</android.support.constraint.ConstraintLayout>
In the first-row pictures height is expanded unexpectedly, how can I solve this problem?

set the first viewholder layout
android:layout_width="match_parent"
android:layout_height="match_parent"
change to
android:layout_width="90dp"
android:layout_height="90dp"

Related

Accessibility talk-back skips some of the items in staggered RecyclerView

Accessibility talkback skipping some of the items in RecyclerView with the Staggered layout manager.
Steps to reproduce the issue:
Run the project on any device (Verified in Samsung s10)
Enable Accessibility talkback in the device. Settings->Accessibility->Screen Reader->Voice Assistant
Do forward accessibility on the recycler view
Observe Some of the items are skipped
Recycler layout file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:importantForAccessibility="no"
android:orientation="horizontal">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/page_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:nestedScrollingEnabled="true"
app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
Recycler Layout file:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:orientation="vertical">
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textAppearance="#style/TextAppearance.Material3.TitleMedium" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/item_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitCenter" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Find Screenshot here:
https://i.stack.imgur.com/yUEFp.jpg
Sample project and screen record available here:
https://issuetracker.google.com/issues/255525862

Hopefully a simple Kotlin regarding looping through a recycler

I have a recycler in my activity for acrostic poetry. The recycler displays an image of the letters of the word (Stone Age, in this case) and an EditText to enter the acrostic words. What I want to do is read the words that have been entered, so for "Stone Age" I'm creating 8 items in the recycler.
In order to get the words, I have tried to replicate the steps in this question How to iterate over RecyclerView items. I think I'm close, but I can't quite get over the line.
I have this function where I am trying to read the values (at this stage just into the logcat)
I figured that getChildCount returned the items, but this is logging 2 (or sometimes, oddly, 3) rather than the 8 I would expect, so I'm struggling to understand what I am looping.
private fun saveTask() {
var p: String = ""
Log.d(HWG.TAG, "Children: ${acrosticRecycler.getChildCount().toString()}")
for (i in 0 until acrosticRecycler.getChildCount()) {
var holder: AcrosticAdapter.ViewHolder
if(acrosticRecycler.findViewHolderForAdapterPosition(i) != null) {
holder = acrosticRecycler.findViewHolderForAdapterPosition(i) as AcrosticAdapter.ViewHolder
p = holder.txtWord.text.toString()
Log.d(HWG.TAG, "Word: ${p}")
}
}
}
This is the layout of the recycler
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="4dp"
app:cardCornerRadius="4dp"
app:cardElevation="6dp">
<LinearLayout
android:id="#+id/llTaskList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/imgLetter"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="centerCrop"
app:srcCompat="#drawable/icons8_s" />
<EditText
android:id="#+id/txtWord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:hint="Stone Age"
android:textAllCaps="true"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
This is the activity in which the recycler sits
<?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="match_parent"
android:background="#color/background"
tools:context=".TextualTask">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:background="#color/background"
app:cardCornerRadius="4dp"
app:cardElevation="6dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="24dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/subjectImage"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="centerCrop"
app:srcCompat="#drawable/icons8_knowledge_sharing_80" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp"
android:layout_marginLeft="15dp"
android:text="Acrostic Poem"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_margin="6dp"
android:background="?android:attr/listDivider" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/txtPreamble"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="15dp"
android:text="Preamble text"
android:textAlignment="center"
android:textSize="14sp"
android:textStyle="bold|italic" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:id="#+id/crdWord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="24dp"
app:cardBackgroundColor="#color/cardback"
app:cardCornerRadius="4dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<Button
android:id="#+id/btnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:backgroundTint="#color/start"
android:text="Submit" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/acrosticRecycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:itemCount="5"
tools:listitem="#layout/acrostic_task" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Oddly enough, sometime the for loop gets the values from items 0-2, but sometimes it doesn't. The call to saveTask is made from btnSubmit as I don't need to get the values at the point the user enters them, just when they're happy to submit.
Could someone point me in the right direction please?
You can't get the correct count from acrosticRecycler.getChildCount().
because acrosticRecycler.getChildCount() will return the count of currently showed item in the RecyclerView. So even if your data is 8, but the showed data in the screen is only 3 items. So you will always get 3 not 8.
It's not good practice to get the data from the ViewHolder in recycler view directly. You should get the data from the list you have inserted to recycler view adapter.
for example, you can create adapter like this :
class AcrosticAdapter(var listData: ArrayList<AcrosticPoetry>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun getItemCount(): Int = listData.size
}
//assuming this is your model class
class AcrosticPoetry() {
var textWord = ""
}
and you can change your code to
private fun saveTask() {
val adapter = acrosticRecycler.adapter as AcrosticAdapter
val data = adapter.listData
for (i in 0 until data.size) {
val word = data[i].txtWord
Log.d(HWG.TAG, "Word: ${word}")
}
}

Scrolling a viewpager header above the recyclerview not working

I tried two ways to scroll a viewpager header above a recyclerView. The id of the layout is android:id="#+id/rel_promotions_parent" with the viewPager to be scrolled.
Using CoordinatorLayout where the viewpager root layout having app:layout_scrollFlags="scroll|exitUntilCollapsed" and recyclerView with app:layout_behavior="#string/appbar_scrolling_view_behavior"
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:background="#color/white_one"
android:fitsSystemWindows="true"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<RelativeLayout
android:id="#+id/rel_promotions_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<com.loopingviewpager.LoopingViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:autoScroll="true"
app:isInfinite="true"
app:scrollInterval="2000"
/>
<com.loopingviewpager.indicator.CustomShapePagerIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/viewpager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_5sdp"
android:visibility="visible"
app:indicator_spacing="4dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:clipToPadding="false"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:paddingBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Using motionLayout as an example in the link https://medium.com/#alex.gabor applying the constrainSet to the layout android:id="#+id/rel_promotions_parent"
<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"
android:background="#color/white_one"
>
<androidx.constraintlayout.motion.widget.MotionLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/scrollable_header_above_recycler_view_scene"
>
<RelativeLayout
android:id="#+id/rel_promotions_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<com.loopingviewpager.LoopingViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:autoScroll="true"
app:isInfinite="true"
app:scrollInterval="2000"
/>
<com.loopingviewpager.indicator.CustomShapePagerIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/viewpager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_5sdp"
android:visibility="visible"
app:indicator_spacing="4dp"
/>
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:clipToPadding="false"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:paddingBottom="10dp"
app:layout_constraintTop_toBottomOf="#id/rel_promotions_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
</RelativeLayout>
In both the cases only the recyclerView is scrolling, and the viewPager is laying still. If we try to touch and drag the viewpager it will scroll, but not with the help of the recyclerView.
Does anyone knows how to scroll a viewpager header above a recyclerView..?
NestedScrollView was not able to catch the scroll change when recyclerView is placed inside. So while pagination is implemented a lot of memory space is allocated and scrolling is pretty lag. The solution I did is to incorporate the header inside the recyclerView as the first element and then removed the nestedsrollview. Also I implemented the diffUtil class callback for the recyclerview also which did a lot of work for me.
Hope it helps for anyone.

Put a button at the end of a recyclerview with swiperefreshlayout

i want to to put a button at the end of a scrollview, i know that i can achieve this if i modify my adapter but i don't want to do it in that way because i think there's an easier way. So i tried modifying my layout like this:
<!-- Not important stuff -->
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refreshIndicatorCoins"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvCoinsFull"
android:clickable="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
This works almost perfect but swipeRefresh's animation freezes
Hope it helps.
After RecyclerView put this code.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>

android, how to place a scroll view in the middle of the screen:

I'm trying to create a a screen layout of the following though:
A line with some TextView in it
A scroll view where the user actions will add or remove View from
A buttons line.
I have no problem with 1. or 3. But 2. gives me troubles. My scheme is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainX"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/labels"
android:layout_weight="1">
<!--Some text view of various sizes -->
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dataScroll">
<LinearLayout
android:id="#+id/dataShow"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/buttons"
android:layout_weight="1">
<!--some buttons-->
</LinearLayout>
</LinearLayout>
When I run the program, the buttons line is in the middle of the screen and When I add element to the screen (using the addView on the dataShow layout), the frist one is added without a problem but after that I can't tell what is happening.
Thanks
I'm not exactly sure what you are trying to do.
It seems like you want to dynamically add items to the dataShow layout. Instead of using a ScrollView containing a LinearLayout, you should be using a ListView (vertical scrolling) or Gallery (horizontal scrolling) for your dataShow layout. This will provide the scroll functionality and allow you to add items dynamically to the list/gallery.
Try using a RelativeLayout, then align the header at the top, and the footer at the bottom. Set the ScrollView paddingBottom.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="text"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/header"
android:layout_above="#+id/footer"
android:paddingBottom="100dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="center main content"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
</ScrollView>
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimary"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</RelativeLayout>