skip to Main Content

My application has a lot of nested recycler views , In one of those I have a layout which holds an image and a textview like this.

enter image description here

The text view is an indicator which would disappear when the user opens that specific course.
And it would become something like this :

enter image description here

Since the indicator is present only on some of the courses , the indicator might disappear (view.gone) and appear (view.visible) on certain conditions.
This is the recyclerview code that holds these courses.

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rv_video_packs"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/margin_16dp"
                    android:clipToPadding="false"
                    android:paddingEnd="16dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rv_continue_watching" />

Notice that the recycler view is a wrap content.

When there is a case of multiple courses , some courses might not contain the new video indicator. And if those courses with no indicator is present on the screen then the recyclerview would wrap its height to only hold on to the course image , something like this.

enter image description here

but the issue is , when we scroll horizontally , some courses might contain the indicator , meaning that the recyclerview should increase its height accordingly to accommodate the indicator as well .
Instead recyclerview fails to update its height to wrap around both the view hence resulting in this incomplete view.

enter image description here

This is happening because the recyclerview was unable to update its height when scrolling hence making the view cut in half.

I have tried multiple ways to fix this like ,
Setting setHasFixedSize to false etc . But didnt seem to work

This is happening only sometimes.

The only viable solution now is to fix the recycler view height to a specific height so that it holds both the views.
But I want a more scalable and optimum solution if possible for this .

Is there any way to make recyclerview recalculate its height ?

Recyclerview Item view code.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:clickable="true"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/iv_learn_item"
        android:visibility="invisible"
        android:layout_width="134dp"
        android:layout_height="200dp"
        android:adjustViewBounds="true"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:foreground="?attr/selectableItemBackground"
        />    

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/video_update_tv_guideline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_begin="195dp"
        android:orientation="horizontal"
        />

    <TextView
        android:id="@+id/video_update_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@id/iv_learn_item"
        app:layout_constraintEnd_toEndOf="@id/iv_learn_item"
        app:layout_constraintTop_toBottomOf="@+id/video_update_tv_guideline"
        android:layout_marginStart="@dimen/dimen_11dp"
        android:layout_marginEnd="@dimen/dimen_11dp"
        style="@style/content_update_pill"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Adapter code

                rvVideoPacks.layoutManager =
                    LinearLayoutManager(itemView.context, LinearLayoutManager.HORIZONTAL, false)
                rvVideoPacks.setHasFixedSize(false)
                rvVideoPacks.itemAnimator = null
                rvVideoPacks.isNestedScrollingEnabled = true
                rvVideoPacks.adapter = videoPackAdapter

EDIT :

I have also tried to make the indicator invisible , but that just creates an extra space at the bottom , making it look bad.
I want the recyclerview to adjust its height accordingly.

2

Answers


  1. One way to fix this issue is give fix height to main ConstraintLayout if possible for your layout.

    Login or Signup to reply.
  2. Hi a way is using ConstraintLayout as parent and child will be anything u want
    like linearLayout or else

    like this.

        <androidx.constraintlayout.widget.ConstraintLayout
    
        android:id="@+id/myconstraint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    
        android:paddingStart="24dp"
        android:paddingEnd="24dp">
    
        <RelativeLayout
            android:padding="@dimen/fab_margin"
            android:id="@+id/relative"
            android:layout_width="0dp"
            android:layout_height="0dp"
    
            android:layout_marginTop="75dp"
    
            android:background="@drawable/custom_back_button"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">
    
    
        </RelativeLayout>
    
        <ImageView
            android:id="@+id/imgv_frcl_complet_elevels"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
    
            android:layout_marginTop="8dp"
            android:adjustViewBounds="true"
            android:src="@drawable/pluto_success_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    
        <TextView
    
            android:id="@+id/tv_complete_congrats"
            android:layout_width="match_parent"
    
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:gravity="center"
            android:text="@string/tv_winner_complete_levels"
            android:textColor="@color/duskYellow"
            android:textSize="26sp"
            app:layout_constraintEnd_toEndOf="@+id/relative"
            app:layout_constraintStart_toStartOf="@+id/relative"
            app:layout_constraintTop_toBottomOf="@+id/imgv_frcl_complet_elevels" />
    
        <TextView
            android:id="@+id/tv_messag_complete"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
    
            android:layout_marginTop="4dp"
            android:layout_marginEnd="24dp"
            android:gravity="center"
            android:text="Beginner Mode"
            android:textSize="22sp"
            app:layout_constraintEnd_toEndOf="@+id/relative"
            app:layout_constraintStart_toStartOf="@+id/relative"
            app:layout_constraintTop_toBottomOf="@+id/tv_complete_congrats" />
    
        <Button
            android:id="@+id/btn_complete_levels_continue"
            android:layout_width="wrap_content"
    
            android:layout_height="56dp"
    
            android:layout_marginTop="16dp"
            android:background="@drawable/mode_selection_back"
            android:padding="@dimen/padding_top"
            android:text="@string/btn_complete_continue_playing"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="@+id/relative"
            app:layout_constraintEnd_toEndOf="@+id/relative"
            app:layout_constraintStart_toStartOf="@+id/relative"
            app:layout_constraintTop_toBottomOf="@+id/tv_messag_complete" />
    
        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottie_win_levels"
            android:layout_width="0dp"
    
            android:layout_height="0dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_loop="true" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    

    Can you share the others design or where u inspired

    source https://gist.github.com/rogergcc/557f51940dd400b35893ffe5bad04e59#file-dialog_complet_levels-xml

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search