Develop Reference

Mvvm cross binding data context

I am trying to implement a mvvm cross solution. I am facing an issue with bindings..
I am trying to implement the solution in xamarin.android.
Below is my Main Layout page - Main.axml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
local:MvxBind="Text Title/>
<Mvx.MvxListView
android:id="#+id/SRMTypeList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fastScrollEnabled="true"
local:MvxItemTemplate="#layout/list_Item"
local:MvxBind="ItemsSource PersonCollection" />
</LinearLayout>
Below is my View Model:
public class MainViewModel :MvxViewModel
{
private string title;
public String Title
{
get{ return title;}
set
{
title = value;
RaisePropertyChanged (()=> Title);
}
}
List<Person> _personCollection;
List<Person> PersonCollection
{
get { return _personCollection; }
set
{
_personCollection = value;
RaisePropertyChanged (() => PersonCollection);
}
public MainViewModel()
{
_personCollection = new List<Person>();
PersonCollection.Add(new Person{Name="Steve", Salary=10000});
PersonCollection.Add(new Person{Name="Mary", Salary=20000});
}
}
MainView.cs
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);
SetContentView (Resource.Layout.Main);
}
The issue starts here in the item template for my list view in the main screen list_Item.axml is shown below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<CheckBox
android:id="#+id/checkbox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="?" />
<TextView
android:textColor="#fff"
android:textSize="16sp"
local:MvxBind="?"/>
</LinearLayout>
How to make the binding for TextView's Text and CheckBox to parent's view model (ie. in the Main View Model class)?.
Any pointer/ help to solve this will be highly appreciated.
I have gone through below links .. but being a newbie was not able to understand the implementation.
Binding button click in ListView template MvvMCross
MVVMCross changing ViewModel within a MvxBindableListView
I am not able to understand how to create the wrapper class and how to set the data context of the item template (list_Item.axml) to this wrapper class.
Is their any way in mvvm cross so that i can refer bindings in the item template directly to the parent view model in my case which is MainViewModel.
Can anyone kindly post a simpler example?
Thanks

I'm not sure if that's what you are asking, but to make a binding of the person's name to the listitem textview:
local:MvxBind="Text Name"
And instead of using a List you should use an ObservableCollection
ObservableCollection<Person> _personCollection;
ObservableCollection<Person> PersonCollection
{
get { return _personCollection; }
set
{
_personCollection = value;
RaisePropertyChanged (() => PersonCollection);
}
}
For the checkbox i would add a field to the Person class such as IsSelected and bind it to the checkbox:
local:MvxBind="Checked IsSelected"

Android Custom ListView Rows: Text Style not being applied

Trying to create custom rows in my listview (to look like this). I've created a custom row layout & derived adapter class. The data loads and shows fine, but the text is not using any format/style specified in my custom row .xml layout file. It's all just the default size/weight, etc.
Here's the custom row layout (listview_desc.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#222222">
<TextView
android:id="#+id/name"
android:text="Name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="10dip"
android:textStyle="bold"
android:textSize="20dip"
/>
<TextView
android:id="#+id/description"
android:text="Description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="10dip"
android:textSize="13dip" />
</LinearLayout>
Here's my main layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:theme="#android:style/Theme.NoTitleBar"
android:minWidth="25px"
android:minHeight="25px"
android:background="#drawable/gradient_darkbg">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listView1" />
</LinearLayout>
My adapter code (I'm using Xamarin, but I don't think that's the problem...)
public class ListViewFormAdapter : BaseAdapter<Form>
{
List<Form> mForms;
Activity context;
public ListViewFormAdapter(Activity context, List<Form> items)
: base()
{
this.context = context;
this.mForms = items;
}
public override long GetItemId(int position)
{
return position;
}
public override Form this[int position]
{
get { return mForms[position]; }
}
public override int Count
{
get { return mForms.Count; }
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
var item = mForms[position];
View view = convertView;
if (view == null) // no view to re-use, create new
view = context.LayoutInflater.Inflate(Resource.Layout.listview_desc, null);
view.FindViewById<TextView>(Resource.Id.name).Text = item.Name;
view.FindViewById<TextView>(Resource.Id.description).Text = item.Description;
return view;
}
}
And finally the main activity where I load and use the adapter:
public class HomeScreenActivity : Activity
{
List<Form> mForms;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Create your application here
SetContentView (Resource.Layout.Home);
// Load all forms and populate the main menu
mForms = Utils.FormLoader.LoadForms("Forms");
ListView listView = FindViewById<ListView>(Resource.Id.listView1);
listView.Adapter = new ListViewFormAdapter(this, mForms);
}
}
Sorry for all the code, maybe it'll help someone in the future... thanks for any help.

