Create custom dialog with Grid of buttons

Question

I am trying to add a custom dialog with custom buttons, is this possible? If so, how can we do it?

Answer 1

It certainly is possible. Take a look at GridView you will need to create a custom Adapter to load Images and titles for each of the items in the grid.

I would go something like this about this.

Create a simple class for holding information about each item in the Grid. Let us call it GridItem.

public class GridItem
{
    public string Title { get; set; }
    public int ImageResourceId { get; set; }
    public Action ClickAction { get; set; }
}

Title is the title under the Image, ImageResoruceId is the Resource Drawable ID in your project, i.e.: Resource.Drawable.googleplus and ClickAction is the Action to do when the item is clicked.

Now create a Layout for the items in the Grid. grid_item.axml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/grid_item_title"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_centerHorizontal="true" />
    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_above="@+id/grid_item_title"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />
</RelativeLayout>

Now a custom Adapter, GridAdapter.

public class GridAdapter : BaseAdapter<GridItem>
{
    private readonly IList<GridItem> _items;
    private readonly Context _context;

    public GridAdapter(Context context, IList<GridItem> items)
    {
        _context = context;
        _items = items;
    }

    public override long GetItemId(int position)
    {
        return position;
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        var item = _items[position];
        var view = convertView;
        if (view == null)
        {
            var inflater = LayoutInflater.FromContext(_context);
            view = inflater.Inflate(Resource.Layout.grid_item, parent, false);
            view.Clickable = true;
            view.Click += (s, a) => item.ClickAction.Invoke();
        }

        var image = view.FindViewById<ImageView>(Resource.Id.grid_item_image);
        var title = view.FindViewById<TextView>(Resource.Id.grid_item_title);

        title.Text = item.Title;
        image.SetImageResource(item.ImageResourceId);

        return view;
    }

    public override int Count
    {
        get { return _items.Count; }
    }

    public override GridItem this[int position]
    {
        get { return _items[position]; }
    }
}

And a Layout for the GridView itself, CustomGridViewDialog.axml.

<GridView
  android:id="@+id/gridview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:numColumns="2"
  android:verticalSpacing="10dp"
  android:horizontalSpacing="10dp"
  android:stretchMode="columnWidth"
  android:gravity="center"/>

Then when creating your Dialog you would have code somewhat like this:

var customView = LayoutInflater.Inflate (Resource.Layout.CustomGridViewDialog, null);
var items = new List<GridItem>
{
    new GridItem
    {
        Title = "Google",
        ItemResourceId = Resource.Drawable.google,
        ClickAction = () => { Google(); }
    },
    ...
};
(customView.FindViewById<GridView>(Resource.Id.gridview)).Adapter = new GridAdapter(this, items);

var builder = new AlertDialog.Builder(this);
builder.SetTitle("Share");
builder.SetView(customView);

And that should be it.