There is a jerk when I set visibility GONE for this button

Question

I am using android:animateLayoutChanges="true" here I am sharing my card view layout :

<?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"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:gravity="bottom"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:id="@+id/cvRegisteredPharmacy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="30dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/ivPharmacy"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_weight="0.25"
                android:background="@color/colorWhite" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="15dp">

                <TextView
                    android:id="@+id/tvPharmacyName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="Pharmacy Name"
                    android:textColor="@color/colorWhite"
                    android:textSize="16sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <RatingBar
                        android:id="@+id/rbPharmacyRating"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:numStars="5"
                        style="?android:attr/ratingBarStyleSmall"
                        android:rating="3.5"
                        android:progressTint="@color/colorPrimary"
                        android:progressBackgroundTint="@color/colorGrey" />


                <TextView
                    android:id="@+id/tvPharmacyInfo"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="5dp"
                    android:text="3.5"
                    android:textColor="@color/colorWhite"
                    android:textSize="12sp" />

                </LinearLayout>

                <TextView
                    android:id="@+id/tvPharmacyAddress"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Pharmacy Address, 1/2 Main St NW, Monteral, QC"
                    android:textColor="@color/colorWhite"
                    android:textSize="14sp" />

            </LinearLayout>

            <Button
                android:id="@+id/btnSelectPharmacy"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                android:background="@drawable/btn_bg_white"
                android:text="Select Pharmacy"
                android:textColor="@color/colorAccent"
                android:visibility="gone" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Here is the complete layout that I've made

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="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=".activities.PharmacyMapActivity">

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvPharmaciesList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"/>

</RelativeLayout>

Also, I am sharing the simple code where I am setting visibility of this button :

if (holder.btnSelectPharmacy.getVisibility() == View.VISIBLE){
                    holder.btnSelectPharmacy.setVisibility(View.GONE);
                } else {
                    holder.btnSelectPharmacy.setVisibility(View.VISIBLE);
}

I've tried many solutions so far including view animation, Object animator, Expandable layout (through library) but no luck so far! looking forward for your suggestions. I've a workaround for this to lift the card up but then I want to make my card expanded from upside exactly as like as in the above picture.

If i make it invisible it will take extra space @MartinZeitler — taha naqvi, Mar 28 '20 at 11:08
I am not quite sure if you really need the LinearLayout around the CardView. One essential point could be to add layout_gravity="bottom" to the parent layout. That was the reason why I asked for the code of the layout for the complete screen. — Julian Schweppe, Mar 28 '20 at 11:13
let me edit the question @JulianSchweppe & yes, I am using layout gravity bottom because i need this card at the bottom of the screen — taha naqvi, Mar 28 '20 at 11:52
@JulianSchweppe I've editied my post as you requested for the layout — taha naqvi, Mar 28 '20 at 12:04
I only see two times the same layout. Can you paste the XML layout with the recyclerview within? — Julian Schweppe, Mar 29 '20 at 10:19
I am sorry @JulianSchweppe. Now, I've updated my question. please check — taha naqvi, Mar 29 '20 at 13:44
You can try [Yoyo library](https://github.com/daimajia/AndroidViewAnimations). Implement the fadeOut/zoomOut anim before hiding the view. Optionally you can also [animate the view height](https://stackoverflow.com/a/32835417/8043806) from initial to zero to simulate an easy exit — Giddy Naya, Mar 30 '20 at 00:11

Martin Zeitler · Answer 1 · 2020-03-29T23:59:40.020

While using automatic layout animation on the child node, the result will be, that the parent node just snaps to layout_alignParentBottom & wrap_content once the child node is View.GONE.

Combining two animations could make it less jerky. I mean, the CardView would need it's height animated; either synchronously or once the child node is View.GONE. Actually, when animating the child node to height 0dp, this would also animate the parent node's height, since it's wrap_content; setting a static value for the height would also prevent it from snapping alike that. Also animating to View.INVISBLE and then animating it's height would prevent the parent node from snapping. Sorry for not providing a ready-made solution, but explaining why it behaves alike that and how it might work is still better than no answer.

Thanks for your answer Martin Zeitler, I know the reason but unable to resolve it. Can you answer it programmatically? — taha naqvi, Apr 13 '20 at 10:01

There is a jerk when I set visibility GONE for this button

1 Answers1