I'm not sure that this is the problem, but you inflating the views incorrectly. it should be
view = inflater.inflate(R.layout.listview_desc, parent, false);
instead of
view = context.LayoutInflater.Inflate(Resource.Layout.listview_desc, null);
using the 3 parameter version of inflate

What styles aren't showing correctly? I'm not sure what you're expecting or what you're seeing from the question. If it is to do with alignment, you should bear in mind that android:layout_alignParentLeft="true" is not valid in a LinearLayout

Thanks for the response guys. Turns out it was some problem with Git/Xamarin. I committed my sources at another machine, came home, synced up and all my formatting in the row layout xml were gone. Who knows... maybe a cached version was being used or something. I actually had to use the code posted on this page to get it to work (since it was lost), so maybe someone can use this as example code. It works.

Android MVVM Cross v3 - How to Create a ListView with alternating row colours

I'd like to create a ListView that has an alternating background colour for each row.
I'm new to Android development in general, never mind Xamarin and MVVMCross as well :)
There are some examples of doing this in the Android world and the Xamarin world, but I can't figure out how to set this up in an MVVM Cross way.
My understanding is that I will need to implement this in the Android specific view code and to do that I will need to set some adapter on the ListView that can programatically set the background colour of each List item as they are rendered.
I found this example:
https://github.com/slodge/MvvmCross-Tutorials/tree/master/Working%20With%20Collections/Collections.Droid
However, once implemented I find that none of the following methods are called on my CustomAdapter : MvxAdapter when displaying the view:
GetBindableView, GetSimpleView, GetBindableView, GetView
I also found this unanswered question
Issue with custom listview using mono droid and mvvmcross
Which uses MvxBindableListAdapter which seems no longer to exist.
Can anyone point me in the right direction?
Here are the various code snippets involved:
TradeBookingResponseView.axml owns this:
<Mvx.MvxListView
android:id="#+id/TradeConfirmation"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource OpenTradeListItems"
local:MvxItemTemplate="#layout/item_confirmation"
/>
inside its LinearLayout
item_confirmation.axml is this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tradingStateIcon"
xmlns:local="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_weight="0.35"
android:text="Field"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:id="#+id/tradeConfirmationField"
local:MvxBind="Text Field" />
<TextView
android:layout_weight="0.65"
android:text="Value"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:id="#+id/tradeConfirmationValue"
local:MvxBind="Text Value"/>
</LinearLayout>
The TradeBookingResponseViewModel exposes this
public ObservableCollection<ConfirmationItem> OpenTradeListItems
{
get
{
return openTradeListItems;
}
set
{
if (!Equals(value, openTradeListItems))
{
openTradeListItems = value;
RaisePropertyChanged(() => OpenTradeListItems);
}
}
}
While the view code is
public class TradeBookingResponseView : ViewBase
{
public TradeBookingResponseView() : base(Resource.Layout.TradeBookingResponseView)
{
}
protected override void OnViewModelSet()
{
SetContentView(Resource.Layout.TradeBookingResponseView);
var list = FindViewById<ListView>(Resource.Id.TradeConfirmation);
list.Adapter = new CustomAdapter(this, (IMvxAndroidBindingContext) BindingContext);
}
}
public class CustomAdapter : MvxAdapter
{
public CustomAdapter(Context context) : base(context)
{
}
public CustomAdapter(Context context, IMvxAndroidBindingContext bindingContext) : base(context, bindingContext)
{
}
protected override View GetBindableView(View convertView, object dataContext)
{
convertView.SetBackgroundColor(Color.Red);
return base.GetBindableView(convertView, dataContext);
}
}
Where ViewBase extends MvxActivity
And I'm setting red just to see if it gets called (it doesn't). According to more Android-y examples I want to use View GetView(int position, View convertView, ViewGroup parent) to see what position the item is at, so I can do % 2 on it (this also is not called).

Try setting the color after the base method - eg
public override GetView(int position, View convertView, ViewGroup parent)
{
var v = base.GetView(position, convertView, parent);
v.SetBackgroundColor( I %2 == 0 ? Color.Red : Color.Blue);
return v;
}
Alternatively you could data-bind the background color if you wanted to

