I have a RecyclerView that inflates CardView with a custom LinearLayoutManager in which scrolling is disabled. I'll always only display 2 CardView on the screen. Each CardView has a collapsed part that appears when the little arrow is clicked.
Problem: the next card is pushed down
What I need: on the top CardView, the collpased part should overlap onto the bottom Cardview. I already have an animation to expand it. On the bottom one, I want to overlap the picture onto the top CardView. Also, the other none visible CardViews should never appear in the process. How do I achieve that?
Here is my CardView:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
card_view:cardElevation="8dp"
card_view:cardCornerRadius="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--*************visible part****************************-->
<ImageView
android:id="@+id/clash_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
card_view:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintBottom_toTopOf="@id/tv1"
android:src="@drawable/image_placeholder" card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtag1"
android:id="@+id/tv1"
card_view:layout_constraintTop_toBottomOf="@+id/clash_image"
card_view:layout_constraintStart_toStartOf="parent"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtag1"
android:id="@+id/tv2"
card_view:layout_constraintStart_toEndOf="@+id/tv1"
card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtag1"
android:id="@+id/tv3"
card_view:layout_constraintStart_toEndOf="@+id/tv2"
card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>
<ImageView
android:id="@+id/expand"
android:src="@drawable/ic_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>
<!--*****************invisible part to expand on click****************************-->
<RelativeLayout
android:id="@+id/rlCollapsingPart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:layout_constraintTop_toBottomOf="@+id/expand"
card_view:layout_constraintStart_toStartOf="parent"
android:visibility="gone">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/avatarThumbnail"
style="@style/icon"
android:src="@drawable/defaultavatar"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"/>
<TextView
android:id="@+id/username_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="willsmith"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_toEndOf="@+id/avatarThumbnail"
/>
<TextView
android:id="@+id/caption_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:textColor="@color/black"
android:layout_alignParentStart="true"
android:layout_below="@+id/avatarThumbnail"
tools:text="willsmith This is a caption for the post. It's actually a very long caption."/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/caption_text"
android:background="@color/grey">
<ImageView
android:id="@+id/like_image"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_home"
android:layout_alignParentStart="true"/>
<ImageView
android:id="@+id/comment_image"
card_view:layout_constraintStart_toEndOf="@id/like_image"
card_view:layout_constraintTop_toTopOf="@id/like_image"
card_view:layout_constraintBottom_toBottomOf="@id/like_image"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_home"
android:layout_toEndOf="@+id/like_image"/>
<ImageView
android:id="@+id/share_image"
android:layout_toEndOf="@+id/comment_image"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_home"/>
<ImageView
android:id="@+id/more_image"
style="@style/icon"
android:src="@drawable/ic_home"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
EDIT
I expand the hidden part using a basic on click listener in my adapter and an anim. Adapter.kt
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
...
holder.view.expand.setOnClickListener(View.OnClickListener {
val slideDown = AnimationUtils.loadAnimation(context, R.anim.card_expand_animator)
//toggling visibility
if(holder.view.rlCollapsingPart.visibility == View.VISIBLE) {
holder.view.rlCollapsingPart.visibility = View.GONE
}else{
holder.view.rlCollapsingPart.startAnimation(slideDown)
holder.view.rlCollapsingPart.visibility = View.VISIBLE
}
})
}
MyAnim.xml (in anim folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0"/>
</set>
