Share via


Xamarin Android: Customizing a ListView with the button

As below picture, the article is how to use these classes and special buttons to display a ListView:

  • Count – To tell the control how many rows are in the data.
  • GetView – To return a View for each row, populated with data. This method has a parameter for ListViewto pass in an existing, unused row for re-use.
  • GetItemId – Return a row identifier (typically the row number, although it can be any long value that you like).
  • this[int] indexer – To return the data associated with a particular row number.

The example code in MainActivity.cs:

public class AccountAndPaymentActivity : Activity
    {
        List<ViewCollection> viewCollection = new List<ViewCollection>();
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
 
            SetContentView(Resource.Layout.AccountAndPaymentLayout);
 
            Toolbar mToolbar = FindViewById<Toolbar>(Resource.Id.accountToolbar);
            mToolbar.Title="Account And Payment";
            SetActionBar(mToolbar);
 
            loaddata();
            ListView lst = FindViewById<ListView>(Resource.Id.lstAccountAndPayment);
 
            lst.Adapter = new ListviewPayment(this, viewCollection);
 
            ActionBar.SetDisplayHomeAsUpEnabled(true);
            // Create your application here
        }  
private void loaddata()
        {
            viewCollection.Add(new ViewCollection {title="Name",subtitle="Jone Lee" });
            viewCollection.Add(new ViewCollection { title = "Email", subtitle = "Jonelee@yahoo.com" });
            viewCollection.Add(new ViewCollection { title = "Home", subtitle = "Australia" });
            viewCollection.Add(new ViewCollection { title = "Work", subtitle = "Sydney" });
 
 
            viewCollection.Add(new ViewCollection { title = "", subtitle = "Daily Featured Deals" });
            viewCollection.Add(new ViewCollection { title = "", subtitle = "Reminder before event starts" });
 
            viewCollection.Add(new ViewCollection { title = "Credit/ Debit Card", subtitle = "Jone Lee" });
        }

The example code in MainActivity.cs/HomeAdapter demonstrates how to subclass BaseAdapter`` ``with the parameter is ViewCollection. 

private class HomeAdapter :  BaseAdapter<ViewCollection>
        {
            LayoutInflater _inflater;
            public List<ViewCollection> _item { get; set; }
            public ListviewPayment(Context context, List<ViewCollection> item)
            {
                _inflater = LayoutInflater.FromContext(context);
                _item = item;
 
            }
 
            public override ViewCollection this[int position]
            {
                get
                {
                    return _item[position];
                }
            }
 
            public override int Count
            {
                get
                {
                    return _item.Count;
                }
            }
 
            public override long GetItemId(int position)
            {
                return position;
            }
 
            public override View GetView(int position, View convertView, ViewGroup parent)
            {
                View view = convertView ?? _inflater.Inflate(Resource.Layout.ListviewPaymentItem, parent, false);
 
                var item = _item[position];
                var viewHolder = view.Tag as PaymentItemViewHolder;
                if (viewHolder == null)
                {
                    viewHolder = new PaymentItemViewHolder();
                    viewHolder.Title = view.FindViewById<TextView>(Resource.Id.txtPayment);
                    viewHolder.SubTitle = view.FindViewById<TextView>(Resource.Id.txtsubPayment);
                    viewHolder.switchButton = view.FindViewById<Switch>(Resource.Id.switchPayment);
                }
 
                viewHolder.Title.Text = item.title;
                viewHolder.SubTitle.Text = item.subtitle;
 
                if (position == 4 || position == 5)
                {
                    viewHolder.Title.Visibility = ViewStates.Invisible;
                    viewHolder.SubTitle.Visibility = ViewStates.Visible;
                    viewHolder.switchButton.Visibility = ViewStates.Visible;
                }
                else
                {
                    viewHolder.switchButton.Visibility = ViewStates.Invisible;
                    viewHolder.Title.Visibility = ViewStates.Visible;
                    viewHolder.SubTitle.Visibility = ViewStates.Visible;
                }
                     
 
                return view;
            }
 
            public class PaymentItemViewHolder : Java.Lang.Object
            {
                public TextView Title { get; set; }
                public TextView SubTitle { get; set; }
                public ImageViewAsync Image { get; set; }
                public ImageView ImgIcon { get; set; }
                public Switch switchButton { get; set; }
 
            }
        }

If your data just is a string so you use BaseAdapter.So everyone will askswhy  use  BaseAdapter<``ViewCollection``>. 
Because of
ViewCollection this[int position]. It is t
o`` return the data associated with a particular row number. Clearly, it is to return a item of ViewCollection at a row number.

Example: at row number 2 the data of the result is

  • Title is Home
  • Subtitle is Australia.

public override ViewCollection this[int position]

            ``{

                ``get

                ``{

                    ``return _item[position];

                ``}

            ``}

ListViewPaymentItem

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="left">
 
        <ImageView android:id="@+id/imgPayment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:visibility="invisible"/>
 
        <TextView android:id="@+id/txtPayment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:textColor="@android:color/holo_red_light"
                android:textSize="16dp"/>
 
        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
             
            <TextView android:id="@+id/txtsubPayment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_margin="5dp"
                android:layout_below="@id/txtPayment"
                />
 
            <Switch android:id="@+id/switchPayment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:visibility="invisible"
                android:layout_alignParentRight="true"
                android:layout_below="@id/txtPayment"/>
 
         
             
            </RelativeLayout>
 
                 
 
    </LinearLayout>
             
     
    </LinearLayout>