Here is how to data-bind using background, in your custom table template (item_confirmation), replace my RowItem.RowId with the id of your OpenTradeListItems list:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
...
local:MvxBind="BackgroundColor BackgroundColor(RowItem.RowId)">
And here is the BackgroundColor converter:
public class BackgroundColorValueConverter : MvxColorValueConverter
{
protected override MvxColor Convert(object value, object parameter, System.Globalization.CultureInfo culture)
{
return (int)value % 2 != 0 ? BusinessConstants.ThirdAlternateBGColor : null;
}
}

How to implement Custom View as part of MVC?

So I'm experimenting with implementing an MVC pattern in Android where my views are subclassed from RelativeLayout, LinearLayout, ScrollView, etc... It's working until I try to get a hold of a view within my view. I get an NPE. I've tried accessing the view in order to set the onClickListener in the constructor and also in onAttachedToWindow(), but I get the NPE in both places.
For example, here's a view class:
public class ViewAchievements extends LinearLayout
{
private RelativeLayout mRelativeLayoutAchievement1;
public ViewAchievements(Context context, AttributeSet attrs)
{
super(context, attrs);
mRelativeLayoutAchievement1 = (RelativeLayout) findViewById(R.id.relativeLayout_achievement1);
mRelativeLayoutAchievement1.setOnClickListener((OnClickListener) context); //NPE on this line
}
#Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
mRelativeLayoutAchievement1.setOnClickListener(mOnClickListener); //Also get NPE on this line
}
}
Can someone please tell me the proper way to get a hold of my subviews, in this case mRelativeLayoutAchievement1?
Here's an XML snippet:
<com.beachbody.p90x.achievements.ViewAchievements xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/gray_very_dark"
android:orientation="vertical" >
<!-- kv Row 1 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:baselineAligned="false">
<RelativeLayout
android:id="#+id/relativeLayout_achievement1"
style="#style/linearLayout_achievement"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="#dimen/margin_sm"
android:layout_weight="1" >
<TextView
android:id="#+id/textView_achievement1"
style="#style/text_small_bold_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/margin_large"
android:text="1/20" />
</RelativeLayout>
...
And here's how I'm creating the view from my Activity:
public class ActivityAchievements extends ActivitySlidingMenu
{
private ViewAchievements mViewAchievements;
#Override
public void onCreate(Bundle savedInstanceState)
{
mViewAchievements = (ViewAchievements) View.inflate(this, R.layout.view_achievements, null);
setContentView(mViewAchievements);
...

You're trying to get the child views during the view's constructor. Since they are child views, they haven't been inflated yet. Can you move this code out of the constructor, possibly into View.onAttachedToWindow()?
http://developer.android.com/reference/android/view/View.html#onAttachedToWindow()

Problem with creating Compound Control in Android

I am learning to create a compound control in android.
For starters i tried an edit text with an attached button to clear it.
The problem is even though i can see the compound control in the graphical view of the
main.xml, there is an error message : "Custom view ClearableEditText is not using the 2- or 3-argument View constructors; XML attributes will not work"
This is not visible in project explorer under errors only in the xml graphical view
i am able to compile and run but get a force close.
XML : COMPOUND CONTROL clearable_edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText android:id="#+id/editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button android:id="#+id/clearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLEAR"
/>
</LinearLayout>
CLASS
public class ClearableEditText extends LinearLayout
{
EditText et;
Button btn;
public ClearableEditText(Context context)
{
super(context);
LayoutInflater li=(LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
li.inflate(R.layout.clearable_edit_text,this,true);
et=(EditText)findViewById(R.id.editText);
btn=(Button)findViewById(R.id.clearButton);
hookupButton();
}
private void hookupButton()
{
btn.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
et.setText("");
}
});
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.commsware.android.merge.ClearableEditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<com.commsware.android.merge.ClearableEditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>

Your class extends LinearLayout but you never add any views to it. You need to call addView(...) and pass your inflated view as the parameter.
Also, to define your view in XML you need to override the 2 and 3 argument constructors for a LinearLayout. Add this to your code:
public ClearableEditText(Context context, AttributeSet attrs) {
super( context, attrs );
}
public ClearableEditText(Context context, AttributeSet attrs, int defStyle) {
super( context, attrs, defStyle );
}
To get all 3 constructors to use the same initialization code, move your code from the single argument constructor to the 3 argument constructor, then in the other 2 constructors call this(context, null, 0) and this(context, attrs, 0) respectively.