Xamarin.Android – Automatic Grid Height

We all use usually grids in our apps. But it doesn’t matter how it appears. Here now it’s not going to be about having a grid and exposing it to a page and just going to be there, but there’s more of everything on a page and you don’t want to have a certain height and be able to scroll through a small area but be as high as there are elements in it.

First step: create a Xamarin.Android Project.

Instead of the ListView, we have to impleemnt a custom GridView: ExpandableHeightGridView. I created a Components folder in my project and in this filder I created this implementation:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace Droid.Components
{
    public class ExpandableHeightGridView : GridView
    {
        bool expanded = false;

        public ExpandableHeightGridView(Context context) : base(context)
        {
        }

        protected ExpandableHeightGridView(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
        {
        }

        public ExpandableHeightGridView(Context context, IAttributeSet attrs) : base(context, attrs)
        {
        }

        public ExpandableHeightGridView(Context context, IAttributeSet attrs, int defStyleAttr) : base(context, attrs, defStyleAttr)
        {
        }

        public ExpandableHeightGridView(Context context, IAttributeSet attrs, int defStyleAttr, int defStyleRes) : base(context, attrs, defStyleAttr, defStyleRes)
        {
        }

        public bool IsExpanded()
        {
            return expanded;
        }

        protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            if (IsExpanded())
            {
                int expandSpec = MeasureSpec.MakeMeasureSpec(MeasuredSizeMask,
                        MeasureSpecMode.AtMost);
                base.OnMeasure(widthMeasureSpec, expandSpec);

                ViewGroup.LayoutParams paramss = LayoutParameters;
                paramss.Height = MeasuredHeight;
            }
            else
            {
                base.OnMeasure(widthMeasureSpec, heightMeasureSpec);

            }
        }

        public void SetExpanded(bool expanded)
        {
            this.expanded = expanded;
        }
    }
}

After this we can use this view in our layouts:

<Droid.Components.ExpandableHeightGridView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="2"
            android:layout_marginBottom="20dp"
            android:listSelector="@android:color/transparent"
            android:background="@android:color/transparent"
            android:id="@+id/someGridView"/>

We have to code in the code behind. Open your Activity.cs and Find this view and set it’s Height auto:

            ExpandableHeightGridView someGridView= (ExpandableHeightGridView)view.FindViewById(Resource.Id.someGridView);
            someGridView.Adapter = newSomeAdapter(someList);

            someGridView.SetExpanded(true);

That’s all, you GridView will automatically scale.