Creating A Sliding Animation When Using layout_rowWeight

Question

I want to "slide" a GridLayout out of view (shrink the height to 0 & clip the edge until it has a height of 0). I currently have the following GridLayout:

<GridLayout android:id="@+id/grdPlaces"  
	android:layout_width="match_parent" android:layout_height="0dp" android:layout_rowWeight="1"  
	android:layout_column="0" android:layout_row="0" android:layout_columnSpan="2" android:layout_rowSpan="3"  
	android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:columnCount="1" android:rowCount="2"  
	android:background="@color/Gray">  
	<TextView style="@style/PopupHeaderTextViewStyle" android:text="Current Winners"/>  
	<androidx.recyclerview.widget.RecyclerView android:background="@color/Yellow" android:id="@+id/rvPlaces"  
		android:layout_width="match_parent" android:layout_height="0dp" android:layout_row="1" android:layout_rowWeight="1"  
		android:layout_margin="0dp" android:padding="0dp" android:scrollbars="none"/>  
</GridLayout>  

This gives me the following:

However, you will notice that my GridLayout uses android:layout_height="0dp" & android:layout_rowWeight="1" rather than a fixed height. Therefore, I am not sure what to use as the start value for the height & the end value for translation. I also thought about using android:layout_marginTop, but it still requires me to know the end value. How can I do this when the height is dynamically determined using layout_rowWeight?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

Now visibility change animations should be done via Transition API which available in support (androidx) package. Just call TransitionManager.beginDelayedTransition method with Slide transition then change visibility of the view.

I made a simple demo, you can refer to it:

using Android.App;  
using Android.OS;  
using Android.Runtime;  
using Android.Views;  
using Android.Widget;  
using AndroidX.AppCompat.App;  
using AndroidX.Transitions;  

Button mPlayBtn;  
bool flag = false;  
protected override void OnCreate(Bundle savedInstanceState)  
{  
    base.OnCreate(savedInstanceState);  
    Xamarin.Essentials.Platform.Init(this, savedInstanceState);  
    // Set our view from the "main" layout resource  
    SetContentView(Resource.Layout.activity_main);  
  
    mPlayBtn = FindViewById<Button>(Resource.Id.playBtn);  
    mPlayBtn.Click += MPlayBtn_Click;  
}  
private void MPlayBtn_Click(object sender, System.EventArgs e)  
{  
    toggle(flag);  
}  
  
private void toggle(bool show)  
{  
    LinearLayout redLayout = FindViewById<LinearLayout>(Resource.Id.redLayout);  
    ViewGroup parent = FindViewById<LinearLayout>(Resource.Id.parent);  
  
    Transition transition = new Slide((int)GravityFlags.Top);  
    transition.SetDuration(600);  
    transition.AddTarget(Resource.Id.redLayout);  
  
    TransitionManager.BeginDelayedTransition(parent, transition);  
    redLayout.Visibility = show ? ViewStates.Visible : ViewStates.Gone;  
  
    flag = !flag;  
}  

The layout is:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:id="@+id/parent"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    <GridLayout android:id="@+id/grdPlaces"  
     android:layout_width="match_parent"  android:layout_rowWeight="1" android:layout_height="wrap_content"  
     android:layout_column="0" android:layout_row="0" android:layout_columnSpan="2" android:layout_rowSpan="3"  
     android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:columnCount="1" android:rowCount="2"  
     android:background="@android:color/darker_gray">  
        <TextView  android:text="Current Winners"   
             android:layout_height="wrap_content" android:layout_width="match_parent"  
              
            />  
       <LinearLayout android:orientation="vertical"  
        android:id="@+id/redLayout"  
        android:layout_width="match_parent"  
        android:layout_height="400dp"  
        android:background="#5f00"  
        android:layout_alignParentBottom="true" />  
 </GridLayout>  
  
  
    <Button  
        android:id="@+id/playBtn"  
        android:text="play"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"/>  
  
</LinearLayout>  

And there is a similar thread, you can check it :https://stackoverflow.com/questions/19765938/show-and-hide-a-view-with-a-slide-up-down-animation .

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.